Stijlboek
Regels die we moeten naleven bij het maken van berichten of pagina's op de website
Algemeen
De hoofdkleur van de site is een warm oranje/rood, kleurcode #e24219
Achtergronden zijn standaard lichtgrijs kleurcode #f8f8f8.
Om elementen (balken, kaartjes) nadruk te geven is de achtergrond soms helemaal wit #ffffff (bijvoorbeeld balken op de homepage), of soms een verlopende kleur van donker grijs naar bijna wit: linear-gradient(rgba(233,232,233,0.5) , #f7f7f7);
kopieren
Als je een nieuwe pagina of post maakt gebruik je voor een pagina het beste een kopie van de pagina stijlboek. Dan zien de intro, en de platte tekst er altijd goed uit. Voor een post kan je een kopie van de post voorbeeld. Daarin staan ook templates van rijen met plaatjes.
Pagina's
- Pagina's moeten met de pagebuilder gemaakt worden.
- De titels van pagina's worden standaard niet getoont, maar je moet ze wel invullen. Ze worden door browsers gebruikt.
- Die eerste rij tekst van een pagina vertelt in het kort wat er op de pagina te zien is.
Deze tekst is 18 px, wat vetter en de achtergrond is wit met padding.
Als je op een pagebuilder rij, met een klik op een icoontje van een engelse sleutel, de instellingen voor die rij opent, dan op attributes klikt, en bij de rij klasse de naam mh_sb_paginaintro invult, dan heeft de rij de juiste instellingen. - De tekst van de eerste rij (en alle volgende) kan je in de rij zetten met de pagebuilder 'SiteOrigin Bewerken' widget. Hier geef je weer de titel op. Deze titel staat boven aan de pagina, in ons oranje/rood.
- Volgende rijen hebben een letter grote van 16 px, geen achtergrond maar wel padding. Een rij krijgt automatisch die instellingen als je de rij klasse mh_sb_plattetekst gebruikt, op dezelfde maier als hierboven. (steeksleutel voor instelling rij - attributes- rij klasse)
Er is ook nog een rij klasse mh_sb_plattetekst_wit gedefieneerd. Die is hetzelfde als plattetekst maar met een witte achtergrond. - Als je een nieuwe kind-pagina maakt moet je er voor zorgen dat die pagina dezelfde foto krijgt als zijn parent.
Per hoofdafdeling van de verschillende sites hebben de pagina's en hun sub pagina's de volgende instellingen:
Home: - Keuken praten.
Nieuws: - Yoga
Agenda - Muziek
Voor jou: - Huiskamer
Over ons - Keuken koken.
Contact - Bank buiten
Vrijwilligers site - Keuken
Vrijwilligers site, de kast - kast
Vrienden site - handen schudden
Posts
- De titels van posts worden standaard niet getoont, maar je moet ze wel invullen. Ze worden wel gebruikt op pagina's met het overzicht van posts.
- Net als bij pagina's kan je de eerste alinea van een posts nadruk geven. Nu gebruik je klasse 'mh_sb_postsintro', die je weer opgeeft in het invulvakje 'rij klasse' van de attributen van de pagebuilder rij (niet de widget).
Voor tekst gebruik je weer een 'siteorigin_bewerken' widget. De titel die je daar opgeeft krijgt ons mooie oranje. - Volgende rijen hebben een letter grote van 16 px, geen achtergrond maar wel padding.
Deze rijen moeten de css klasse 'mh_sb_plattetekst' hebben, weer in te stellen voor de rij en dan attributes. - De 'featured image' van posts worden niet in de post getoont maar net als de titel wel in de overzichten van posts. Je moet hem dus wel instellen.
- Als je een plaatje naast de eerste alinea wil, maak je in de eerst rij twee kolommen. In de ene zet je het plaatje wat je wil (eventueel hetzelfde als de featured image), in de andere tekst.
- Posts worden in de overzichten past zichtbaar als je ze de category 'nieuws' geeft op de gasten site, of de category vrijwilligers op de vrijwilligers site.
- Posts op de vrijwilligers site moeten allen te bereiken zijn als je ingelogd bent. WordPress zorgt daar automatisch voor. Je moet daar dus niets voor instellen.
Buttons.
- Onze standaard button is een stukje 'eigen html'. De code staat hieronder, die kan je pakken in een 'eigen html' widget, of je kopieert de widget hiernaast in de backend met de rechter muisknop
<button class="buttonhome"><a href="https://www.marikenhuis.nl/welkom/">Neem contact met ons op</a></button>
Headers
Hieronder zie je hoe headers er uit zien. Afspraak is dat we in headers en titels gewone tekst gebruiken. ALLES IN HOOFDLETTERS TYPEN is niet de bedoeling. In tekst kan je (spaarzaam) wel vet gebruiken, in titels niet. Die horen er automatisch goed uit te zien