Genlike Thema

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.

Bij het 1508 Genlike Thema veranderd bij het scrollen de navigatie balk naar een kleinere navigatie balk toe, die dan bovenin het scherm stil blijft staan.

Deze optie kan uitgezet worden per pagina of bericht via een Extra veld te maken.

De naam van dit Extra veld moet zijn: Tini Nav

De waarde om het uit te zetten moet zijn: Nee

Let op: Beide waarden zijn Hoofdletter gevoelig

Dat is voldoende om de Tiny navigator uit te zetten.

NB: Het kan wel eens gebeuren dat het resultaat nog niet direct zichtbaar is i.v.m. het Cache geheugen!

 

In het oefen thema 1508_Genlike is een optie om per pagina of bericht een afbeelding in de Header te plaatsen.

De afbeelding wordt dan geplaatst onder de Menubalk over de totale breedte van het scherm. Zie boven in de pagina van dit bericht.

U kunt dat doen door in de Editor onder de optie Extra velden een veld aan te maken (Nieuwe toevoegen) met de naam “Header afbeelding” (letterlijk overnemen en zonder aanhalingstekens) en dan als waarde het complete Internetadres van de afbeelding (URL) in te vullen. Lees verder

Het is mogelijk om de Verzendknop van het Contactformulier van de plugin Contact Form 7 aan te passen aan uw Thema.

Dat kunt u doen door in uw Dashboard te gaan naar Contact > Contactformulieren en dan te kiezen voor Bewerken.

De optie “Bewerken” verschijnt wanneer u de muispijl op de titel van het formulier plaatst.

Lees verder

De Header van het (oefen) Thema 1508_Genlike is  per pagina te verbergen door het vinkje te verwijderen bij de optie “Show Header on Page” onder “Theme Options” in de Page Editor.

Maar bij de berichten wordt de Header wel getoond. Hier is de bovengenoemde optie niet aanwezig om de Header te verbergen. Om toch de Header ook bij de berichten te verbergen, kunt u overwegen de code, die de Header toont, in zijn geheel te verwijderen. Lees verder