CSS voor het Greenshift thema
De CSS op deze pagina is speciaal voor het WordPress Greenshift FSE thema. Omdat sommige elementen universeel FSE thema gerelateerd zijn, zoals bijvoorbeeld CSS voor het navigatiemenu, is de kans groot dat je deze probleemloos in een ander FSE thema kunt toepassen.
Hou er rekening mee dat de manier om de CSS-code of klassen te integreren voor elke websitebouwer enigszins verschilt. Het is ook waar dat je overal gewone CSS-code kunt integreren, maar niet elke websitebouwer staat toe om met CSS-klassen te werken. Site (pagina)bouwers zoals Kadence Pro, GenerateBlocksPro, Elementor Pro hebben allemaal opties om CSS-klassen te gebruiken.
Hou er rekening mee dat de manier om de CSS-code of klassen te integreren voor elke websitebouwer enigszins verschilt. Het is ook waar dat je overal gewone CSS-code kunt integreren, maar niet elke websitebouwer staat toe om met CSS-klassen te werken. Site (pagina)bouwers zoals Kadence Pro, GenerateBlocksPro, Elementor Pro hebben allemaal opties om CSS-klassen te gebruiken.
Greenshift FSE thema submenu breder maken
Deze CSS code stelt je in staat de breedte van het submenu van de navigatie aan te passen. Omdat Greenshift bij de navigatie gebruik maakt van universele elementen (blocks) werkt deze ook op de meeste andere FSE thema’s.
Motivatie CSS code: het standaard submenu is nogal smal. Dat betekent dat zelfs een eenvoudige pagina titel al een afbreking heeft en meerdere regels krijgt. Dat is over het algemeen niet mooi. Er zijn bij de meeste FSE thema’s wel instellingen voor het hoofdmenu, maar geen breedte instellingen voor het submenu (de dropdown). Daar gebruik je deze code voor. Plaats de code bijvoorbeeld in een code plug-in.
De 200px waarde kun je uiteraard aanpassen. Het effect van het bredere submenu staat onder de code.
Motivatie CSS code: het standaard submenu is nogal smal. Dat betekent dat zelfs een eenvoudige pagina titel al een afbreking heeft en meerdere regels krijgt. Dat is over het algemeen niet mooi. Er zijn bij de meeste FSE thema’s wel instellingen voor het hoofdmenu, maar geen breedte instellingen voor het submenu (de dropdown). Daar gebruik je deze code voor. Plaats de code bijvoorbeeld in een code plug-in.
De 200px waarde kun je uiteraard aanpassen. Het effect van het bredere submenu staat onder de code.
/* Greenshift FSE breedte submenu */
.wp-block-navigation-item__label {
width: 200px;
}
Greenshift post Progress bar kleur aanpassen
Greenshift thema heeft een leuke optie om elke post te voorzien van een progress bar, ofwel voortgangsbalk. Dan kan de lezer zien hoever deze is met het lezen. Deze balk is standaard een beschaafd blauw. Zo beschaafd dat deze eigenlijk vaag teveel wegvalt. Met deze CSS code kun je de kleur aanpassen. De kleur is hier rood, maar kun je uiteraard aanpassen.
/* Greenshift progress bar kleur op posts - let op: met # */
#gs-progress-bar{background:red !important;}Let op: in tegenstelling tot een normale class, start deze code niet met een punt . maar met een #.
Greenshift ‘post Progress bar kleur’back to top’ aanpassen
Het Greenshift thema heeft de optie om een ‘back to top’ icoon te tonen. De kleur daarvan kun je aanpassen met deze CSS code.
/* Greenshift 'back to top' kleur aanpassen - let op: met # */
#greenshifttotop{background:red !important; color:white !important}Let op: in tegenstelling tot een normale class, start deze code niet met een punt . maar met een #.
CSS integreren op je website
Wil je weten hoe je CSS-code integreert op je WordPress website? De manier waarop je de code integreert is belangrijk voor een voorspelbaar en goed resultaat. Kijk hier.
