Hoe header aan te passen

Hoi Tessa,

Een website zoals WP bestaat uit een aantal delen die samen bepalen wat je ziet, en wat de site kan.
Daarnaast is er de INHOUD = text, plaatjes, video die het ‘verhaal’ vertellen..

WP werkt met themes, templates, plugins en widgets voor het eerste gedeelte. De inhoud en de plaatjes komen van jou.

Themes is een set van bestanden die samen één geheel vormen. Samen bepalen ze de functionaliteit en het uiterlijk van de site.
Er zijn HEEL veel gratis themes en ‘premium themes [=betaalde themes]’

Templates zijn ‘sjablonen’, meestal één pagina om de opmaak / indeling zo te maken als gewenst.

Plugins en widgets zijn kleine pakketjes die [doorgaans op eenvoudige wijze] ‘functionaliteit’ toevoegen aan je site; Voorbeelden: formulieren; socialmedia; fotogallerij; betaalmogelijkheden; Membership; beveiliging… etc.
== == ==

Om de zaken naar wens aan te passen:

1. Kies een THEME dat in de meest belangrijke opzichten, het meest lijkt op wat je wilt bereiken met je site. Zo heb je een stevig ‘startpunt’ voor je site.
2. Installeer de plugins met de gewenste extra functionaliteit
3. maak, en activeer een ‘childtheme’ [zie verderop…]
4. maak de aanpassingen voor je site in je childtheme door CSS en PHP aan te passen

== == == verwijderen ‘zoekveld’

#header #searchform {
        display:none;
}

== == == logo en header

#site-title img {
	margin: 8px 0; /*speel met de waarden*/
}

Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

Heb je nog geen childtheme?

1. installeer en activeer ‘one click childtheme’-plug-in
2. activeer de originele theme
3. Dashboard > weergave > child theme
4. beantwoordt de vragen op het scherm
   >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
5. Activeer het childtheme.

==

6. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
   – Maak je aanpassingen in style.css van het childtheme;
   – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

== == == Extra
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of een andere webdeveloper plugin / add-on.

Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren etc. aanpassen.

Voor een cursus kijk op het internet
bijv Lynda.com [betaald – engels maar erg goed]

Veel uitleg ook in het NL op het internet en dit forum

== == == Naslag
http://codex.wordpress.org/Main_Page
http://codex.wordpress.org/Using_FileZilla
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_Troubleshooting

Je gebruikt het pinboard theme; Dat theme heeft zo’n ‘custom-css’ optie. neem hierin je wijzigingen op.

1. Dashboard > weergave > Theme Options
2. ‘layout-TAB
3. Plaats de code in het Custom-CSS veld
   Voeg verdere wijzigingen ook toe aan dit veld.
4. sla op
5. Browser: <Ctrl-F5> om de browser te verversen

Je gebruikt firebug om je site te onderzoeken en evt. aanpassingen te testen. Vervolgens neem je die wijzigingen op in de ‘customCSS-tab

== == ==
Ik zie dat de waarden van

#site-title img {
	margin: 5px 0; /*speel met de waarden*/
}

inmiddels zijn veranderd in 5px, en dat de afmetingen en plaatsing daarmee zijn veranderd.

Is het logo ’te groot’? Pas de afmetingen aan door het een percentage mee te geven van bijv 65%. Of snij in een tekenprogramma/ foto programma even wat wit weg, boven en onder.

#site-title img {
	margin: 5px 0; /*speel met de waarden*/
        width:65%;
}

(gebruik 5px; ipv 05px;)