Mijn hoofdmenu heb ik van verschillende kleuren voorzien door de volgende code op te nemen in mijn style.css bestand:
.main-navigation li a span, .date span { background-color: #909673; background-image: url(images/shadowLeft.png); background-position: top right; background-repeat; repeat-y; position: absolute; right: 100%; height: 100%; width: 20px; top: 5px; }
.main-navigation li:nth-child(1) a, .main-navigation li:nth-child(1) a span { background-color: #e4337b; }
.main-navigation li:nth-child(2) a, .main-navigation li:nth-child(2) a span { background-color: #f2ad01; }
.main-navigation li:nth-child(3) a, .main-navigation li:nth-child(3) a span { background-color: #54b703; }
.main-navigation li:nth-child(4) a, .main-navigation li:nth-child(4) a span { background-color: #0068c0; }
.main-navigation li:nth-child(5) a, .main-navigation li:nth-child(5) a span { background-color: #36F; }
.main-navigation li a:hover { text-decoration: none; background-color: #666; }
.main-navigation li a:hover span { background-color: #666; }
Door background-color: #e4337b; te veranderen, verandert de kleur. [zie ook http://www.colorpicker.com]
lees meer:
http://codex.wordpress.org/Blog_Design_and_Layout
== == ==
achterhaal welk element de opmaak voor het betreffende web-onderdeel ‘regelt’. Elke browser heeft zijn eigen ’tool’ hiervoor.
Bijvoorbeeld:
[in firefox: re-klik > element inspecteren. Dan klik li-onderaan in toolbar op pijltje, li-onder.]
Klik te onderzoeken element in de webpagina en bekijk welke ‘div’het betreft.
voorbeeld
.sidebar li is het aan te passen element
Verander de code dan in
.sidebar li a span, .date span { background-color: #909673; background-image: url(images/shadowLeft.png); background-position: top right; background-repeat; repeat-y; position: absolute; right: 100%; height: 100%; width: 20px; top: 5px; }
.sidebar li:nth-child(1) a, .main-navigation li:nth-child(1) a span { background-color: #e4337b; }
.sidebar li:nth-child(2) a, .main-navigation li:nth-child(2) a span { background-color: #f2ad01; }
.sidebar li:nth-child(3) a, .main-navigation li:nth-child(3) a span { background-color: #54b703; }
.sidebar li:nth-child(4) a, .main-navigation li:nth-child(4) a span { background-color: #0068c0; }
.sidebar li:nth-child(5) a, .main-navigation li:nth-child(5) a span { background-color: #36F; }
.sidebar li a:hover { text-decoration: none; background-color: #666; }
.sidebar li a:hover span { background-color: #666; }
FYI:
Om dit soort dingen te doen [en nog heel veel meer] moet je het css-bestand aanpassen naar je wensen. Beter is het maken van een ‘child theme’.
== == ==
A. begin met het maken van een back-up van je site.
Tip: Gebruik plugin ‘one click childtheme’ om een child theme te maken.
1. installeer ‘one click childtheme’
2. activeer de originele theme
3. Dashboard > weergave > child theme
4. beantwoordt de vragen op het scherm
>> er wordt een child theme aangemaakt map en bestanden zoals style.css;
== == ==
B. 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;
– 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.
== == ==
Lees meer:
http://codex.wordpress.org/nl:WordPress_Lessen
== == ==
