WHELP! geeft advies over ontwerp, bouw en zoekmachine optimalisatie van je website. Ben je hier voor de eerste keer? Start dan bij het 4-stappenplan voor een eigen website.

Een eigen Joomla template maken (10) – een nieuwe index

In het vorige artikel heb je de basisstructuur van Joomla ingericht voor je eigen website. Nu is het tijd om de index.php te voorzien van een eigen indeling. Mijn bedoeling is dat ik vormgeving van whelp.nl omzet naar een Joomla omgeving.

De nieuwe opzet
Om te beginnen maak ik een schets van de indeling van whelp.nl. Die ziet er ongeveer zo uit:

Indeling whelp.nl

Kort samengevat: Links en rechts een zijkolom. Boven een header (met logo en basistekst), daaronder de navigatie en daaronder 3 onderdelen: Content kolom (met Artikelen), kolom 1 en kolom 2. Tot slot de footer (deze staat niet in de afbeelding, maar is even breed als het logo onderdeel.

Hoe kom ik aan het ontwerp?
De indeling van de site heb ik gemaakt op basis van het 3 Column Relaxation Theme voor WordPress. Een kenmerk aan het ontwerp is dat de middenkolom even breed blijft en de linker- en rechterkolom smaller of breder worden afhankelijk van de breedte van je beeldscherm. Dit heet een fluid ontwerp. Het midden is ongeveer een A4.

De indeling in CSS
De indeling is volledig met DIVs opgebouwd (ik maak dus geen gebruik van tabellen). Voordeel hiervan is dat het eenvoudiger is om het aan te passen.

<!– Start page –>
<div id="page">

<!– Start logo –>
<div id="logo">Logo en omschrijving</div>
<!– End logo –>

<!– Start navigation –>
<div id="navigation">Navigatie</div>
<!– /End navigation –>

<!– Start wrapper –>
<div id="wrapper">

        <!– Start content kolom –>
        <div id="content">Artikelen</div>
        <!– /End content kolom –>

        <!– Start sidebar 1 –>
        <div id="sidebar">Sidebar 1</div>
        <!– /End sidebar 1 –>

        <!– Start sidebar 2 –>
        <div id="sidebar2">Sidebar 2</div>
        <!– /End sidebar 2 –>

</div>
<!– End wrapper –>

<!– Start footer –>
<div id="footer">Footer</div>
<!– /End footer –>

</div>
<!– End page –>

Toelichting
Een paar opmerkingen:
1) Zoals je kunt zien voorzie ik ieder onderdeel van commentaar, ook de afsluitende tags. Het voordeel hiervan is dat je later in de broncode beter kunt zien hoe de code is opgeboud.
2) De hele pagina is ingesloten in de page div. Hiermee kan je (in combinatie met een centreer commendo) de linker en rechter kolom maken.
3) Het middelste gedeelte van de pagina is ingedeeld in een wrapper. Dit concept is nodig om de drie kolommen (content, sidebar 1 en sidebar 2) naast elkaar te laten zien.
4) Binnen de content div komt de hoofdinhoud van de pagina.
5) Ik heb nog geen Joomla code geschreven, deze zal ik later toevoegen.

Het voorlopig resultaat
Het huidig resultaat versie 1 is geraamte met DIVs, maar zonder de juiste indeling. (Voor het gemak heb ik de elementen voorzien van een paar randjes.

De juiste posities geven aan de DIVs
De volgende stap is een stylesheet mee te gaan geven aan de pagina. Vooralsnog doe ik dit door het gewoon in de header van de pagina in te sluiten (dus binnen de head tags).
Voor de body tag en de verschillende DIVs definieer ik het volgende:

body{
        background:#B3EFEF none repeat scroll 0% 50%;
        color:#BFBFBF;
        font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif;
        font-size:11px;
        padding:0pt;
        }

#page{
        margin:0pt auto;
        padding:0pt;
        text-align:left;
        width:920px;
        }

#logo{
        background-color:#FFFFFF;
        border-bottom:1px solid #A8A8A8;
        height:115px;
        margin:0pt 10px;
        text-align:left;
        }

#navigation{
        background:#DA023C none repeat scroll 0%;
        padding:5px 0px 0px 10px;
        border-bottom:1px solid #A8A8A8;
        height:24px;
        margin:0pt 10px;
        text-align:left;
        }

#wrapper{
        float:left;
        margin:0pt;
        padding:0pt;
        }

#content{
        color:#000000;
        float:left;
        left:100px;
        line-height:1.5em;
        margin:0pt 0pt 0pt 5px;
        overflow:hidden;
        padding:0px 20px 0pt 25px;
        text-align:left;
        width:528px;
        }

#sidebar{
        color:#000000;
        float:left;
        font-size:11px;
        margin:5px 5px 5px;
        padding:10px;
        text-align:left;
        width:140px;
        }

#sidebar2{
        color:#444444;
        float:left;
        font-size:11px;
        margin:5px 0pt;
        padding:10px;
        text-align:left;
        width:140px;
        }

#footer{
        clear:both;
        color:#808979;
        font-size:11px;
        height:110px;
        margin:0pt;
        padding:10px 358px 10px 30px;
        }

Dit leidt tot het volgende, voorlopige resultaat versie 2.

Toelichting
Het belangrijkste is dat je met behulp van de commando's width, float en clear de positie van de elementen kunt bepalen.

De achtergrond toevoegen
Tot slot geef ik een achtergrond mee aan de page div.

#page{
        background:transparent url(images/middle.gif) repeat-y scroll center top;
        margin:0pt auto;
        padding:0pt;
        text-align:left;
        width:920px;
        }

Dit zorgt voor de drie kolommen en is nodig omdat je in CSS zeer moeizaam kolommen tot aan de onderkant van de pagina kunt voorzien van een kleur. We zijn nu aan voorlopig eindresultaat versie 3.

Hoe nu verder?
De volgende stap is 1) het stylesheet onder te brengen in een apart document en 2) de content uit Joomla met Joomla eigen code toe te voegen aan de index. Het is mogelijk dat de benaming van de elementen van het stylesheet nog aangepast moeten worden.

 
Vorig artikel in deze serie Volgend artikel in deze serie
Stem / Bookmark [?]Plaatsen/stemmen op NUjijPlaatsen/stemmen op eKudosPlaatsen/stemmen op MSN ReporterPlaatsen/stemmen op DiggVoeg dit artikel toe aan Del.icio.usVoeg toe aan je favorieten op TechnoratiVoeg toe aan je Google bladwijzers

  1. Een eigen Joomla template maken (11) - een nieuwe header - WHELP!
    23.05.07 - 9:47
    1

    [...] het vorige artikel zijn we geëindigd bij een nieuwe Joomla index met DIV elementen. De laatste website zag er nogal summier uit, maar de contouren waren zichtbaar. We gaan de [...]


  2. josephine
    16.06.07 - 20:55
    2

    Hallo!
    Ten eerste: Complimenten voor deze duidelijke artikellen. Maar ik heb een aantal vragen, nu ik zelf aan het proberen ben een template te maken…
    De dingen die u in dit artikel doet, komt dat allemaal in één bestand te staan? Zo ja, wat voor type? php? html? En zo nee, hoe moet ik dit dan doen.

    M.v.g. Josephine


  3. Theo Bakker
    16.06.07 - 22:59
    3

    Beste Josephine,

    dank voor je compliment. Het template is opgebouwd uit php bestanden. Ik heb het template voor je gezipt en bij de downloads gezet zodat je het zelf kunt installeren en inzien.

    Vriendelijke groet, Theo


  4. Cees
    09.08.07 - 11:03
    4

    Duidelijke uitleg, maar vreemd genoeg gaat mijn hele layout naar de kl… als ik bij page het stukje background met de gif opneem in de stylesheet. Doe ik iets fout? Jammer genoeg werkt de downloadlink niet, geeft een 404-fout. Verder prima uitleg, wacht met smart op het vervolg.


  5. Theo Bakker
    09.08.07 - 17:59
    5

    Dag Cees,

    aan het downloadprobleem wordt gewerkt. Zodra dit is opgelost, zal ik kijken naar je probleem.

    Groet, Theo


  6. Cees
    13.08.07 - 9:52
    6

    Theo,
    Het weergaveprobleem bij het opnemen van de gif is opgelost. Was een heel domme typo…..
    Wel bedankt voor je reactie!

    Groet,


  7. Theo Bakker
    18.08.07 - 12:26
    7

    Dag Cees,

    de downloadpagina werkt inmiddels weer. En typo's zijn inderdaad altijd erg lastig. Heb ook wel eens uren zitten turen.

    Groet, Theo


  8. Willem Luijk
    23.11.07 - 14:27
    8

    Theo,

    Schitterend deze tutorial. Wat ik alleen niet werkend krijg is dat die footer meelift met de lengte van content.
    Hoort die footer nou mee te gaan of is IE fixed?
    Er zijn nogal wat ideeen over. Er schijnen zelfs oplossingen te zijn waarbij zowel onderkant content als onderkant zichtbare pagina meespelen. Zo advanced hoeft het van mij niet. Artikelen moeten gewoon voldoende schermvullend zijn met daaronder de footer.


  9. Louis Hissink
    02.01.08 - 17:48
    9

    Theo.
    Ik kan met myeclipse allerlei bestanden maken maar een index.php bestand wil maar net lukken met myeclipse.
    Kan je dit snel en eenvoudig uitleggen?

    Alvast bedankt.


  10. Theo Bakker
    02.01.08 - 20:25
    10

    Dag Louis,

    hiervoor heb ik een php plugin geinstalleerd: zie http://www.PHPEclipse.net.

    Groet, Theo


  11. Kees van Dongen
    24.02.08 - 13:10
    11

    Beste Theo,

    Ben net voor het errst op je site. Wat een ontzettende prettige en duidelijke uitleg. Mijn complimenten.

    Ik zal hier veel te vinden zijn.

    Dank!

    Groeten,
    Kees


  12. Martha Posthumus
    29.06.08 - 16:49
    12

    Hallo Theo,

    Terwijl ik druk bezig ben om met jouw uitleg een template te maken kwam ik een gebroken link tegen, namelijk die van:

    3 Column Relaxation Theme

    Ik ben nog lang niet uitgeleerd, maar ik laat vast nog wel van me horen.
    Alvast bedankt voor je duidelijke uitleg.

    groetjes Martha

Jouw reactie

Spelregels voor commentaar

XHTML: Je kunt de volgende HTML code gebruiken: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Domeinnaam vrij?

  • Test via Byte op .nl, .eu, .be, .com, .net, .org, .biz, .info, .de, .co.uk, .tv, .nu, .cn en .name
Quick Index
Over