Today morning, my boss told me to teach new employers how to do Joomla templates. We followed five easy steps, and it was really easy to get a template working in Joomla.
Step 1:
First step is to prepare the template. It should be a (X)HTML & CSS template with images and not much JQuery/Ajax/JS as it will be applied later through extensions. You may have a look at the other templates, and they should stand like this:
index.html (and should be renamed to index.php)
css/your-css-file(s)-here
images/your-image-file(s)-here
js/your-javascript-file(s)-here
You can do the structure as you would like, but this is suggested if you are just starting with Joomla.
Step 2:
Now we need to prepare the header of the template. Open your index.php file in a normal text editor such as Notepad2 and place this code:
There is no need to care about title, metatags, etc, because Joomla does this and you can manage them through backend (Admin Panel). You should take care to include all your css/js files inside <head></head> by doing like this:
<?php echo $this->baseurl ?> - is the directory where Joomla is installed.
/templates - is the directory of templates
/template-name - is the name of your template and also the directory where your template's files will rest.
and the /css/style.css is your css file.
To be more clear (with other words):
Lets assume we have Joomla installed in http://domain .com/joomla/
Everything will hapen in this file http://domain .com/joomla/index.php
Your template will be in this directory http://domain .com/joomla/templates/template-name/
Knowing this, you should also know that when you want to include a css, js, or even a php file, you should locate it from http://domain .com/joomla/index.php
Step 3:
The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1, user2, user3, user4, footer, debug, syndicate.
If you want to create a list (menu) with some links, you will create it in backend (admin panel), but you will have to show it in frontend through your template. To do this, you need to assign a postion to the list (menu). Lets say, we assigned the position "left". Now in the template, to show this list (menu) we put this code:
(type is for the type, and if we have a module, then we add the attribute name with the value of position).
Here is an example how this can be done:
We have this code in out template:
And we replace with this code:
So, only the <ul> is replaced because Joomla will generate it and the style will remain still the same.
Like above, we can also put the contents, articles, or other components like chat or forum, by using this code:
Or if we need to include a message, then we use this code:
Step 4:
The fourth step is to create a manifest file. This should be called templateDetails.xml and have to include some code like this (I am explaining each line but you have to remove the comments in //):
Step 5:
Create a file called template_thumbnail.png with dimmensions 206x150. This will be needet to preview your template before using it.
Step 6:
Zip your files and install into Joomla.
Follow those steps: Extensions -> Install/Uninstall -> Browse for your template and upload it.
Thats it!
===
You may still face any problem but they will depend in how the template is created. For example, if your code in your (X)HTML template is:
And you replace with this:
The style will not remain the same, because you just removed a class called "line" and Joomla will not generate it for you anymore. In other words, you replaced <li class="line"><a href="#">Item 1</a></li> with <li><a href="#">Item 1</a></li>.
To fix this, you will need to find your css file and replace the style of the list's class list:
with the other style which still is for the list
This is an unique solve for an unique problem.
===
This tutorial is for Joomla 1.5.XX. Another time I will put tutorial for Joomla 1.6.XX but it has just been released and not much people are using it.
Hope it was helpful. If you have a question or a problems, you can ask me.
Added after 10 minutes:
lol, I said five easy steps then I mentioned six... Anyway... :p
Step 1:
First step is to prepare the template. It should be a (X)HTML & CSS template with images and not much JQuery/Ajax/JS as it will be applied later through extensions. You may have a look at the other templates, and they should stand like this:
index.html (and should be renamed to index.php)
css/your-css-file(s)-here
images/your-image-file(s)-here
js/your-javascript-file(s)-here
You can do the structure as you would like, but this is suggested if you are just starting with Joomla.
Step 2:
Now we need to prepare the header of the template. Open your index.php file in a normal text editor such as Notepad2 and place this code:
Code:
<?php // no direct access 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; ?>" > <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" /> </head>
Code:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/template-name/css/style.css" type="text/css" />
/templates - is the directory of templates
/template-name - is the name of your template and also the directory where your template's files will rest.
and the /css/style.css is your css file.
To be more clear (with other words):
Lets assume we have Joomla installed in http://domain .com/joomla/
Everything will hapen in this file http://domain .com/joomla/index.php
Your template will be in this directory http://domain .com/joomla/templates/template-name/
Knowing this, you should also know that when you want to include a css, js, or even a php file, you should locate it from http://domain .com/joomla/index.php
Step 3:
The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1, user2, user3, user4, footer, debug, syndicate.
If you want to create a list (menu) with some links, you will create it in backend (admin panel), but you will have to show it in frontend through your template. To do this, you need to assign a postion to the list (menu). Lets say, we assigned the position "left". Now in the template, to show this list (menu) we put this code:
Code:
<jdoc:include type="modules" name="left" />
Here is an example how this can be done:
We have this code in out template:
Code:
<div id="header">
<div class="menu-nav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>
Code:
<div id="header">
<div class="menu-nav">
<jdoc:include type="modules" name="left" />
</div>
</div>
Like above, we can also put the contents, articles, or other components like chat or forum, by using this code:
Code:
<jdoc:include type="component" />
Code:
<jdoc:include type="message" />
The fourth step is to create a manifest file. This should be called templateDetails.xml and have to include some code like this (I am explaining each line but you have to remove the comments in //):
Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> // this means that the template is for Joomla 1.5.XX <name>fresh</name> // here you put the template name. It should be the same like in other cases <creationDate>25/01/2009</creationDate> // the date you created your template <author>Ervis Mysterio</author> // your name <authorEmail>ervis@mysterio3.net</authorEmail> // your email (this information-line can be removed) <authorUrl>http://mysterio3.net</authorUrl> // your website (this information-line can be removed) <copyright>Ervis Mysterio</copyright> // who holds the copyright? (this information-line can be removed) <license>GNU/GPL</license> // license type (this information-line can be removed) <version>1.0.0</version> // version of your template. In Joomla, usualy they start at 1.0.0 <description>this is a nice template</description> // the description of your template. (this information-line can be removed) // like this you have to write all your filenames you will use in the template. While installing, Joomla will check each line one by one. If a file is writen here but it not exists, then Joomla will not process the template. Also, if a file exists but is not writen here, Joomla will simply ignore it and not upload it. <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/arrow.png</filename> <filename>images/logo.png</filename> <filename>css/template.css</filename> </files> // here you can declare all positions you will use. You can add more positions if your template is bigger, by using same way. <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> <position>debug</position> <position>syndicate</position> </positions> </install>
Step 5:
Create a file called template_thumbnail.png with dimmensions 206x150. This will be needet to preview your template before using it.
Step 6:
Zip your files and install into Joomla.
Follow those steps: Extensions -> Install/Uninstall -> Browse for your template and upload it.
Thats it!
===
You may still face any problem but they will depend in how the template is created. For example, if your code in your (X)HTML template is:
Code:
<div id="header">
<div class="menu-nav">
<ul>
<li class="line"><a href="#">Item 1</a></li>
<li class="line"><a href="#">Item 2</a></li>
<li class="line"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
Code:
<div id="header">
<div class="menu-nav">
<jdoc:include type="modules" name="left" />
</div>
</div>
To fix this, you will need to find your css file and replace the style of the list's class list:
Code:
.list { }
Code:
.menu-nav li { }
===
This tutorial is for Joomla 1.5.XX. Another time I will put tutorial for Joomla 1.6.XX but it has just been released and not much people are using it.
Hope it was helpful. If you have a question or a problems, you can ask me.
Added after 10 minutes:
lol, I said five easy steps then I mentioned six... Anyway... :p
Comment