chette.com

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

This is an article that I’ve been delaying because its not the easiest thing to write. But as luck will have it, I decided to do a redesign of my website, & decided not to put this off any longer. Hit two carabaos with one stone, so to speak.

Some notes:

• The instructions are meant for Joomla 1.0.12
• This tutorial is for those who are already comfortable with HTML & CSS.
• Unfortunately, I will not be touching on the CSS of Joomla. CSS is an entirely different animal altogether, and if you think about it, is outside the scope of any template tutorial. I will, however, try my best to cover the different styles that are called by Joomla in another article.
• For the purposes of this tutorial, the new template design of chette.com (v5.00) is used for illustration purposes.

Please do give me feedback about this tutorial (either thru my contact form or thru the comment form). Tell me what you think of the article, any suggestions for improvements, or even your own tips.

1. Conceptualize the design of your website

Before doing any template development, the first step is always to come up with the “look” of your website. I personally use Macromedia Fireworks (now Adobe Fireworks), or doodle on good ol’ fashioned paper.

Use the graphics program you’re most comfortable with. And yes, enough of this Photoshop vs. Illustrator vs. Fireworks debate.

As a general rule, make the mockup as simple as possible. Try to avoid designing mockups which require you to use complicated nested tables.

Below is my mockup:

2. Identify the Joomla elements to use

While designing your mockup, you need to decide which Joomla elements you need to use. This is where it gets tricky for newbies. What are Joomla elements, anyway? I will try to explain this part as simple as I can, and then show you examples so you can get a better idea.

You should treat Joomla like furnishing your office space. Where do you put the tables, the cabinets & chairs?

Your blank template page is the room itself. The tables, chairs, & cabinets are the Joomla elements. Where do you want to put your articles? How about the list of latest news? The menu?

There are 2 major elements that you need to be aware of: Main Body & Module Position. Most, if not all, Joomla-based websites use these two.

Main Body is where your content items will appear. This is the meat of your website – full contents of your article, list of articles of a particular category, your guestbook, etc. They all appear on the same place on a page — not at the same time, of course, since it depends on what menu item was clicked. For instance, your guestbook will appear if you clicked on Guestbook, and your article will appear if you click on the link to your article. But basically all these are displayed on the same position, which is the main body.

Modules are your menu, polls, headers, custom text, banners, etc. It can even be static text. Some people call this “sideblocks.” Let’s just say that these are the mini content items that can appear around your Main Body.

Now Module Positions are where you want your modules to be placed. You can name it any way you want, but it is advisable that you use a highly descriptive name such as right, left, top, bottom, footer, etc.

If your polls and your menu will be placed on the same part of the page (for example, on the right side, but on top of each other), only define one module position for that (“right”). Why? Because you can have multiple modules in the same module position. You can even change the ordering — which module will appear on top, etc.

And another thing about modules: You can make a module to appear only for a specific menu item.

For example, you have 2 menu items called Cars & Motorcycles. Whenever your user is reading an article under Cars, you want a graphic module to appear. However, when your user is reading an article under Motorcycles, you want another graphic module to appear, but in the same module position. This is possible. You just need to set it in the Administrator later on.

Modules are very powerful. Almost anything can be placed on a module. I know people who merely upload a barebones template (practically blank), and just put their logos, mastheads, & other graphics in modules. It makes templates a lot easier to maintain.

There are more modules built-in to Joomla, but they are optional:

1. Date. Displays the current date, based on your web server’s system date.
2. Footer. For copyright notices at the bottom of the page. I personally don’t use this because it’s a lot cumbersome to edit. I merely define a “bottom” Module Position and put my copyright text there.
3. Pathway. The breadcrumbs navigation of your website. For example: Home > Menu > Article
4. Site Name. Use this if you want the name of your website to appear anywhere else in your page.

This ends Part 1 of the Joomla Template Tutorial. Click here for Part 2.

It is good SEO practice to put the page title first in your title tags, and then your site name. Unfortunately, by default, Joomla places the site name first before the page title.

To change this, grab a copy of the file /includes/joomla.php

Around line number 507, replace this:

$this->_head['title'] = $title ? $GLOBALS['mosConfig_sitename'] . ' - '. $title : $GLOBALS['mosConfig_sitename'];

With this:

$this->_head['title'] = $title ? $title .' - '. $GLOBALS['mosConfig_sitename'] : $GLOBALS['mosConfig_sitename'];