Joomla Template Tutorial (Part 2)

This is Part 2 of the Joomla Template Tutorial series. Part 1 is here. Part 3 is here.

By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:

3. Identify where you want to place your Joomla elements

Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.

Here is mine:

As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.

And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.

A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.

A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.

4. Create the directory structure

In your computer, create the directory structure below:

Create a directory called template_name (or any name you want). Don’t put spaces.

Under template_name, create 2 folders: css and images.

This is where you will be saving your template files, which is explained in the next section.

5. Code the HTML version of your mockup.

It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.

Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.

Include also your logo & other graphics you have decided should be part of your template.

For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.

Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:

Folder

Save what files

template_name

template.html (which will be renamed later on to index.php)

template_name/images

All images

template_name/css

CSS file (template_css.css)

You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.

6. Rename your HTML mockup to index.php

Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.

7. Enter the code for the Joomla elements

It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.

Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.

Joomla Element

Code

Main Body

<?php mosMainBody(); ?>

Module

<?php mosLoadModules ( ‘module_name’ ); ?>

Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?>

I am new to Content Management and your guide was very helpfull for me to understand the directory structure and how to install the templates, I am new to PHP, can u suggest me any tutorial for me to create a template.

Thanks for the tutorial. It really helped me a lot… I’m maintaining a website for our Local Government and i like to change the look of the site… You’re so generous… Hope to hear from you soon… Thanks again…

Maybe you will have thought-about including additional video clips about this subject to your blog posts to carry the guests additional entertained? I imply I just learn by means of the entire article of yours and it had been completely good quality but since I’m more of a visible learner,I found that to be extra helpful well let me know how it seems! I get pleasure from what you guys are always up too. Such knowledgeable job and reporting! Sustain the great works guys I’ve added you guys to my blogroll. It is a good article thanks for sharing this informative information.. I will go to your weblog repeatedly for some newest post.