WPNews.nl

Kadence thema CSS code

Het Kadence thema, zowel de gratis als de Pro versie, is erg flexibel en biedt veel instellingen om alles naar wens aan te passen. Echter, zelfs met het Kadence thema is er behoefte aan CSS-code om sommige dingen aan te passen.
Omdat het Kadence thema en Kadence blocks (de builder) twee aparte producten zijn, hebben we aparte pagina’s met CSS-code gemaakt.

Kadence en CSS zijn een goed team

CSS is de ideale manier om eenvoudig elementen van het Kadence thema aan te passen of te verwijderen. Hiermee kun je het Kadence thema aanpassen voor jouw WordPress site. Omdat Kadence volledig is afgestemd op de Gutenberg builder, werkt CSS zoals het hoort en zijn de resultaten voorspelbaar.

Cache en veranderingen aan je site

Let op: bijna elke website gebruikt cache. Cache wil zeggen dat de meeste pagina’s en scripts worden ‘onthouden’ om je bezoekers een snellere ervaring te bieden. Als je veranderingen aanbrengt, zoals CSS-code, wil je dat niet. Bij dit soort wijzigingen is het raadzaam om de cache van de site uit te zetten, of al je dat niet wil, de cache te wissen na het wijzigen van CSS.

Ruimte boven en onder elke kop van Kadence met CSS

Deze CSS-code regelt de ruimte boven en onder alle H1, H2, H3, H4, H5 en H6 koppen. Let op: het eerste getal is de ruimte boven de kop, het laatste getal is de ruimte onder de kop. De marge in dit codevoorbeeld wordt uitgedrukt in 
em . Je kunt dit wijzigen naar px, zoals bijvoorbeeld 15px. Let op dat decimalen hier worden gemarkeerd met een . (punt) en niet met een komma.
/* CSS witruimte boven en onder koppen (headings) van Kadence */
.single-content h1,.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6 {
    margin: 0.4em 0 0.0em
			!important;
}

Ruimte boven en onder elk soort kop van Kadence afzonderlijk met CSS

Deze CSS-code hierboven gaf alle koppen dezelfde waarde qua witruimte onder en/of boven. Dit is voor velen meestal voldoende. Je kunt het echter ook per type kop instellen. Je kunt de waarden (hier aangegeven in em) uiteraard aanpassen.
/* CSS witruimte onder en boven, van elke Kadence heading apart */
.single-content h1 {
    margin: 0.5em 0 0.0em
			!important;
.single-content h2 {
    margin: 0.4em 0 0.0em
			!important;
.single-content h3 {
    margin: 0.4em 0 0.0em
			!important;
.single-content h4 {
    margin: 0.3em 0 0.0em
			!important;
.single-content h5 {
    margin: 0.3em 0 0.0em
			!important;
.single-content h6 {
    margin: 0.3em 0 0.0em
			!important;

}

Verwijder schaduw onderaan elke Kadence pagina

Elke Kadence thema pagina heeft standaard een soort schaduwrand onderaan (tussen het laatste blok en de voettekst). Deze CSS-code verwijdert de pagina schaduw uit het Kadence thema.
/* Verwijderd schaduw onderaan elke Kadence pagina */
.site .entry {
    box-shadow: none;
}

Plaaatsen van CSS code

We gaan ervan uit dat je al weet hoe je CSS plaatst. Als je dat nog niet weet, kijk dan hier:

Hoe plaats je CSS code

Gebruik je een ander thema?

De basis van de CSS-code is dan hetzelfde, alleen zijn de doelen (de classes die worden beïnvloed door de CSS-code) meestal anders.

Zoek dan de juiste classes op, via de helpdesk van je thema, Google of door het in pagina code op te zoeken, en vervang de classes in deze CSS snippets door jouw .classes.

Translate »