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.

TrackBack URI for this entry

Comments (20)

Subscribe to this comment's feed

Amy Stephen said:

	Chette - love this tutorial. I blogged it today. It is so elegantly put together and the concepts you present are logically laid out. Thanks for sharing this with the community - it is much appreciated!
	report abuse vote down vote up

April 05, 2007 | url
Votes: +0

Gretchen Cawthon said:

	Great information. Thanks for posting it.
	report abuse vote down vote up

April 05, 2007 | url
Votes: +0

dellsystem said:

	I think this is the best template tutorial I have ever read, and this is just the first part! Joomla's documentation and Help section is atrocious, to say the least. I wish the documentation team can write as well as you do.
	report abuse vote down vote up

April 05, 2007
Votes: +0

Chette Soriano said:

	Thanks guys If you think there are topics that I need to cover, please feel free to holler! This tutorial is harder to write than I thought. I hope I do cover everything in the next series.
	report abuse vote down vote up

April 07, 2007 | url
Votes: +0

tamburix said:

	Nice tutorial. Simple and clear. Good work!
	report abuse vote down vote up

April 15, 2007 | url
Votes: +0

ricci555 said:

	Thanks for Part 1
	report abuse vote down vote up

April 24, 2007
Votes: +0

schuga said:

	A very clear and intuitive explanation. I was looking around the web for a while till I found this. Thank you.
	report abuse vote down vote up

October 18, 2007 | url
Votes: +0

chalee said:

	A very clear and intuitive explanation.i think i can creatjoomla template myself now
	report abuse vote down vote up

November 20, 2007
Votes: +0

luka said:

	good tutorial
	report abuse vote down vote up

January 15, 2008 | url
Votes: +0

Anoop Surling said:

	Maraming salamat, higit pa kay Darna and tulong mo! I am basically a designer... not a programmer. I was thinking about trying these mambo joomla things for a long time. After reading your tutorial, I really got a courage... and today I have made and uploaded a template successfully. It's just a skeleton now. Once I finish that I shall post the URL. Thanks
	report abuse vote down vote up

March 02, 2008
Votes: +0

James said:

	and childrens are FBI agents...heh love that quote...yes i love ur tutorial...simple and easy...hitting two birds with one stone as you say
	report abuse vote down vote up

March 25, 2008 | url
Votes: +0

Popoy said:

	Somewhat informative, tsk tsk tsk. Pede na
	report abuse vote down vote up

April 09, 2008
Votes: +0

Aaron Bowles said:

	I read it once and I finally got it, after weeks of thinking I never would. I intuitively knew it was simple but you made it so. Thank you very very much. A tip for you: Write a book on this. Make it short. Sell a bunch. Best to you--Aaron
	report abuse vote down vote up

April 11, 2008 | url
Votes: +0

wasiL from PAK said:

	Intuitive explanation Best tutorial Very Simple Thanx.
	report abuse vote down vote up

April 15, 2008
Votes: +0

jdw said:

	Your tutorial looks very well written. Does this apply to Joomla 1.5 template creation? If not, can you provide insight on the differences? Thanks, jdw
	report abuse vote down vote up

April 29, 2008
Votes: +0

Elvir said:

Nice tutorial. I bought a few books about Joomla 1.0 but too much talk about what Joomla can but a less how to obtain it! I understand how classic template works but when I done my graphic issue of future Joomla site in Photoshop I faced with few problems: slicing and putting inside table and at least sidebars and maincontent section won't be on same height in browser nor have same (commmon) height at all! I really wished to make my own template but seems like impossible story :- I don't get why it must be so hard and difficulties... why profis are hiding CSS sequences and description for what is they!? Thanks for your time and effort involved in this tutorial. Do you think about another some bigger tutorial on line?

report abuse vote down vote up

May 08, 2008 | url
Votes: +0

:-: S€ZæR -> said:

	css web template page (example) -- http://www.css-lessons.ucoz.co...e-page.htm
	report abuse vote down vote up

May 14, 2008 | url
Votes: +0

chester.. said:

	HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
	report abuse vote down vote up

May 23, 2008 | url
Votes: +0

raquel said:

	best tutorial
	report abuse vote down vote up

May 27, 2008
Votes: +0

darius (pinoy) said:

Hi Chette, Maraming salamat sa napakalinaw na Joomla Template tutorial! Tama ang hinirit nung isang commenter... dapat pag-isipan mong magsulat ng libro tungkol sa Joomla. Sobrang wlang kwenta ang documentation at pati mga books sa Joomla (oops! hehe, buti na lang tagalog usapan natin, hehe). Anyway, sana ay magkaroon ka ng oras para magsulat naman ng Joomla 1.5 template tutorial... I'm sure babaha ang trapik sa blog mo kapag ginawa mo 'yon. Mabuhay ka Chette! Mabuhay ang mga ka-Joomla!

report abuse vote down vote up

July 02, 2008 | url
Votes: +0

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

Add Comment