9. WordPress: sidebar en kalender opmaken in css en css-referenties

Aangezien de sidebar toch enige uitleg vereist, behandelen we deze in een apart hoofdstuk. De sidebar is zeer belangrijk bij een WordPress website. Het moet duidelijk zijn en opvallen aangezien je navigatie daar in de meeste gevallen zal staan. Als je bezoekers moeilijk door de site kunnen navigeren zullen ze wellicht ook de website verlaten en dat willen we niet.

Ok, aan de slag dan maar! Ga op zoek naar .sidebar{} in style.css en typ daarna:

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

Zoals je reeds hebt geleerd bij het maken van de sidebar, weten we dat er gebruik wordt gemaakt van lijsten. Nu hebben we de lijsten enkele kenmerken meegegeven. Onthou zeker ook dat de lijsten, binnen de lijsten deze opmaak volgen. Laat ons dit even illustreren:

wp-serie-26-sidebar-ul-children

Op de afbeeldingen zie je dat de lijsten tot 2 diep gaan. Nummer 2 zal de stijl volgen van de nummer 1. Dus wat we hierboven hebben bepaald zal ook doorgaan tot lijst nummer 2 die zich in nummer 1 bevindt.

list-style-type: none; – Dit houdt in dat we geen enkel tekentje gaan laten zien. Standaard komt er zo’n lelijke bol tevoorschijn, dit willen we niet.

Elke lijst bevat ook een aantal items (LI). Laat ons daar nu ook wat meer ruimte aan geven door volgende code te typen in style.css :

.sidebar ul li{
padding: 10px 0 10px 0;
}

Boven elk item zal nu erboven en eronder een ruimte liggen van 10 pixels. Véél beter dan daarvoor. Vergeet niet alles tijdig op te slaan en het resultaat te bekijken.

We gaan verder:

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

Herinner je je nog de bepalingen in de sidebar? We hebben daar een class (sidebar) aan toegevoegd. We hebben eerder al een h2 een opmaak gegeven aan de subtitels (h2) van de artikels (deze hadden een class die we ‘post’ hebben genoemd).
Bovenstaande code heeft enkel betrekking tot alle subtitels die voorkomen onder de DIV met als class ‘sidebar’. Handig nietwaar?

We gaan nu een stukje fixen. Onderaan de lijst met pagina’s gaan we te veel ruimte zien, we gaan dit oplossen met volgende code:

.sidebar ul ul li{
padding: 0;
}

Eerder al hebben we uitgelegd dat de tweede lijst (UL) met items (LI) de bepalingen van de eerste lijst volgt. Dit wil zeggen dat daar ook een padding van 10px aan is toegevoegd waardoor we dus uiteindelijk aan een ruimte van 20px komen (2x het sluiten van de LI tag).
Door ‘.sidebar ul ul li’ te gebruiken gaan we twee levels diep en bepalen we dat er voor het tweede level geen padding moet zijn.

Er is nu toch nog een hele grote ruimte tussen de items, vind je niet? Fixen dan maar! Verander de code zodat deze er als volgt uitziet:

.sidebar ul ul li{
line-height: 24px;
padding: 0;
}

De kalender opmaken in css

Wie graag de kalender behoudt op zijn website, merkt misschien op dat het niet helemaal past. Ook de kalender kan je naar eigen voorkeuren aanpassen. Bekijk in de broncode welke codes er automatisch werden doorgevoerd door WordPress:

wp-serie-27-sidebar-kalender

Je kan volgende zaken opmerken:

  • Het bevindt zich in een lijstitem met als ID ‘calender’
  • Het bestaat uit een tabel met als ID ‘wp-calender’

Een tabel is nieuw in onze serie, we hebben dat nog niet tegengekomen dus wil je wellicht wel graag weten hoe we dit kunnen veranderen in ons css bestandje:

table#wp-calendar{
width: 100%;
}

Het ziet er allemaal simpel uit: we plaatsen de tekst ‘table’ voor de bepaling van de ID en klaar is kees. Dan bepalen we dat de breedte 100% moet zijn. De kalender zal zich niet verspreiden over het hele scherm, maar zich beperken tot de breedte van de sidebar DIV.

Extra informatie

Lijsten met hun items kunnen zeer diepgaand gecodeerd worden. Momenteel hebben we gebruikt:

.sidebar ul{
.sidebar ul li{
.sidebar ul ul li{

Maar daar stopt het niet bij. Veel navigaties zijn opgebouwd uit complexe lijsten (ook onze navigatie bestaat uit lijsten) en daar moet je soms tot diepe niveaus gaan om alles er goed uit te laten zien, bijvoorbeeld:
.sidebar li ul{
.sidebar ul li ul li{
#div.sidebar ul { specifiek bepalen van opmaak binnen een DIV
.sidebar ul.class{ specifiek bepalen van opmaak met een class
#div.sidebar ul.class{ specifiek bepalen van opmaak binnen een div en met een class
… er zijn dus tal van mogelijkheden om lijsten te gaan verwerken. Het wordt er alleen maar moeilijker op!

Referenties:

Zoals beloofd geven we ook enkele referenties mee waar je meer kunt leren over css:
CSS linkpagina
W3schools handleiding css
Schitterende referentiesite door een gepassioneerde designer
Showcase met navigatietechnieken
pixel2life site met tutorials
WordPress linkoverzicht

In een volgend hoofdstuk gaan we verder met de algemene opdeling van de pagina’s. We gaan ook extra pagina’s aanmaken die we toch nodig gaan hebben als we een mooie website willen maken. We hebben het dan vooral over:
• De opdeling van header, footer, sidebar en index;
• Het aanmaken van sub-template bestanden: archieven, single pagina, template pagina’s;
• Het maken en stylen van de reactie pagina’s

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close