Template tutorial
Inhoud |
Template Tutorial voor Junior Joomlers
Ok, je hebt Joomla! eindelijk min of meer werkend op je server gekregen. Zit er tussen de honderden gratis templates geen geschikt ontwerp, dan zit er niks anders op: je zult er zelf een moeten maken.
Moeilijk? Niet echt.
Je kunt al veel leren, door goed te kijken wat je collega’s hebben gemaakt en door te kijken HOE ze het gedaan hebben. Dat betekent verschillende templates installeren en de codes ontleden. Dingen veranderen en kijken wat er gebeurt.
Maar dan nog, een beetje hulp kan nooit kwaad. Om je een beetje op weg te helpen, zal ik proberen een prettig leesbare en nuttige TT voor JJ’s te tikken. Het leert je de basis en verwacht dus niet dat je hierna een templatekoning bent. Ik ga uit van een eenvoudig drie kolomstemplate op basis van een tabel.
Veel plezier met lezen en vooral veel plezier met bouwen, want daar gaat het uiteindelijk om!
Wat heb je nodig voor deze TT voor JJ’s? Macromedia Dreamweaver Joomla extension voor DW En uiteraard een draaiende Joomla! Installatie.
Ik ga er vanuit dat je weet hoe je deze zaken moet installeren, om deze tutorial te beperken tot het maken van een eenvoudig template voor Joomla!.
Komt ie dan.
De index.php
Maak een nieuwe map aan in de templatemap van Joomla!. Die noemen we even tutje. In die map komt een mapje css en een mapje images.
Open Dreamweaver.
Onder het tablad insert staat onderin joomlasolutions.com 1.0 en alle stukjes phpcode die je nodig hebt voor het template.
Maak een nieuw php-bestand aan en sla hem op in tutje als index.php.
Verwijder alle code boven de </head> tag en klik Insert -> Insert Head Code. Hier staat de basiscode om het template aan Joomla! te koppelen.
De code moet er nu zo uit zien.
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?> </head> <body> </body> </html>
Zorg dat de viewmode van DW op split staat en klik in het onderste scherm. Druk op Alt+Ctrl+T om een tabel te maken. En vul de waarden in zoals hieronder.
Selecteer de bovenste drie kollomen en druk Alt+Ctrl+M om een kollom van de bovenste rij te maken.
Doe het zelfde voor rij 2 en rij 3 en rij 5.
Ok, Nu gaan we wat waarden aan de tabel toevoegen zodat het er een beetje uit gaat zien en om straks CSS aan de tabellen te kunnen koppelen.
Om er voor te zorgen dat de tabel netjes in het midden van site blijft hangen, geven we de tabel de eigenschap align=”center”. Om zometeen de cellen op te kunnen maken geven we de cellen een eigen id. We geven de cellen met id left en right een breedte van 160. De modulen in de zijkolommen en de content in de mainkolom moeten netjes boven in de cellen beginnen. Dat doen we met de eigenschap valign (vertical align), die de waarde top krijgt.
Joomlacode invoegen
Nu gaan we de stukjes code invoegen zodat Joomla! straks weet waar het de content, menu’s en modules moet zetten. Dit kun je zelf instellen in de backend bij de modules, maar dat is voor later.
Ga je met je cursor in de bovenste tabelrij staan.
Voeg vervolgens met de Joomla! extension de topcode in. Je ziet dan in de codeview een stukje phpcode en een geel phplogootje in desingview in de bovenste tabelcel staan.
Dit gaan we voor alle cellen herhalen tot dat de code er uitziet zoals hier onder.
Zoals je ziet kun je een hele rits codes invoeren. Naast user1 en user2 kun je ook user3 of user6 invoeren, maar dat moet je dan even met de hand veranderen. Ik zeg er nog maar even bij, dat dit een manier is en zeker niet de enige of de beste. Maar het werkt in ieder geval.
templateDetails.xml
Ok, het raamwerk is nu klaar, en willen we even zien hoe het er tot nu toe uit ziet Daarvoor is wel eerst een templateDetails.xml voor nodig, zodat Joomla! ook kan zien dat er een template tutje aanwezig is. De XML-file is een beschrijving van het template. Deze file is ook nodig om de template op een andere template te kunnen installeren.
Kijk maar even naar de code hieronder. De namen van de tags spreken denk ik voor zich.
<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.0.0"> <name>tutje</name> <creationDate>02/02/06</creationDate> <author>Marvanni</author> <copyright>GNU/GPL</copyright> <authorEmail>info@jouwemail.nl</authorEmail> <authorUrl>www.jouwsite.nl</authorUrl> <version>0.1</version> <description>Dit is een Template Tutorial voor Junior Joomlers</description> <files> <filename>index.php</filename> </files> <images> <filename></filename> </images> <css> <filename>css/template_css.css</filename> </css> </mosinstall>
De eerste regel geeft aan wat voor bestand het is, namelijk een XML-bestand
<mosinstall> geeft aan dat het een installatiefile voor een template is.
De tags <name> tot en met <description> worden gebruikt voor de beschrijving van de template.
De tags <files> tot en met <css> geven aan welke bestanden er in de template zitten.
Tot nu toe hebben we alleen een index.php. De plaatjes komen later en de CSS-file gaan we nu maken. We vullen hem al wel vast in. De CSS-file komt in de map css, dus moet er staan: css/template_css.css.
Maak een XML-bestand aan in DW, verwijder de code die wordt aangemaakt door DW en copy-paste de code hierboven in het bestand. Vervolgens wordt deze opgeslagen in dezelfde map als de index.php: in het mapje tutje in de templatesmap van Joomla!.
Als je nu naar je admin van Joomla! gaat, zie je als alles goed is gegaan tutje staan bij de templates. Selecteer het rondje ervoor, klik op default en bekijk je pagina.
Mooi? Dacht het niet. Daar gaan we nu wat aan doen.
template_css.css
In de CSS-file staat alle opmaakcode van je website. Het voordeel van CSS (cascading style sheets) is, dat je maar een keer iets aan hoeft passen en dat vervolgens alles op alle pagina’s binnen de site aangepast is. Als je eenmaal hebt bepaald dat het lettertype voor standaard tekst Arial moet zijn, alle tekst binnen Joomla! er ook uit ziet als Arial.
Binnen Joomla! hebben een boel onderdelen al een CSS-class.
Hier kun je zien welke onderdelen welke classes hebben in Joomla!
Maar je kunt modules ook een eigen suffix meegeven, zodat je die een eigen stijl kan geven.
table.moduletable in de CSS-file wordt dan table.moduletable_main
Maar dat is voor later.
Ok dan, die technische onzin hebben we wel even gezien. Nu gaan we de tabel een beetje meer smoel geven. Download deze CSS-file en zet hem in de map templates/tutje/css en noem het bestand template_css.css. In de file staan al een hele rits css-codes. Ik heb even een willekeurige CSS-file gepakt, maar laat je niet overweldigen door de hoeveelheid code. Die hebben we voorlopig niet nodig, maar dan staan ze er in ieder geval in voor als je straks met je template kunt gaan spelen.
Classes worden in de CSS aangeroepen met een punt . , id’s worden aangeroepen met een hekje #.
De tabel opmaken
We hebben alle cellen een id meegegeven en die gaan we nu in de CSS-file zetten. Plak onderstaande code op regel 7 van template_css.css onder de tags van BODY.
#header{
height:100px;
background-color:#0066CC;
border:1px solid #000000;
}
#topmenu{
height:20px;
background-color:#666666;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
#path{
height:;
background-color: #0099FF;
border:1px solid #000000;
}
#left{
height:500px; /* voor een minimale hoogte van de tabel. */
background-color:#666666;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
#main{
height: ; /* niet nodig, want die is bij #left al ingevuld, en de deze tabel blijft even lang als #left. */
background-color:#ffffff;
border: ; /*niet nodig want, #left en #right hebben al een border */
}
#right{
height:; /* niet nodig, want die is bij #left al ingevuld, en de deze tabel blijft even lang als #left. */
background-color:#666666;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
#footer{
height:;
background-color: #0066CC;
border: 1px solid #000000;
}
#idnaam geeft aan voor welke id in de index.php de codes geldt. Tussen de {} staan de eigenschappen van de id, en tussen de : en de ; staan de waarden van de eigenschappen.
Ik heb even drie eigenschappen uitgekozen die nu van belang zijn, maar je kunt er natuurlijk veel meer toewijzen.
Bekijk je Joomla!site. Nog erg eenvoudig, maar je ziet nu in ieder geval hoe je met een klein beetje code een basisraamwerk kunt maken.
Vanaf hier kun je site vanaf de grond af aan opbouwen.
Een paar kleine aanpassingen
Een achtergrond afbeelding toevoegen
Download deze afbeelding en plaats het in je image map van je template en noem hem Header.gif
Voeg de volgende twee regels toe bij #header
background-image:url(../images/header.gif); background-repeat:no-repeat;
Maincontent van bij de randen weg houden
Voeg de volgende regel toe bij #main
padding: 10px;
Kleur van de titels veranderen
Druk Ctrl-F en zoek naar contentheading
Bij .contentheading, .componentheading verander: De kleur in #0066CC Fontsize in 20px
En voeg de volgende regel toe:
font-style:italic;
Als het goed is moet je site er ongeveer uitzien zoals hieronder.
Dit zijn slechts een paar kleine voorbeelden wat je met de CSS kan doen. De mogelijkheden zijn oneindig en het is maar net hoeveel tijd je er in wilt steken. Veel proberen, veel lezen en veel kijken naar andere sites. Kijk hoe sites gemaakt zijn en leer er van!
Hier onder een aantal sites, waar je nuttige informatie kan vinden over CSS en Joomla! templates.
Succes!
Wel in het Engels, maar met een aantal heel goede artikelen.
Voor koppen met eens een ander lettertype dan Arial of Verdana?
