CSS

OEFENING

Het is in het thema Genlike mogelijk om een afbeelding in de Header te plaatsen.

Tip: Aanbevolen wordt een afbeelding van plm. 1900px breed en plm. 300px hoog. Pas de code height:258px; (onder .sdb-header) aan op de gewenste pixelhoogte van de afbeelding.

Op de training (vanaf Maart 2020) wordt uitgelegd hoe de Header-afbeelding per page of bericht kan variëren.

Dit zijn de CSS codes om de Header van het Thema 1508_Genlike in te stellen als dit voorbeeld:


/* Header aanpassen */
.sdb-header{background-image: url(https://wp-flevoland.nl/wp/wp-content/uploads/2019/10/emmeloord1.jpg); height:258px;}
/* Zoekvak verbergen */
.sdb-header form.sdb-search{visibility:hidden;}
/* Titel aanpassen in Header */
.sdb-headline, .sdb-headline a, .sdb-headline a:link, .sdb-headline a:visited, .sdb-headline a:hover {color:#fff !important; font-weight:700; text-shadow: 1px 1px 2px #111;}
/* Slogan aanpassen in Header */
.sdb-slogan, .sdb-slogan a, .sdb-slogan a:link, .sdb-slogan a:visited, .sdb-slogan a:hover {color:#fff !important; top:115px !important; font-weight:600; text-shadow: 1px 1px 3px #000;}

 

Let op:

Als de achtergrondfoto niet getoond wordt, plaats dan de link van de afbeelding tussen aanhalingstekens als: “https://etc….”

Om de standaard kleur van de Menubalk (navigatiebalk) te veranderen, kan de CSS instellingen aangepast worden.

Dat kan op de volgende manier.

Ga in het Dashboard naar: Weergave > Customizer > Extra CSS.

Hier kan de volgende code geplakt worden:

.sdb-nav{background:#007F7B}
ul.sdb-hmenu ul li a:hover, .desktop ul.sdb-hmenu ul li:hover > a {background:#00524F}
ul.sdb-hmenu li li a {background:#007F7B}
.tiny.sdb-nav{background:#00524F}

In deze code staat de kleurcode van de Menubalk op #007F7B, maar dat kan aangepast worden.

Er is op onze website ook een Kleur picker om de juiste kleur te kiezen.
Ga hiervoor naar: www.wp-flevoland.nl/color

Uitleg van de code:

.sdb-nav{background:#007F7B}
Dit is de achtergrondkleur van de hele Menubalk.

ul.sdb-hmenu ul li a:hover, .desktop ul.sdb-hmenu ul li:hover > a {background:#00524F}
Hier wordt de “hover” kleur gegeven van de knoppen in de Menubalk. – (hover = als de muispijl er overheen gaat)

ul.sdb-hmenu li li a {background:#007F7B}
Met deze code wordt de achtergrondkleur van de knoppen op de Menubalk aangegeven.
In dit geval de zelfde kleur als van de Menubalk zelf (probeer eens dit te wijzigen)

.tiny.sdb-nav{background:#00524F}
Met “.tiny” voor de code “.sdb-nav” wordt de kleur bepaald voor de Menubalk als de balk verkleind wordt.
De Menubalk wordt van hoogte verkleind en blijft bovenin het scherm staan als de pagina naar beneden gescrold wordt.