Joomla Template upgrade (9) – het basistemplate aanpassen (3)

Nu we het Plankenkoor template hebben omgezet naar DIVs moeten we het stylesheet nog zo aanpassen, dat de elementen ook goed ten opzichte van elkaar gepositioneerd worden. Ze staan nu nog onder elkaar. Een onmisbare plugin bij zo'n karwei is Firebug voor Firefox. Daarmee kan je heel eenvoudig bestaande stijlen bekijken en een beetje aanpassen. Als je tevreden bent dan sla je het op in je echte stylesheet.

De header aanpassen
We beginnen door de stylesheets van het beez templates in te sluiten. Pas daarvoor de header aan.

Er zijn vier stylesheets bijgekomen: 1) template.css, 2) position.css, 3) ieonly.css en 4) ie7only.css. Position.css bepaalt de positie van de verschillende divs op het scherm; ieonly.css en ie7only.css zijn 'patches' voor Internet Explorer. Door de notaties [if lte IE 6] en [if IE 7] worden deze stylesheets alleen ingesloten als aan deze voorwaarden wordt voldaan. (De term 'lte' staat voor lesser then or equal, dus als iets versie IE 6 is of lager.)

Het stylesheet aanpassen: position.css
Bij de aanpassing van het stylesheet werken we van algemeen naar steeds specifieker en van boven naar onder. Van lieverlee doemt de nieuwe pagina-indeling op.
1) de kleur van de body passen we aan naar #FFF (wit).

2) #all passen we zo aan dat zowel links als rechts een bruin streepje gezet worden (de randen van de pagina), de breedte gelijk is aan 832px en de achtergrondafbeelding de gele nerf wordt.

3) De #header maken we eenvoudiger. Alle overbodige zaken halen we eruit: randen, achtergrond en uitlijning van de tekst.

4) Nu passen we #logo en #logo img aan: de ondermarge passen we aan (zodat de afbeelding Plankenkoor net boven de navigatie vrij komt te staan, de achtergrondkleur maken we rood, en we zetten de afbeelding gecentreerd in het midden (met text-align: center en display: inline).

Het begint al ergens op te lijken:

De volgende stap is nu de navigatie (#left) en de nieuwsartikelen (#main, #wrapper en #contentarea) goed te zetten.

5) We beginnen met #left. We zorgen ervoor dat de navigatie voldoende breedte heeft en ruimte aan de zijkanten. Achtergrondkleur en randkleuren halen we weg, want de 'nerf' moet juist overal te zien zijn.

6) De #wrapper passen we ook even aan: de linker-margin moet gelijk zijn aan het linkerpaneel (#left). De wrapper omvat de inhoud van de pagina naast de navigatie.

7) Binnen het nieuwsartikelen gedeelte halen we bij #main de achtergrondkleur weg (aangezien ook hier de nerf naar voren moet komen). De padding boven wordt iets kleiner (van 25px naar 24px).

8) De #contentarea geven we wat meer padding aan de onderkant.

9) De #wrap laten we ongewijzigd. Dit element zorgt ervoor dat onderaan een element de flow van de pagina 'gereset' worden. Dit is onder andere belangrijk voor de footer van de pagina.

Tot slot
Nu hoeven nog maar één ding te doen: namelijke alle overbodige verwijzingen te verwijderen, aangezien het beez template wel wa complexer was. Hiermee houden we een vrij eenvoudig stylesheet over (download position.css).

Het voorlopig eindresultaat is nu als volgt:

Hoe nu verder?
Wat nog oude stijl is zijn het insluiten van de verschillende bestanden in de index en de randen van de losse elementen in de pagina (de 'pods'). Dit gaan we in het volgende artikel oppakken.

Stem / Bookmark [?]