Joomla Template Tutorial (Part 1)

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.

47 thoughts on “Joomla Template Tutorial (Part 1)”

  1. Chette – love this tutorial. I [url=http://opensourcecommunity.org/2007/04/04/joomla-template-tutorial-part-1-chette]blogged[/url] 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!

  2. 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.

  3. 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.

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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?

  9. 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

  10. 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! :D

  11. Very useful files search engine. f-torrents.com is a search engine designed to search files in various file sharing and uploading sites.

  12. This is realy a good joomla template tutorial, which teach how to design template in joomla 1.0.x

    Thanks
    NaughtyN

  13. wow, a cool filipina that does joomla stuff!
    i just found joomla and am rebuilding a new site for my church. I have been to philippines 4 times on medical surgical missions. i LOVE the philippines and filipinos! And the food! masarap! Beef Tapa is my absolute favorite breakfast thing..of course with garlic rice. omg!

    i miss the philippines!!!!!!!!!!!!!!!!!!!!!!!!!!! can we move it to where the bahamas is? I am in florida and i dont like bahamas people… filipinos are the NICEST folks on the planet…

    sige! Nurse Kevin

  14. This is an extremely useful series / post. I enjoyed reading this and the 2 earlier posts. Looking forward to part 5 and 6. And, thanks for the downloadable templates – you have saved me some time.

  15. I have used Joomla/Mambo on and off for about 4 years now, and being very visually driven I struggled to visualise the Mambo/Joomla setup because of all of the verbose and arcane terminology used by developers.

    I’d like to commend you on these brilliant tutorials. After some years reading up on hundreds of Joomla-related articles, these are simply the best I’ve seen!

  16. Pingback: carabaos
  17. Hi Ms.Chette It is nice to know this joomla template tutorial I’ve read years before is now running, I thouth Your site gone 404 forever. I had met your site when I’m still in college days. Once again I’m digging on joomla and I remember your name as one of great-women of pinoy joomla.

    -3P4IRS

Leave a Reply to :-: S€ZæR -> Cancel reply

Your email address will not be published. Required fields are marked *