Overzetten CSS naar chrch2

[quote=“peterarends, post:87, topic:1429”]
Het is denk ik handig om een nieuw algemeen topic te maken over wat je met css zou willen bereiken, dan kan ik zorgen dat het gaat werken.

Ik vermoed dat een deel niet meer nodig is omdat je onderdelen aan en uit kunt zetten en zo een aantal belangrijke dingen op maat maken kunt maken.
[/quote

Bijgaand de PGS CSS items: aanpassen kleur en lettergrootte van de titels in de agenda.

Op de afbeelding links chrch1 rechts chrch2.
Zoals te zien houden wij (ik) van kleurtjes. Zo’n grijze chrch (zoals chrch2 aan de rechtse kant) is erg kaal. De blauwe buttons onderaan hebben we met de kleurinstelling gedaan, die gaat gelukkig al mee naar chrch 2. Maar te zien is dat het best een leuk effect geeft als je bijvoorbeeld de ‘geven’ module een ander kleurtje (rood of groen, ik koos voor groen) te geven. En, de HOME button zwart, geeft net een beetje extra gevoel bij de functie van deze knop.
Dit alles doen we nu met onderstaande css:

/* Tab Home Zwart en Geven Groen */
#tab-t0-3 .tab-button-text{color:green;}
#tab-t0-3 .tab-button-icon{color:green;}
#tab-t0-0 .tab-button-text{color:black;}
#tab-t0-0 .tab-button-icon{color:black;}

Chrch 2 is op de afbeeldling nog steeds erg ‘grijs’. Je ziet dat de titels / kopteksten zoals #PRIKBORD en #LITURGIE etc etc in blauwe kleur (in ons geval) veel meer kleur meegeven aan de App. Hopelijk kan ook dit mee naar chrch2?
Dit alles doen we nu met onderstaande css:

/* Geeft Titels op homescherm kleur */
.app-root button ion-card-header.card-header.card-header-ios {
font-size: 12px;
color: #0082b4;
}

Tot slot gebruikten we deze nog:
body .chat .bottom_fade{ display:none; }
Die Voorkomt vervagen onderste regel lange berichten en voorkomt dat tekst niet zichtbar is. Helemaal duidelijk is het me niet eens. Was volgens mij een foutje binnen chrch1 en hoeft vermoedelijk niet mee naar chrch2?

Kun je ook screens plaatsen van de app zelf?

Dit werkt iets anders, iedere button heeft een eigen 'class, deze code wordt:

.bottommenu .button-home{
color:black;
}

.bottommenu .button-geven{
color:green;
}

Zou je het ook willen voor het menu aan de linkerkant op desktop:

.bottommenu .button-geven, .sidebarmenu .button-geven a{
color:green;
}
.route-index h2{
color:#0082b4;
}

Die zorgt ervoor dat je op play kunt klikken bij mediaspelers en is inderdaad niet meer nodig.


(staat nog niet live)

Naar aanleiding van:

.dropdown .background {
    background-color: transparent;
}

Hierbij de 2 screens van chrch1 en chrch2.
Ik zie nu ook dat de dag weg is in chrch2 … kan die weer terug?

Dank @Jaap, css wordt dan:

.route-events-index-event h2{
font-weight:bold;
font-size:12px;
color: #B43836;
}


Dag is terug, komt bij jou terug met de volgende update.

Dank @peterarends, even voor mijn begrip: wanneer kunnen we deze css items gebruiken, zodra we de beschikking hebben over de admin voor chrch2? of … nu al op een andere plaats? Nog een vraag: kun je ook aangeven welke delen gerealiseerd gaan worden via menu instellingen (zoals ik begrepen heb dat je plannen zijn).

Top… die doet precies wat ik bedoelde. :wink:

Dit werkt niet in chrch2 webversie

en dit ook niet

en dit werkt wel. Top…

Deze had je wellicht gemist.

Deze kun je gebruiken bij de volgende update. Dat is ook de update waar de admin in verwerkt is.

1 like

Dank @peterarends, kleur en lettergrootte datum is okay, dag komt nog :wink: update: alleen in webversie, nog niet op iPhone met testflight.

image
In chrch.org/admin bij opslaan van css krijg ik een server error

Dit zou weer moeten werken, excuus.

1 like

.route-index h2{
color:#0082b4;
}

Deze code staat nog steeds in de css bij ons, maar lijkt niet meer te werken in chrch2?

@kroes met deze css kun je de diverse links onder account onzichtbaar maken en de bewerklink die leden zien als ze hun profiel bekijken (dit is nog niet live):

.editmyprofile,
.editfamilymember,
.addfamilymember,
.detailview.user .dropdown
{
display:none
}

Dat klinkt goed! Dan blijft het nog wel mogelijk om foto, emailadres en telefoonnummer aan te passen?

Nee, want dit maakt echt de links naar de bewerkpagina’s onzichtbaar.

Dat was nu ook niet helemaal de bedoeling. Is er een andere mogelijkheid om via CSS de velden onzichtbaar te maken? Ik krijg het wel voor de tekstboxen door onderstaande, maar dan blijft het bijbehorende label nog zichtbaar en die is lastiger weg te krijgen. Ik zou wel graag de mogelijkheid behouden voor gebruikers om foto, emailadres, telefoonnummer, wachtwoord en bio aan te kunnen passen.

#__layout > div > div.maincontent > div > div > div > div > div.column.bg.user_content > div.padding > div > form > div > div > div > input[name="address"] {display: none;}

Kan ik dat landkaartknopje bij “leden” ook groter maken via css?

Zeker:

.mdi-map {
    font-size: 1.5rem;
}
1 like