Intro:
Well, I've seen alot of tutorials out there on how to program a Joomla Template with software like Dreamweaver and other big programs, this tutorial will focus on programming an entire Joomla Template with a program as simple as Notepad. This tutorial assumes that you have basic HTML/CSS knowledge, enough to build a template that isn't Joomla.

Who is this Tutorial For?
This tutorial is focused on people who have worked with the web before and would be able to program an HTML page with CSS or Tables, this tutorial will teach you common practices in how to add Joomla to your current websites. And is focused on a beginner to Joomla but not a beginner to basic web programming

Ok to begin, let me run you through the basics of how a Joomla Template is setup. The driving force behind a Template is it's 'Positions', a position in Joomla is an area like your Main Content, Left Navigation, and Header for example, you can further break this down to areas like your Advertising areas, login module areas, etc.. It can also be more efficient to combine something like your header position with your top header, but that is beyond the scope of this tutorial.

Now that you have a fairly good idea on what positions are, let me draw out a simple mockup of where you would position the positions of a simple Joomla template

We are actually going to end up programming that exact template for Joomla, so there is a light at the end of the tunnel!

Begin with an HTML template
So to start off you need to program the template in HTML, I will go over this a little bit, but this tutorial is focused on people who already have HTML knowledge, that simple Template above would look something like below

Convert it to Joomla
So what that will create is a simple HTML template, if you save that as an HTML file you will see an 800 pixel wide website with a place for a header, sidenav, and Main Content, now we need to add in the unique Joomla Commands to make the Template actually work with Joomla, let's start with the Main Content area:

In the main content area we are going to want to put in the main body for our website, the Joomla PHP include for this is <?php mosMainBody(); ?>, So now our template would look like this:

The Side Navigation
Now in the area where 'Main Content' would be the maincontent of your Joomla website would always be there. Now back to when I was talking about positions the maincontent is a position but it is a special position, the rest of your positions will be loaded with the mosLoadModules() function. e.g. <?php mosLoadModules('left'); ?> So anywhere that code is placed in our template, Modules published to the 'left' position would display. You can publish as many modules to any position as you want, you can also make as many positions as you want, Joomla automatically comes with alot of default positions like 'banners', 'pathway', 'user1', and more, in our side nav we are going to want the main menu and a way for users to login, so in the side nave area, we are going to put the 'left' and 'user1' positions, like below.

That would load the 'left' and 'user1' positions into our sidenavigation, if you are interested try some of Joomla's other default positions to see what they do, to find the other positions in Joomla go to Site > Template Manager > Module Positions You can also create your own positions there.

What does the left and user1 positions do by default? Well left will load the Main Menu, and Top Menu, the user1 position loads a login module that people can register and login to your website, in Joomla you can password protect some of your pages so that only registered users can view it.

Now the only thing we have left to program is the header, what we'll put there is a pathway/breadcrumb area, e.g. It lists what page your on and a way to navigate back, kind of like a boardwalk. The position for an area like that is 'pathway' so in order to load that in our top area, we'd go to the area in our HTML code that has the 'Header is Here' text and replace it with: <?php mosLoadModules('pathway'); ?>, So now your code should look like below:

Now you are basically done, only thing left is to add in the header information. Joomla has some default code that should be placed at the top of every Joomla template, it is listed below:

Now your entire template should look like below:

Now save this document as index.php, I saved it to 'C:/Joomla/Template1/index.php' for simplisties sake.

Now we need to write the Joomla XML file, this is a file that lets us say, 'I programmed this Template Foo!' :) below is a sample XML File:

Save that as templateDetails.xml, keeping with our previous example save it to 'C:/Joomla/Template1/templateDetails.xml', Now a couple of things to notice about this file, you need to add in your images and CSS file to the XML file.

Notice that the first file we add in is the index.php file that we just created, it is located inside of the <files> tag, then further into the <filename> tag, we can also add in all our images which would be enclosed in a <images> tag, and then the filename tag again, notice that we didn't use any image in this template but if you did you'd add all your images like in the code above, for an example I added in the 'images/logo.gif' image (C:/Joomla/Template1/images/logo1.gif). We can also add our CSS file inside of the <css> tag. Once again we didn't use a CSS file but if you need to add one in (which you probably will) that is how you'd do it.

Important
Since we are not using logo1.gif or template_css.css, you need to remove the references to these files from the templateDetails.xml file or you will get an error.

Now we are basically done with the programming of the template, so we need to Zip (or Tarball if your on linux) our Template1 folder to Template1.zip, now our template is ready to distribute and upload into Joomla. To upload your template in Joomla, go to Site > Template Manager > Site Templates click on New in the top right, then you can Browse and Upload your Template1.zip file you just created, and your done!

Comments (3)

Subscribe to this comment's feed

css design lesson
written by :-: S€ZæR ->, May 03, 2008

CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

report abuse

vote down

vote up

Votes: +0

css design lesson
written by :-: S€ZæR ->, May 14, 2008

css web template page (example) -- http://www.css-lessons.ucoz.co...e-page.htm

report abuse

vote down

vote up

Votes: +0

Help to develop the site in joomla
written by Khushal kumar, October 14, 2008

i am just started in my website in joomla, but i don't know more about the joomla.
please help me to develop the site.
thanks

report abuse

vote down

vote up

Votes: +0

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Add Comment

---