How to make Joomla template - part 2.

So, here it comes - part 2.

If you haven't read part. 1 - go to How to make Joomla template - part 1.

All the rest, go on reading further...

So, after we end up making index.php, we are ready for css. In the folder named "css" make a file called "template_css" and save it as .css file.

In this file you can define the look of your layers, fonts, backgrounds etc.

Be carefull with Joomla. After you define all the significent pieces of your index.php, there is a whole bunch of classes which are defined form Joomla for their modules, content and components. Every module that you additionaly install, also has its own css defined look. You need to find them and change them all.

Here are a few of the classes which you also have to define if you don't want that Joomla use its own:
Off course, these are just a few of them. To understand importance of css specifity (which CSS rule will be applied in browser if you have more of them applied) read this great article from Smashing Magazine - CSS Specifity - things you should know.

All the images that you use in your css file, put in folder "images" (which we created in part 1. of this tutorial).

After everything is done and you are happy with your design, make a list of all the files in your templateDetails.xml file which we also created in part 1.

It should look something like this:
<?xml version="1.0" encoding="iso-8859-1"?><mosinstall type="template"> <name>Joomla template</name> <creationdate>2007</creationdate> <author>sparkl-ing.com</author> <copyright>This template is released under the GNU/GPL License</copyright> <authoremail></authoremail> <authorurl>http://www.sparkl-ing.com</authorurl> <version>1</version> <description>A clean template with a touch of green.</description> <files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/back_all.gif</filename> <filename>images/back_all1024.gif</filename> <filename>images/back_mainmenu.jpg</filename> <filename>images/footer.jpg</filename> <filename>images/footer1024.jpg</filename> <filename>images/indent1.png</filename> <filename>images/indent2.png</filename> <filename>images/module_bottom.jpg</filename> <filename>images/module_left_bottom.gif</filename> <filename>images/module_left_top.gif</filename> <filename>images/module_middle.jpg</filename> <filename>images/module_right_bottom.gif</filename> <filename>images/module_right_top.gif</filename> <filename>images/module_top.jpg</filename> <filename>images/right-bottom.gif</filename> <filename>images/right-top.gif</filename> <filename>images/module_middle_wide.jpg</filename> <filename>images/module_top_wide.jpg</filename> <filename>images/module_bottom_wide.jpg</filename> <filename>images/submenu_back.gif</filename> <filename>images/back_search.jpg</filename> <filename>images/back_verlauf.jpg</filename> <filename>images/banner_back.jpg</filename> <filename>images/content-top.gif</filename> <filename>images/content-top1024.gif</filename> <filename>images/headmenu_left.gif</filename> <filename>images/headmenu_right.gif</filename> <filename>images/headmenu_left_hover.gif</filename> <filename>images/headmenu_right_hover.gif</filename> <filename>images/logo.gif</filename> <filename>images/readon2.gif</filename> <filename>images/readon.gif</filename> <filename>images/module_head_back.jpg</filename> </images> <css> <filename>css/template_css.css</filename> </css></mosinstall>

Also, don't forget to make a thumbnail preview of your template and save it under the name template_thumbnail.png in the same folder with your index.php.

This complete folder you can upload online to your online Joomla site by ftp manager or you can zip it and install it thru Joomla backend.

Thats it.

Quite simple... ;-))

If you have any questions, feel free to ask...