How to Customize Joomla Templates

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

This lesson, we will be learning how templates work and how to customize a template to match the look and feel of the site you want.

Before we can customize our template, we have to know how the Joomla templating system works. In the Administrator panel under Site -> Template Manager you will see that Joomla ships with a few templates. You can get your pages to use whichever template you want by setting that template as the default by using the Default button. If you want your site to use a mixture of templates, it can be done as follows. By using the Default and Assign buttons, you can get each of your page to use the template you want. For example,

Joomla's template manager

Joomla's template manager

To create a brand new look for you site, you want to duplicate one of the templates and put it on this list here. Make you new template the default template for all your pages. And then start altering that new template. That way, you do not alter the templates that shipped with Joomla.

1. Duplicate the template folder in Templates and give the folder the same name as your template name.

2. Alter the templateDetails.xml.

3. Upload to webhost.

4. You should see your new template in Template Manager. Make that as default with no other assignment in any other templates.

5. You can edit the HTML and CSS of this template with the Edit HTML and Edit CSS buttons in the Template Manager.

6. Edit HTML and replace all instance of the old template path with your new template path.

7. Module Manager (Module -> Site Module) will tell you which module will be published in which position. For the solarflare template, the Template -> Module Position corresponds to this map.

Joomla's module manager

Joomla's module manager

The second parameter indicate display style:

0 = (default display) Modules are displayed in a column table.
1 = display in horizontal table.
-1 = raw output
-2 = Modules are displayed using div
-3 = Modules are displayed in a format that allows, for example, stretchable rounded corners.

The Function reference will provide more detail.

8. If you want to apply a style only to a particular page or component (say the contact page), you can do the following at the top of your index.php file.

<?php if ( $_REQUEST[‘option’] == “com_contact” ) { ?>
<style type=”text/css”>
.contentheading {display: none}
</style>
<?php } ?>

If you don’t know the exact name of your request object, you can find out by inserting

<?php echo $_REQUEST[‘option’]; ?>

into your template index.php file or look at the query string.

9. If you want to do something only when you are on the front page, do the following in index.php

<?php if ($option == ‘com_frontpage’) { ?>
<!– your stuff to do when on front page–>
<?php } ?>

9. If you want to change the wording of a text string in the user inteferace, you can often find the define constant in language/english.php.

10. There is difference between modules and forms. For example, the code for the login module is located in \modules\mod_login.php whereas the code for the login form is located in \components\com_login\. Do not confuse the two. Otherwise you start changing the code for one and it doesn’t seem to have any effect on the other that you are looking at.

11. If you need to change the body background-color of the design, it is best to use the CSS rule in the internal CSS style sheet of index.php rather then alter the background color of the external style sheet. This is because altering the background color of the external style sheet will cause the story edit panel to have that background color.

12. Whatever you do, don’t take out the …

<?php mosMainBody(); ?>

from the template. This controls the display of the main content.

To learn more about customizing Joomla Templates, take a look at CompassDesigns tutorial.