Stap 3. Pas de Blank Template bestanden aan

Nadat u het "Blank_Template_Joomla1.5.zip" heeft gedownload pakt u het bestand uit in een lege map, waardoor de volgende bestandstructuur ontstaat. Voor de Blank_Template_Joomla-1.6-1.7-2.5.zip ziet de mappenstructuur er hetzelfde uit met een andere naam voor de hoofdmap "Blank_Template_Joomla-1.6-1.7-2.5".

1. Kopiëer uw afbeeldingen van uw html model  naar uw images map van uw blank template

Voor het html model heeft u afbeeldingen gemaakt en opgeslagen in uw images map. Deze afbeeldingen kunt u nu kopiëren naar uw blank template images map. Ook als u andere nieuwe bestanden heeft aangemaakt, zoals het htc script (zie submenus) kunt u deze kopiëren naar uw blank template map.

2. Wijzig de naam van de hoofdmap

Wijzig de naam van de hoofdmap (BlankJoomlaTemplate1.5) in de naam van uw keuze van uw template. In dit voorbeeld noemen wij de map "templatetutorial_1.5".

3. Wijzig het templateDetails.xml bestand

Het templateDetails.xml is het installatiebestand voor uw template. Het bestand ziet er ongewijzigd als volgt uit.

Joomla 1.5 templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
	<name>Blank JoomlaTemplate1.5</name>
	<creationDate>14-02-2011</creationDate>
	<author>Joomla CSS</author>
	<copyright>Joomla CSS</copyright>
	<authorEmail>info@joomla-css.nl</authorEmail>
	<authorUrl>http://www.joomla-css.nl</authorUrl>
	<version>1.0</version>
	<description>Blank Template voor Joomla 1.5</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>css/template.css</filename>
	</files>
	<positions>
		<position>top</position>
		<position>left</position>
		<position>footer</position>
	</positions>
</install>

Joomla 1.6 of later templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="1.6" type="template">
	<name>Blank_Template_Joomla-1.6-1.7-2.5</name>
	<creationDate>03-03-2012</creationDate>
	<author>Joomla CSS</author>
	<copyright>Joomla CSS</copyright>
	<authorEmail>info@joomla-css.nl</authorEmail>
	<authorUrl>http://www.joomla-css.nl</authorUrl>
	<version>1.0</version>
	<description>Blanko Template Joomla 1.6 / 1.7 / 2.5</description>
	<files>
		<folder>css</folder>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
	</files>
	<positions>
		<position>top</position>
		<position>left</position>
		<position>footer</position>
	</positions>
</extension>

Wijzig achtereenvolgens de volgende gegevens.

<name>

Wijzig de naam van "BlankJoomlaTemplate1.5" in de naam van uw template. Houdt de exacte naam aan van de template hoofdmap. In ons voorbeeld is dat "templatetutorial_1.5".

<creationDate>

Huidige datum

<author>

Vul hier uw naam of bedrijfsnaam in.

<copyright>

Wie het copyright heeft.

<authorEmail>

Uw E-mail adres

<version>

Het versienummer van de template

<description>

De omschrijving van de template.

<files> <filename>

Dit is een overzicht van de bestanden die zullen worden geïnstalleerd. De basis bestanden staan hier al in. Maar er kunnen bestanden bijkomen. In ons voobeeld hebben we het model uitgebreid met afbeeldingen in de imagemap. Deze bestanden gaan we hier benoemen inclusief het pad naar de images map.  Voor Joomla 1.6 worden voor bestanden in de sub mappen alleen de map vermeld. Alle bestanden in die map zullen dan worden geïnstalleerd.

Joomla 1.5

<files>
	<filename>index.php</filename>
	<filename>templateDetails.xml</filename>
	<filename>template_thumbnail.png</filename>
	<filename>css/template.css</filename>
	<filename>images/bg_body.jpg</filename>
	<filename>images/footer.png</filename>
	<filename>images/footer_IE6.png</filename>
	<filename>images/header.png</filename>
	<filename>images/header_IE6.png</filename>
	<filename>images/main.png</filename>
	<filename>images/main_IE6.png</filename>
</files>

Joomla 1.6 of later

<files>
	<folder>css</folder>
	<folder>images</folder>
	<filename>index.php</filename>
	<filename>template_preview.png</filename>
	<filename>template_thumbnail.png</filename>
	<filename>templateDetails.xml</filename>
</files>

<positions>

Hier benoemt u alle template posities die u in uw website gaat gebruiken. De paats van de posities worden bepaald door het index.php bestand, dat we hierna gaan behandelen. Voor ons voorbeeld is 3 posities voldoende. U kunt hier net zo veel posities opgeven als u wilt met namen die u zelf heeft bedacht. De namen van de posities moeten wel exact overeenstemmen met de code in uw index.php bestand.

De mappenstructuur ziet er na aanpassing als volgt uit.

4. Wijzig het index.php bestand

Open het index.php bestand met uw kladblok. Ongewijzigd ziet dit er als volgt uit.

Joomla 1.5

<?php defined( "_JEXEC" ) or die( "Restricted access" ); ?>
<!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" 
xml:lang="<?php echo $this->language; ?>"  
dir="<?php echo $this->direction; ?>" >

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" 
	href="<?php echo $this->baseurl ?>/templates/system/css/system.css" 
	type="text/css" />
	<link rel="stylesheet" 
	href="<?php echo $this->baseurl ?>/templates/system/css/general.css" 
	type="text/css" />
	<link rel="stylesheet" 
	href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" 
	type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="header">
		<div id="top">
			<jdoc:include type="modules" name="top" style="xhtml" />
		</div><!--top-->
	</div><!--header-->

	<div id="main">

		<div id="left">
			<jdoc:include type="modules" name="left" style="xhtml" />
		</div><!--left-->

		<div id="content">
			<jdoc:include type="message" />
			<jdoc:include type="component" />
		</div><!--content-->

	</div><!--main-->

	<div id="footer">
			<jdoc:include type="modules" name="footer" style="xhtml" />
	</div><!--footer-->

</div><!--wrapper-->

<div id="blanc"></div><!--blanc-->

</body>

</html>

Joomla 1.6 of later

<?php defined('_JEXEC') or die; ?>
<!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" xml:lang="<?php echo $this->language; ?>" 
dir="<?php echo $this->direction; ?>" >

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="header">
		<div id="top">
			<jdoc:include type="modules" name="top" style="xhtml" />
		</div><!--top-->
	</div><!--header-->

	<div id="main">

		<div id="left">
			<jdoc:include type="modules" name="left" style="xhtml" />
		</div><!--left-->

		<div id="content">
			<jdoc:include type="message" />
			<jdoc:include type="component" />
		</div><!--content-->

	</div><!--main-->

	<div id="footer">
			<jdoc:include type="modules" name="footer" style="xhtml" />
	</div><!--footer-->

</div><!--wrapper-->

<div id="blanc"></div><!--blanc-->

</body>

</html>

De structuur van dit bestand is al voorbereid. Het enige dat u hoeft aan te passen is wat zich bevindt tussen de <body> tags.

Het index.php bestand voor Joomla 1.6 of later wijkt af van de 1.5 versie, echter niet tussen de <body> tags.

Neem alleen de html structuur van uw model over dat tussen de <body> tags staat, als dit afwijkt van de structuur van de index.php bestand van uw gedownloade blank template en plaats de posities.

Wat is de joomla code voor een positie?

De algemene code voor het plaatsen van een positie is:

<jdoc:include type="type-parameter" name="name-parameter" style="style-parameter" />

Type parameters

type="head", "component", "modules" of "message".

De <jdoc:include type="head" /> staat al in het index.php bestand en laadt alle Joomla gegevens die in de <head> sectie terecht komen, zoals de meta gegevens, title, scripts etc.

De "component" parameter wordt gebruikt voor het tonen van alle artikelen / content.

Deze code is zonder andere parameters: <jdoc:include type="component" />.

De "modules" parameter wordt gebruikt voor het tonen van de modules.

De "message" parameter is belangrijk om in uw template op te nemen. In de blanc template, die u van deze site kan downloaden, is deze ook opgenomen. Deze parameter zorgt ervoor dat gebruikers systeem berichten kunnen zien, bijvoorbeeld als gebruikers zich op uw website registreren. Na het registratieproces wordt dan gemeld dat er een email is toegezonden met een link om het registratieproces te voltooien. Dergelijke berichten ziet de gebruiker niet, als deze parameter niet in uw template is opgenomen.

<jdoc:include type="message" />

Name parameter

name="neem de exacte naam over van de positie uit het templateDetails.xlm bestand"

Deze parameter wordt alleen gebruikt bij modules. In uw xml bestand heeft u posities een naam gegeven. Deze namen worden hier exact overgenomen.

Style parameters

style="xhtml", "rounded" of "raw"

Er zijn nog meer style parameters, die we hier verder niet bespreken. U wordt aangeraden om bij modules zoveel mogelijk de parameter xhtml te gebruiken. Wanneer u meer wilt weten over de style parameter verwijzen wij u naar de documentatie van Joomla.

xhtml

Bij deze stijl wordt er om de module een <div> geplaatst (div.moduletable_suffix).

rounded

Bij deze stijl wordt er een structuur van 5 divs geplaatst om de module. Deze stijl wordt hier niet verder behandeld.

raw

Bij deze stijl wordt er geen HTML code om de module geplaatst.

Plaats de module posities

In het blank template bestand zijn er 3 posities voor modules reeds benoemd.

<div id="top"><jdoc:include type="modules" name="top" style="xhtml" /></div>

<div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>

<div id="footer"><jdoc:include type="modules" name="footer" style="xhtml" /></div>

Wanneer u meer posities heeft benoemd vult u deze aan in de betreffende div's of tables.

Plaats de component positie

In deze positie wordt de content geplaatst. In het blank template bestand is deze geplaatst in de div met id content.

<div id="content"><jdoc:include type="component" /><div>

Deze code kunt u maar één keer plaatsen.

Wanneer u alle posities hebt aangegeven met de Joomla code in uw index.php bestand slaat u deze op en is uw template gereed voor installatie.

• Toevoegen

Reacties (1)

• 1901-12-13 20:45:52 |Unregistered| antoon
  Misschien een overbodige opmerking, maar de namen van de div's in het template voorbeeld (gezipt 1.5) in index.php en templateDetails.xml komen niet overeen met de namen in het bijgevoegde template.css bestand. CSS bevat bv. div#top_container waar moet staan div#top.
  Afgezien daarvan, nog steeds een voortreffelijk voorbeeld: geen overbodige details zoals je in boeken over template ontwerpen ziet.
  Antwoorden

Post een commentaar of stel een vraag

Uw contact gegevens:

Naam:

Email: Stuur mij GEEN E-mail bericht bij een reactieHoud mij op de hoogte bij een reactie reactie

Website:

Reacties:

Onderwerp:

Commentaar of vraag:

Spam beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by Compojoom comment 4.2.1