Step 3: Adjust the content of the blank Template files

  • Print

After you downloaded the "Blank_Template_Joomla1.5.zip" file, unzip it to an empty folder on your harddrive. You will see the following file structure (File structure for 1.5 is simular to 1.6/1.7, except the name of the main folder = Blank_Template_Joomla1.6-1.7).

 

Bestandstructuur

 

1. Copy your images from your html model to your images template folder of your blank template

The images you created or collected are saved in your images folder of your model image files. You can copy all images to your local template images folder. If you have more folders and files in your model, like scripts etc. can copy them too.

 

2. Change the name of the main folder

Rename the main folder (Blank_Template_Joomla1.5 or 1.6/1.7) to the name of your template. Don't use spaces in the name. For the example website we renamed the folder to "templatetutorial_1.5".

 

3. Change the contents of your templateDetails.xml file

The templateDetails.xml is a file needed for Joomla template installation and configuration. The file has the following contents.

 

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>

 

The xml file for Joomla 1.6 / 1.7 is different on just one code line. After the first code line, there is a Doctype line added.

 

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

 

This code line is allready added in the blank template for Joomla 1.6.

 

Change the following in the xml file with your Notepad.

 

<name>

Change the name "Blank_Template_Joomla1.5" in the name of your template. You must use exactly the same name as your main folder template name. In the example website this name is "templatetutorial_1.5".

 

<creationDate>

The date the template was created.

 

<author>

Your name.

 

<copyright>

The copyright owner of the template.

 

<authorEmail>

Your E-mail address

 

<version>

The version number of the template

 

<description>

The description of the template

 

<files> <filename>

You have to name all the files that are part of the template here. The files from the blank template are already in the code lines. For our example website we have added all the image files. Don't forget to name the path to the files.

 

<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>

 

<positions>

In this area you name all the positions you want on your template. In our example website we have 3 positons. But you can have more positions with other namens. In the index.php file we have to asign these positions to div's or tables.

 

For the example website we don't have to add or change the positons. After changing all code the contents of the file looks like this.

 

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
	<name>templatetutorial_1.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>Template for Joomla CSS, Joomla version 1.5</description>
	<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>
	<positions>
		<position>top</position>
		<position>left</position>
		<position>footer</position>
	</positions>
</install>

 

The new file structure looks like the following.

 

Bestandstructuur

 

4. Change the index.php file

Open the index.php file with your Notepad. The original file looks like the following.

 

<?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; ?>" 
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="/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>

 

The only thing you have to do is to change the part between the <body> tags.

Only the <head> section of the index.php file for Joomla 1.6 is different than for 1.5 versie.

Copy only the html code from your model to the index.php file. Leave all the head and doctype information in your index.php file unchanged.

 

What joomla code do we use for assigning a position in the index.php file?

The general code for a position is:

 

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

 

Type parameters

type="head" or "component" or "modules" or "message".

The "head" parameter is used for loading all the meta data, title, scripts etc. and is already in your <head> section of the index.php file. <jdoc:include type="head" />

 

The "component" parameter is used for all articles / content. This code is with no other parameters: <jdoc:include type="component" />.

 

The "modules" parameter is used for modules only.

 

The "message" parameter is important to include in your template. This element is already included in  the blanc template, that you can download from this site. This element renders system and error messages for a user. For example when users register on your site. After registration a message displays on screen, that an email has been send to the user with an activation link to comlete the registration. The user will not see that message if this element is not included in your template.

<jdoc:include type=message/>

 

Name parameter

name="the exact name of the position from the templateDetails.xlm file".

This parameter is only used for modules. In your xml file you have named positions. These exact name you have to use here.

 

Style parameters

style="xhtml", "rounded" or "raw".

There are other style parameters than the 3 styles mentioned above. We don't discuss them here, because usually you don't need them. We advice you to only use "xhtml" parameter here, unless you know what you are doing.

 

xhtml

This parameter will add a <div> (div.moduletable) around the module.

 

rounded

This style will add a stucture of 4 div's around the module. We don't discuss this style here.

 

raw

No divs or other html is added with this style to the module output.

 

Place the module positions

In the blank template file there are already 3 positions added for modules.

<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>

You can add the positions on other div's of change the existing ones.

 

Place the component position

This is the positon for the content articles.

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

You can only use this position once in your index.php file.

 

When you have finished adding your positions code, save the file. Now you are ready to install the template in Joomla.


Post a comment or ask a question!

1000 Characters left

Antispam Refresh image Case insensitive