Template tutorial 1.0.x

Afdrukken PDF
Geschreven door Remco op donderdag 02 oktober 2008 18:18, in: Templates (1.0.x)

 Template Tutorial voor Junior Joomlers

Ok, u heeft Joomla! 1.0.x eindelijk min of meer werkend op de server gekregen. Zitten er tussen de honderden gratis templates geen geschikt ontwerp, dan zit er niks anders op: u zult er zelf een moeten maken.
Moeilijk? Niet echt.
U kunt al veel leren, door goed te kijken wat uw 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 u een beetje op weg te helpen, zal ik proberen een prettig leesbare en nuttige TT voor JJ’s te tikken. Het leert u de basis en verwacht dus niet dat u 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 u nodig voor deze TT voor JJ’s? Macromedia Dreamweaver Joomla extension voor DW En uiteraard een draaiende Joomla! Installatie.
Ik ga er vanuit dat u weet hoe u 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 u nodig hebt voor het template.


insertcode

Maak een nieuw php-bestand aan en sla dat 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.


dw tabel

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.

dw merge

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.

dw insert all

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 u zelf instellen in de backend bij de modules, maar dat is voor later.

joomla positie

Ga met uw cursor in de bovenste tabelrij staan.

insert joomlacode
Voeg vervolgens met de Joomla! extension de topcode in. U ziet dan in de codeview een stukje phpcode en een geel phplogootje in desingview in de bovenste tabelcel staan.

insert php zichtbaar

Dit gaan we voor alle cellen herhalen tot dat de code er uitziet zoals hier onder.

alle php code voor joomla 1.0.x template

Zoals u ziet kunt u een hele rits codes invoeren. Naast user1 en user2 kun u ook user3 of user6 invoeren, maar dat moet u 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> Dit e-mailadres is beschermd tegen spambots. U heeft Javascript nodig om het te kunnen zien. </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 en daarna geupload in dezelfde map als de index.php: in het mapje tutje in de templatesmap van Joomla!.
Als u nu naar u admin van Joomla! gaat, zie u als alles goed is gegaan tutje staan bij de templates. Selecteer het rondje ervoor, klik op default en bekijk uw website.
backend


Mooi? Dacht het niet. Daar gaan we nu wat aan doen.

template_css.css


In de CSS-file staat alle opmaakcode van u website. Het voordeel van CSS (cascading style sheets) is, dat u maar een keer iets aan hoeft passen en dat vervolgens alles op alle pagina’s binnen de site aangepast is. Als u 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 u zien welke onderdelen welke classes hebben in Joomla!
Maar u kunt modules ook een eigen suffix meegeven, zodat u die een eigen stijl kan geven.

suffix


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 u niet overweldigen door de hoeveelheid code. Die hebben we voorlopig niet nodig, maar dan staan ze er in ieder geval in voor als u straks met uw 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 u kunt er natuurlijk veel meer toewijzen.
Bekijk uw Joomla!site. Nog erg eenvoudig, maar u ziet nu in ieder geval hoe u met een klein beetje code een basisraamwerk kunt maken.
Vanaf hier kunt u uw site vanaf de grond af aan opbouwen.

Een achtergrond afbeelding toevoegen

Om een afbeelding als achtergrond tegebruiken plaats u deze in image map van uw template. Als voorbeeld heb ik deze header.gif genoemd.
Voeg de volgende twee regels toe bij #header

 background-image:url(../images/header.gif);
background-repeat:no-repeat;

Om de teksten bij de randen weg te 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
voeg toe font-style:italic;


Als het goed is moet u site er ongeveer uitzien zoals hieronder.
template look

Dit zijn slechts een paar kleine voorbeelden wat u met de CSS kunt doen. De mogelijkheden zijn oneindig en het is maar net hoeveel tijd u er in wilt steken. Veel proberen, veel lezen en veel kijken naar andere sites. Kijk hoe sites gemaakt zijn en leer er van!

Succes!

Meer info over css staan en webdesign voor Joomla vind u onder de links: Resources voor Webdesign

 

Donateurs: M.A.E Melis