Joomla! 1.5 Template Tutorial


Article Index

In this tutorial you will learn how to make a very simple template for Joomla! 1.5, however many HTML and CSS details have been left out. If you wish to understand/learn HTML and CSS more in depth I would suggest a search in Google for HTML and CSS Tutorials where you will find countless amounts of resources.


The Text Editor
This tutorial is only for templates used in Joomla! versions 1.5 and up. You can use any text editor you like such as DreamWeaver or FrontPage. I use 1stPage 2000 and have been using it forever and it's Open Source (Free). But, I must warn you that this editor is not a WYSIWYG (What You See Is What You Get) text editor and prior HTML and CSS knowledge is required in order to make a functional template with this editor.



The Begining


Creation of Template Folders and Files
Create a folder and name it simple. This will also be the name of our template.

Open the newly made simple folder, and create two aditional folders inside that one - one, we'll name css and the other one we will name images, these two new folders are all named in lower case letters.

The css folder will store the css file and the images folder is used for storing all the images needed in the template, but for this tutorial we are not going to use any images, therefore it will remain empty.

Ok, let's begin - With our text editor we open a blank page and we save it in our simple folder as index.php. We then open another blank page and we save this one in the css folder as template.css.


Template Details

In the Template Details we add personal details like the template's version, name, date, author, website, email, copyright, license etc. You do not have to include this in your css if you don't want. I do it to keep things organized to know what template exactly I'm working on.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/


Inside the <head></head> tags goes the following code, used for searchengine friendly.
<jdoc:include type="head" />

And also inside the <head></head> tags goes the CSS Code
This code seeks out the CSS (Cascading Style Sheet) necessary for the template's display.

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Our template's index.php header should now look like the following screen.
We Copy in the template's index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>



Template Layout

Template CSS - Details

The Template Details are set up to include our own details. This is where you write your own information. These details are hidden and only seen inside the CSS and it's not a requirement, you don't need to include this in the CSS file, although a good thing to have so you can quicky identify the CSS.

Below we Copy and Paste in the template.css file.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/



We then add the following important classes, seen below, which gives us an overall font family, size and color. These classes are placed directly underneath the personal details as seen below.

Copy in the template.css file.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}


The <body> and </html> tags
Below we now add the <body> </body> and the </html> tags.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
</body>
</html>


Main Container

The Main Container made with div tags will wrap the entire layout giving us control over the margin and/or padding for a perfect proportion around the entire template.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
</div>

</body>
</html>


Main Container CSS

We now add the Main Container classes.

Copy in our template_css.css file.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}



The Header

The Header is where we usually place the main site logo.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

</div>

</body>
</html>


Header CSS

We now add the Header classes as seen below.

Copy in our template_css.css file.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}


Main Content

The Main Content consists of a 3 Column Table.

The Left Column, The Center Column, The Right Column.

We add this 3 Column Table as seen below.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
</td>
<td width="100%">
Center Column Content
</td>
<td width="150">
Right Column Content
</td>
</tr>
</table>

</div>

</body>
</html>



The footer

The footer is exactly what it says, it's the foot of the template located... well... you guessed it, at the bottom and it is where you add your copyright information.
So, we need to add the Footer with div tags.

Copy in the index.php file.


<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
</td>
<td width="100%">
Center Column Content
</td>
<td width="150">
Right Column Content
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>


Footer CSS

We now add the Footer classes.

Copy in our template_css.css file.


/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}



Joomla! Code

The following lines of code are necessary for the function of Joomla! in your template. They are necessary for the content display and they are placed in our index.php file.

On the left hand side you have a brief description and on the right side you have the code.

Breadcrumb Also known as Pathway...................... <jdoc:include type="modules" name="breadcrumb" />

Left Content
................. <jdoc:include type="modules" name="left" style="table" />

Center Content
............... <jdoc:include type="component" />

Right Content
................ <jdoc:include type="modules" name="right" style="table" />

Footer
................ Copyright © <?php echo date("Y"); ?> <?php echo $mainframe->getCfg('sitename'); ?> - All Rights Reserved.

Breadcrumb

We will start with the Breadcrumb first. The Breadcrumb, also know as pathway, is made up of small links usually placed towards the top of the page mapping out the current postion the user is in. Like a map that tells you where you're at in the site.

We will place the Breadcrumb in the center column of our main content table.

See below, copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
</td>
<td width="100%">
Center Column Content
<jdoc:include type="modules" name="breadcrumb" />
</td>
<td width="150">
Right Column Content
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>


Breadcrumb CSS


Now we add the Breadcrumb classes.

Copy in the template.css file.

/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}

/********** Breadcrumbs **********/
.breadcrumbs {
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 9px;
padding : 0px;
}
a.breadcrumbs:link, a.breadcrumbs:visited {
color : #000000;
font-weight : normal;
}
a.breadcrumbs:hover {
color : #3366cc;
font-weight : normal;
text-decoration : none;
}



Joomla! Code - Left Content

The <jdoc:include type="modules" name="left" style="table" /> code gives us the left content, therefore must be placed in the left column of our main content table.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
<jdoc:include type="modules" name="left" style="table" />
</td>
<td width="100%">
Center Column Content
<jdoc:include type="modules" name="breadcrumb" />
</td>
<td width="150">
Right Column Content
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>


Joomla! Code - Main Body


The <jdoc:include type="component" /> code gives us the mainbody or center content and must be placed in the center column of our main content table and underneath the <jdoc:include type="modules" name="breadcrumb" /> code.

We Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
<jdoc:include type="modules" name="left" style="table" />
</td>
<td width="100%">
Center Column Content
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="component" />
</td>
<td width="150">
Right Column Content
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>


Joomla! Code - Right Content


The <jdoc:include type="modules" name="right" style="table" /> code gives us the right content, therefore must be placed in the right column of our main content table.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
<jdoc:include type="modules" name="left" style="table" />
</td>
<td width="100%">
Center Column Content
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="component" />
</td>
<td width="150">
Right Column Content
<jdoc:include type="modules" name="right" style="table" />
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>



Joomla! Code - Footer

The Copyright © <?php echo date("Y"); ?> <?php echo $mainframe->getCfg('sitename'); ?> - All Rights Reserved. code give's us the footer's information.

Copy in the index.php file.

<?php
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
?> <!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" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="/templates/template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="150">
Left Column Content
<jdoc:include type="modules" name="left" style="table" />
</td>
<td width="100%">
Center Column Content
<jdoc:include type="component" />
</td>
<td width="150">
Right Column Content
<jdoc:include type="modules" name="right" style="table" />
</td>
</tr>
</table>

</div>

<div id="footer">
Footer
Copyright © <?php echo date("Y"); ?> <?php echo $mainframe->getCfg('sitename'); ?> - All Rights Reserved.
</div>

</div>

</body>
</html>


What we have so far

So far we should have a folder called simple which is the template's name. Inside this folder we should have an index.php file, we should have two additional folders, one called css and the other one images. Remember that the images folder is empty because for this tutorial we're not using images. And within the css folder we should have a template.css file.

Additional Joomla! CSS Classes

We have additional css classes needed by Joomla! in order to properly style the template.

Find them below, copy/paste them into the template_css.css file right after the last css classes we did.
/**
* @version - Template version goes here
* @name - Name of the template goes here
* @date - The date you made your template goes here
* @author - Author's name goes here
* @website - Your website goes here
* @email - Your email goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {
}
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}

/********** Breadcrumbs **********/
.breadcrumbs {
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 9px;
padding : 0px;
}
a.breadcrumbs:link, a.breadcrumbs:visited {
color : #000000;
font-weight : normal;
}
a.breadcrumbs:hover {
color : #3366cc;
font-weight : normal;
text-decoration : none;
}

/############### ADDITIONAL JOOMLA! CSS CLASSES ###############/
/********** MainLevel Links **********/
a.mainlevel:link, a.mainlevel:visited {
color : #000000;
font-size : 10px;
font-weight : normal;
text-decoration : none; }
a.mainlevel:hover {
color : #0000cc;
font-weight : normal;
text-decoration : underline;
}
/********** SubLevel Links **********/
a.sublevel:link, a.sublevel:visited {
padding-left : 1px;
vertical-align : middle;
font-size : 11px;
color : #000000;
text-align : left;
}
a.sublevel:hover {
color : #666666;
text-decoration : none;
}
/********** MainMenu Links **********/
a.mainmenu:link, a.mainmenu:visited {
color : #000080;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-weight : none;
}
a.mainmenu:hover {
color : #000080;
text-decoration : underline;
}
/********** Other Links **********/
a:link, a:visited {
color : #cc0000;
text-decoration : none;
}
a:hover {
color : #0099ff;
font-weight : none;
text-decoration : underline;
}
/********** Modules **********/
table.moduletable {
width : 150px;
margin-bottom : 15px;
border : 1px solid #cccccc;
}
table.moduletable th {
width : 100%;
font-size : 12px;
font-weight : bold;
color : #0000cc;
text-align : left;
text-indent : 5px;
letter-spacing : 1px;
margin : 5px 5px 20px 5px;
}
table.moduletable li {
}
table.moduletable ul {
padding : 0px;
}
table.moduletable td {
padding : 2px;
}
/********** Poll **********/
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.pollstableborder {
border : 1px solid;
padding : 1px;
}
/*############### CONTENT ###############*/
/***** Header for contentpaneopen *****/
.contentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000000;
text-align : left;
padding-top : 10px;
}
/***** Home, Mambo License, Blog, Lower Content for Advanced Search *****/
.contentpaneopen {
width : 100%;
}
/***** Title for Blog, News Feeds, Wrapper, Links, Advanced Search, Contact Us *****/
.componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000000;
text-align : left;
padding-top : 10px;
}
/***** Top Content for Getting Started, FAQs, News Feeds, Links *****/
.contentdescription {
padding: 0px;
}
/***** Lower Content for Getting Started, FAQs, News Feeds, Wrapper, Links, Contact Us *****/
.contentpane {
padding-top : 10px;
}
/********** Inner Content **********/
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.sectiontableentry1 {
background-color : #F0F0F0;
}
.sectiontableentry2 {
background-color : #E0E0E0;
}
/********** Rating **********/
.content_rating {
padding : 5px;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : bold;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #990000;
border : 1px solid #CCCCCC;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000000;
text-align : left;
text-decoration : none;
}
a.contentpagetitle:hover {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
text-align : left;
color : #7B8DA1;
text-decoration : underline;
font-weight : bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
font-size : 11px;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color : #ffae00;
border-left : outset 2px #ff9900;
border-right : outset 2px #808080;
border-top : outset 2px #ff9900;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : bold;
color : #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left : outset 2px #E0E0E0;
border-right : outset 2px #E0E0E0;
border-top : outset 2px #E0E0E0;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : normal;
}
.tabpadding {
}
.tabheading {
background-color : #ffae00;
text-align : left;
}
.pagetext {
visibility : hidden;
display : none;
position : relative;
top : 0;
}
/* for modifying {moscode} output. Don't set the colour! */
.moscode {
background-color : #f0f0f0;
}
.code {
background-color : #f0f0f0;
border : 1px solid #FFF;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 10pt;
color : #ff6600;
text-align : center;
}
/* Javascript Back button */
.back_button {
text-align : center;
margin-top : 40px;
}
table.contenttoc {
color : #333300;
background-color : #ffffff;
border : 1px solid #333;
}
table.contenttoc td {
font-size : 8pt;
font-weight : normal;
text-align : left;
}
ul {
margin : 0;
padding : 5px;
list-style : none;
}
li {
line-height : 15px;
padding-left : 15px;
padding-top : 1px;
background-image : url('/../images/arrow.png');
background-repeat : no-repeat;
background-position : 0px 5px;
}
table.searchinto {
width : 100%;
}
table.searchintro td {
background-color : #293C43;
color : #ffffff;
font-weight : bold;
}



The templateDetails.xml File

Now we continue with the XML file is what Joomla! uses to to identify the template in the Administration . The CSS, images and scripts must be included in this XML file.

With our text editor we open a blank page, we copy the following details seen in the screen just below and we save it in our Template folder as templateDetails.xml (Notice the capital D, the rest in lower case).

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>Template Name</name>
<creationDate>Date of template creation</creationDate>
<author>Author</author>
<copyright>Copyright</copyright>
<authorEmail>Email</authorEmail>
<authorUrl>Web Site</authorUrl>
<version>Version</version>
<description>Brief Description</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>Image Files</filename>
</images>
<css>
<filename>css/template.css</filename>
</css>
</install>

The template_thumbnail.png File

The template_thumbnail.png file is a small image 200x150 pixels of your template necessary for the Template Chooser Module to display the small screen.

Let's make one - Open a template in your favorite browser, use the PrintScrn button in your keyboard. Now we need an image editor, such as PhotoShop or Gimp.Gimp is Open Source (Free).

We open the image editor, find File > Acquire > click on From Clipboard and you should see the template's image. Modify its size to 200w x 150h and save it as template_thumbnail.png in the template's folder.

That's it, we are DONE!

The tutorial template called simple is available Here.