In this tutorial , you will learn about the basics of a Joomla template, and create one from scratch. We will quickly go through installing a local server and Joomla itself, and then create a basic functioning template.
Preparation
Before we get started on our template, there are a few things you need to prepare. Just like most CMSs, Joomla requires a server with PHP and MySQL installed. Installing the above manually can be quite annoying and, to be honest, a waste of time (unless you want to get into how it’s done exactly). What we will be doing is downloading a single installer for all the above that will stick a local server on your system and give you a really nifty control panel too.
So head on over to WAMP and download the latest version.( MAMP for Mac)
Once the installer is downloaded, execute it and install WAMP in a place easy to remember. If all goes to plan you should be looking at a folder named : wamp
You should now also have an icon in your notification bar (where the clock is) that gives you access to WAMP's control panel. You can use this for a number of things, including restarting the server.
Downloading and installing Joomla
Now that we have a server installed, we can get Joomla and set it up. Go to Joomla and download the latest release.
Before we continue, let's take a look at our wamp folder again. Inside you will find a bunch of folders, but the one we are interested in is the www folder. This is the root of your server setup and this is where we will be installing Joomla. (note: you can install as many copies of Joomla in here as you want, or anything else for that matter)
So, unpack your Joomla download into the www folder. I usually rename it at this point to the name of my site or just shorten it to joomla.
Joomla is now on our server. However there is one last thing we need to do before installing, and that's to create a database. Open up your browser and go to http://localhost . Here you will find the your server admin area, this is where we create our database.
To create the database, click on phpmyadmin under the Your Aliases section.
For this tutorial's sake we will be calling our database joomla. You will not be creating a user with password here, instead using the root user details. It is strongly recommended that you create a user with a strong password in live situations.
Now that we have a database, we can start installing Joomla. Fire up your browser and go to http://localhost/joomla (or whatever you called your site when unpacking it.)
The first screen pretty much speaks for itself. Choose a language and press next.
The next screen you see is the Pre-Install checklist. This is a list of the required items and settings Joomla needs to successfully install. Make sure you have the necessary configuration and click next.
On the next page, read the license carefully, and, when ready click next and enter the required details(Host Name: localhost , Username: root , no password and joomla as Database name), and press next.
Skip the FTP Configuration screen by clicking next and on the next page, enter your site name, an email address and choose a password. This will be the password you will use to log into the admin area of joomla along with the username: admin. We will not install any sample data right now, as we want to add the modules one by one to see how our template is coming along later on in the tut. Click next.
Congrats! Joomla is up and running, but before we can go in and mess around we have to delete the installation folder. So go to your www folder inside wamp, and then into the joomla folder and delete the installation folder
A closer look at Joomla
It’s pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping. Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while, at the same time, being packed with features that keep thousands of developers busy rolling applications and modules. If necessary, get familiar with the back end ( I recommend this quick Joomla 101 article on the Themeforest blog to get a quick feel.)
To visit your site , click on preview in the upper right corner of the admin area. What you will get is the default template with no content and the most basic of modules loaded.
The template
In order to begin understanding the template structure, let's take a look at the default one. Go to your www folder, then inside the joomla folder you should see a templates folder. (wamp/www/joomla/templates). This is where all the different templates go. You can switch between templates in the admin panel.
Inside the templates folder, you will see a folder for every template installed. Joomla comes with three templates: beez, rhuk_milkyway and ja_purity. Remember this location as this is where you will be installing your new templates in the future.
Although most templates are made up of quite a few files, only two are needed to make a working template. These are:
- index.php
- templateDetails.xml
The second file is templateDetails.xml. You can see this as a list of instructions to Joomla. This list must include the name of the template, the names of the files used in the template(images etc..) and the positions you want to use (the includes mentioned above.)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>template _tut</name>
<creationDate>31-01-2009</creationDate>
<author>Nettut Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Template Tut</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
The above is an example of a templateDetails.xml file. As you can see, this is a specific list that tells Joomla about the template, like the name, the author, date created etc... Notice the positions section in the code above. These are the positions we spoke of earlier, the includes. Some are self explanatory, like footer. If you put the joomla footer include in the footer area of your design, you will be able to control some aspects of the footer using the Joomla back end. Lets try and throw together a simple template.
Beginning the template
Lets do some preparation so we have something to work with. Go to your templates folder , and create a new folder. Lets call it template_tut.
Inside your new folder, create a file called index.php, and another called templateDetails.xml (copy/paste the code in the example above inside it).
Open up your index.php file in notepad or anything else you use to edit code, and copy/paste the following in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head>
We have a DOCTYPE, a PHP code for the language, and in the head section our first Joomla include. This is not in the xml list because it is not a position.
<jdoc:include type="head" />What this does is include the joomla header code (which includes the page title), and a bunch of other stuff that can probably fill half a tutorial on its own.
Finish up the markup on the page by adding the body tags and closing the html tag.
Using the template
Now that we have the basic files in place, let's add another include, this time to display the main content of any given page being viewed.
<jdoc:include type="component" />
You should now have this in your index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
Before we test our template, let's add an article so we have some content. Make sure WAMP is running and go to your admin area in Joomla with http://localhost/joomla/administrator
Now enter your login details
Go to Content on the menu and then to Article Manager in the drop down
Click on New to add an article
Give your article a title, fill in an alias, make sure its published to front page and hit save
Let's see what our article looks like on the front page. Click on preview in the upper right corner after saving. You should see the front page of your site with your text.
Now that we have published content, let's see if the template we made actually works. Go back to your admin area and click on Extensions and then Template Manager
You should see template_tut in the list, so go ahead and choose it, and set it as default.
Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla template. YAY!
Adding some meat to our template
We got our template working, it's retrieving the header info including the title and displaying content we created in the joomla back end .Before we add more includes, let's take a closer look at the module position includes; the ones we named in our xml file.
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
They are included in the following way:
<jdoc:include type="modules" name="position_name" />
So in order to add , for example, the left position, our index.php will look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head> <body> <jdoc:include type="component" /> <jdoc:include type="modules" name="left" /> </body> </html>
While we are at it, let's add the footer position
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html>
If you go back to your admin area, and go to the Module Manager you will notice a module already there, the Main Menu module. This module gets installed even if we choose to install the simple version of Joomla.
The menu is already hooked on to the left position (which we just included in our template), so let's see what it looks like. Hit preview
As you can see, we now have a menu with a link to Home. You can add more menu items and link to different content through the Menu Manager.
Lets get a footer working. Go to the Module Manager, click new and select Footer. Then press next.
On the following page, give the new module the title: Footer, and in the Position dropdown, select Footer.
Click save and then preview the page. You should now also see footer information on your template.
Adding more positions and modules
Lets style our page a bit so we can see what we are doing. In your template_tut folder create a new folder and call it "CSS" , and create a file inside it called 'template.css"
Stick the includes in index.php in some divs and wrap it all in a container div and then link your style sheet like the example. Feel free to copy my messy layout if you are not already using one of your own. I did mine real quick for this tutorial.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/template_tut/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"> Header and stuff</div>
<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float">Right sidebar</div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
and the CSS
* {
padding: 0;
margin:0;
}
ul {
list-style:none;
}
.float {
float: left;
}
.clear {
clear: both;
}
#container {
width:960px;
margin: auto;
}
#header {
background-color:#999999;
height: 150px;
}
#content {
width: 660px;
text-align: center;
}
#sidebar_left {
text-align: center;
background-color:#CCCCCC;
width: 150px;
}
#sidebar_right {
background-color:#CCCCCC;
width: 90px;
}
#footer {
background-color:#999999;
text-align:center;
}
Lets hook our right sidebar and header up with positions. Add the top position to the header and right position to the right side bar.
<div id="header"><jdoc:include type="modules" name="top" /> </div> and <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>
Now let's create the modules for those two positions. Go to the admin area of Joomla, login if necessary, and go to the Module Manager under the Extensions drop down menu. You should see Main Menu and the Footer we created earlier. Follow the same steps to create two more modules. A Search module that you will place in the top position, and a Login module that you will place in the right position.
Preview your page, you should now have a search bar in your header and a login form in your right sidebar. These are pretty much the basics of a Joomla template. You create positions in your design, like little hooks for Joomla to send info to, which in most cases you create in the back end. You can apply this to almost any design using the many positions that Joomla offers. I hope this has been useful to you guys, keep in mind that these are the very basics, Joomla templates can be made as complex and powerful as you want.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Max February 17th
nice topic. wanted to get infos about it for ages.
( )Markus February 17th
Awesome. I’ve been looking for something like this. Haven’t found anything, and now you come along, bringing me gold!
( )jatinder July 19th
Ya i also looking for same thing which got here..but i like to be know more about how to design complex and powerful designs of joomla can any body give a link to make it possible..
( )Sumeet Chawla September 9th
Same here! Awesome tutorial.. I always wanted to try out Joomla and wanted to know the basic stuffs properly
You provided just that… Thanks a ton buddy
Zik_fkz February 17th
Very nice one !
( )Bari February 17th
This is an excellent Tutorial. I was waiting for this type of tutorial. Thanks Tarek and thanks NETTUTS.
( )Saurabh Shah February 17th
nice .. someone finally started with joomla series…. keep it up …
( )insic February 17th
joomla? is it the one called EVIL by webdesignersdepot article? lol
( )diezko April 24th
yes
( )its hard but no so bad
Saurabh June 18th
Hey insic,
( )You are o sweet in pic…..
John July 25th
Nope. I think dats a bad thinking about joomla.
( )Ferdous July 25th
You are so sweet. But your word are not so.
( )mos August 10th
Hi insic u looking so sexy..
( )Danny February 17th
Thanks, just what I needed!
( )Lumzor February 17th
“joomla? is it the one called EVIL by webdesignersdepot article? lol”
heh yea, it aint that bad to tell, most people do not know how to skin it properly so they just decided to call it evil.
( )Miles Johnson February 17th
So if joomla is based on PHP, why does it have such a lame templating system? I don’t get systems like this…
“Lets create our own custom html markup thats a nuisance to learn, takes longer to load, and requires a bunch of logic to process.”
At least WP got it right by allowing straight PHP in the templates.
( )barry February 17th
This is the second tutorial I’ve seen in a few days that uses a root mysql login. Sure, I know it’s just a local installation, but shouldn’t we stop bad habits like that before they start?
( )Sumeet Chawla September 9th
so what do you propose is the correct way to do it?
( )Steve Johnstone February 17th
This seems hideously over complicated compared to WordPress. I don’t understand why people use Joomla over WP. This article was nicely written and easy to follow though.
( )Eddie Thieda March 10th
I would like to second this motion.
( )Ethan Gardner May 22nd
I’ve used Wordpress and Joomla extensively for various projects. Joomla is much better for a large site with a more complex architecture.
I actually think Joomla is easier to skin since all structure is located in the index.php file for the template instead of editing separate files for header, footer, comments, single pages, sidebars, etc and having the opening and closing tags in different files like you do in wordpress.
( )DRA July 16th
Realy its very good tutorial..
( )shin February 17th
Creating a Joomla template is time consuming for me. That’s why I use a template like Yootheme.
( )Andrew February 17th
Joomla is hard to change templated are easy but admin panel is really lame none of my clients didn’t like it!
( )Tarek February 17th
@Bari Glad you liked it, working on a more advanced templating tutorial which i will submit to nettuts.
( )Tarek February 17th
@Miles I see your point, and agree to some extend, but Joomla offers so much awesomeness that it would be a shame to not use it because of a little extra work on the template making.
( )Crypta February 17th
hey Tarek, I create templates for Joomla, it is going to be a very big tutorial
, I am glad that finally someone is talking about Joomla, it is awesome cms. You can do everything with it. For more complex templates you need to know very goog PHP, Javascript and CSS!
( )Sune February 17th
Nice also to be introduced to Joomla, but I would love to see expressionengine too!
( )GProject February 17th
Thanks Tarek for your great tutorial.
And to see what can be produced with such a “lame templating system”, check http://demo.rockettheme.com !
( )Mike June 30th
Very nice. Lots of inspiration there!
( )Shane Sponagle February 17th
Happy to see a Joomla tutorial. Well done.
( )Markus February 17th
Could anyone suggest any tutorials or articles that would be fitting to read after this one?
( )xQlusive February 17th
Joomla! good cms, though many think Joomla! is very vulnerable, it’s the one without knowledge who makes Joomla! vulnerable.
Nice to see a J! tutorial
( )Tarek February 17th
Thanks guys, its nice to see people are into Joomla. Inspiring me to write a few more tuts.
( )Munteanu Octavian February 17th
Nice post for beginners, definitely.
( )not2comply February 17th
I think Joomla templating system is cool, once we figured how it works.
Nice Tuts’ …..
Keep up the good work about Joomla….
( )konsehal_14 February 17th
@Tarek
Yes Please I’ve been looking for tutorials to skin joomla a lot
Please add some more
( )joomlatemplater February 17th
“So if joomla is based on PHP, why does it have such a lame templating system? I don’t get systems like this…
“Lets create our own custom html markup thats a nuisance to learn, takes longer to load, and requires a bunch of logic to process.”
At least WP got it right by allowing straight PHP in the templates.”
it allows more than you can imagine, I even wrote a much more thorough tutorial on this matter but it was rejected because it didn’t have enough pictures and the poor reviewer got bored reading it (too techy?). NetTuts seems to be more and more about tutorials for noobs
( )JJ Spelman October 29th
Where is your tut posted?
( )John Deszell February 17th
I’ve yet to try out Joomla or Drupal but I will soon. For now I’m working with Wordpress. But I think I’m going to create a site just to play with them once I finish up a freelance gig I’m working on.
( )Murray February 17th
Excellent!
Been looking forward to a good Joomla tutorial.
Bring on Drupal!
( )grigio February 17th
Great tutorial, thanks a lot!
You guys could use this style of tutorial to cover other CMS’ theme making.
( )Rick Blalock February 17th
Some of you guys kill me. JOOMLA’s templating engine is extremely easy to use because you encompass everything into on template for the whole site. The reason why it’s confusing to some dev’s and also to some beginner coders is because JOOMLA is an MVC based CMS….so you can’t code procedurally like in other solutions. And besides that, you CAN put php in the template @Miles Johnson
Here’s a video of converting some markup to a Joomla template (took less than 11 minutes!):
http://beautyindesign.com/screencasts/quick-video-on-converting-a-template-to-joomla-15/
( )Devin Rajaram February 17th
Hey do you mind if I make a screencast of this?
( )Dobra February 17th
Finally!! the tut I was waiting for… and finally!! a tut about joomla!.
( )Ty so much Tarek, a great and well explainded job.
Kevin Quillen February 17th
Wow, and people say Drupal is hard to use? I wouldn’t spend 5 minutes thinking of how to approach our GD to explain how to do this. Doesn’t seem too efficient.
( )CyberFox February 17th
Drupal tuts please!
( )Michael Rice February 17th
Lovely tutorial, lots of images too!
( )Should give some people a good head start on skinning Joomla!
Tarek February 17th
@barry, you are completely right, it is a bad habit that should be avoided.I’ll keep that in mind:)
( )krupa May 22nd
Really nice tutorial.. can you pls become my guide in joomla
( )Brenelz February 17th
Well done… personally have not used Joomla on any clients sites. I have a decent understanding of it, but wouldn’t like to all of a sudden be backed into a corner and not be able to do something in Joomla
( )Tarek February 17th
Thanks for the positive comments.
( )This is indeed a tutorial of the very basics, a starting point for any template. There is a lot more to Joomla templating, but hopefully this will give the people that need it a little kick start.
steak February 17th
I just made a template for my website based on Joomla, it’s not a great job because it uses, oh the horror, tables, but it works fine i think.
( )you can check it at this adress:
http://www.ecoledesurfstjeandeluz.com
it’s for my surf school.
iPad February 17th
Great tutorial, very basic, but well explained.
Get MODx!
( )M.A.Yoosuf February 17th
Nice topic, hope in future i will be able to so some joomla to
@Jeffry, its not nice, at one change to a pay site :S,
( )Designaholic February 17th
Great to see some people advocating Joomla here, and nice one Tarek for writing this tut — it will really help people who are new to Joomla, to understand that it’s actually quite an easy and enjoyable process for the seasoned web designer to knock-up Joomla templates.
I have been using Joomla for a couple of years now, and really enjoy building websites which require the advanced functionality Joomla offers. The re-built v1.5 is so much nicer to use, and far easier to work with!
If anyone is struggling getting to grips with Joomla — hang in there! It does get easier, and after 2-3 sites you will be laughing.
For beginners, I recommend doing a couple of personal projects on a localhost, this helped me alot when it came to building production websites.
( )Corey February 17th
Wow, I didn’t read most comments, but people claiming that Joomla! is hard to make a template for compared to Wordpress!?
You must be kidding me.
Wordpress usually has at least 14 PHP files to make ONE template.
Joomla uses 1 PHP file to make a template.
I use Joomla everyday at work, and I literally create a basic HTML page, and then add a couple tags to make it work with Joomla. It’s as simple as it can get.
( )nwar24 February 17th
Thanks for the tut Tarek, but I have a problem. I created the two files and copy pasted your code into each respectively. Then in the back-end I made the template_tut the default, and then refreshed my site but it is displays the contents of the .php file (just the code) on the page. I am uploaded these files via FTP to my test server. Any thoughts on where I went wrong?
( )MasterDKR February 17th
so can I make a screencast of this?
( )mr-pixel February 17th
I waited for IT! I tried to do themes for J!, but I doesn’t have something good from it… Thanks for TUT!
( )Markus February 17th
The part I’m having difficulties getting a grip on are the more in-depth aspects. I haven’t really found a decent article explaining how to markup the default posting, for instance. It’s kind of frustrating, trying to get a decent, lightweight template going, and having to cope with all that table-junk.
( )John Deszell February 17th
How is the SEO aspects of Joomla compared to the past? I used to hear ugly things about it, primarily with no free extensions for pretty URL’s.
Markus is saying something about table’s, it appears in the tutorial that Joomla doesn’t use tables. I haven’t had a chance to dig into it yet, but will soon.
( )Tarek Farage February 17th
@Markus look up module styles ,there are a few different styles you can give your modules, ie: xhtml,tables, rounded (4 nestled divs) ,none etc…
You add it to your module position by adding style=”style_type” to the end of the jdoc:include.
You can find more info here:
( )http://docs.joomla.org/Standard_module_chrome_styles
Hope this helps
Tarek Farage February 17th
adding to my last comment: You can then use firebug to easily identify what you want to style.
( )DVQ February 17th
Thanks for this
( )Corey February 17th
By default Joomla does use tables to layout most everything.
( )But it comes with the Beez template, which has a folder inside named ‘HTML’.
I just copy that HTML folder into all my templates, b/c it gets rid of all the tables and applies more semantic markup.
Basically with Joomla, you can change the views of any component or module by placing files in that HTML folder within your template folder. They override the default view files.
Max February 17th
I’d have to agree that Joomla is not hard once you understand its basics. I also use it at work, and it works wonders for what we need it for. Its capabilities are endless.
Kudos to Tarek for creating the tutorial. Hopefully there are more to come, if not here on nettuts than on Tarek’s own site!
( )Markus February 17th
@Corey: That’s awesome. Great tip! That just made it a little easier to live with. I guess I’ll just have to dig deeper to learn more. Thanks!
( )Melissa February 17th
Thanks! This was a great starter tutorial for creating a Joomla template. It would have been nice to see the finished product after you added the CSS styling.
I hope there will be a follow-up article which goes the next step further: adding images etc. to make a template that you could actually use on a published site. And some tips about what makes a good template etc.
( )Federico Capoano February 17th
How a Joomla tut here!
This could have been useful for me when i begun..
Anyway guys i would like to tell you that on this link you can find some good joomla templates:
http://www.joomlashow.it/template-joomla/
Thanks for the post again
( )Zen Elements February 17th
Nice write up!
I do find Joomla! is one of those love/hate relationships but I’m on the loving side of it. I’ve built a few of our own templates for clients and when it comes to the UI side for them, they’ve found it quite straight forward in using. In the end, win/win.
Saying that, I also play from time to time with Drupal and not complaining. Just down to personal preference really, I think.
Thanks for sharing, Tarek!
( )Alex | Zen Elements
Jarryd February 17th
First of all, WAMP? Ew, not my preference (I prefer XAMPP) but hey whatever suits you.
“By default Joomla does use tables to layout most everything.
But it comes with the Beez template, which has a folder inside named ‘HTML’.
I just copy that HTML folder into all my templates, b/c it gets rid of all the tables and applies more semantic markup.
Basically with Joomla, you can change the views of any component or module by placing files in that HTML folder within your template folder. They override the default view files.”
I totally agree with this. I have no idea why Joomla 1.5 still runs on tables, when they could just put some basic css in there to style some divs up.
I’ve been using Joomla for over a year now, it’s hard to start off with but it gets very very easy.
This tutorial doesn’t go in to styling your module positions such as ’style=”rounded, xhtml, raw etc” ‘ which just adds extra mark-up to your template so you don’t have to add div containers inside the module itself.
There are some more options with your jdoc:includes as well:
countModules( ‘left’ ) ) { ?>
which would only show a module if it has been published in this position but otherwise would leave nothing, creating a ‘collapsible’ template.
Adding javascript, module overrides, error messages, SEFs and stuff is available but that’s all explained in the documentation!
( )Jarryd February 17th
Woops forgot to convert my tags
Let’s see if this one works
<?php if ( $this->countModules( 'left' ) ) { ?>
( )<jdoc:include type="modules" name="left" />
<?php } ?>
igmuska February 17th
Whoa Joomla! templates rocks…Drupal geeks see if you can top this with your scripting nightmares. By just simply plugging in the Joomla! values into any CSS template makes template design a breeze. Straight out of the box means breaking out of the box looking templates rampant amongst current competitor templates while letting the client decide how to present his content. Joomla!’s templates give familiarity to most clients currently using social networks, just plug in the code and away we go.
( )Lamin Barrow February 17th
Joomla has a terrible folder structure, hideous and grotesque file names and endings, terrible admin interface. Joomla just sucks period.
It is not my intention to sound negative here…
( )Eneza February 17th
This is the meat!!! AT LAST there is someone post this!!!! Thanks man!
( )John Pitchers February 17th
This tutorial only scratches the surface of Joomla templating. Building Joomla templates is all I do. For those of you think that Joomla’s templating system is “lame” really just need to dig a little deeper and spend a little more time learning the framework. It’s an incredible system
( )Chris Peters February 17th
Thanks! You have no idea how long I’ve been trying to look for a KISS breakdown of a simple Joomla! template. I have to use Joomla! everyday; not by choice. So now I don’t have to mess with other’s templates!
( )Jamesso February 17th
@Lamin: That’s your opinion. The people who actually use Joomla know better.
@Jarryd: Joomla uses tables by default but everything can be easily overridden.
@John Deszell: SEO is built into Joomla and couldn’t be easier to use. There are also great free 3rd party extensions that enhance the functionality as well.
( )tartancactus February 18th
Good intro tutorial. Something thats not easy to find
( )mani February 18th
just i what needed,but i need the backend process …..could you please tell me
( )Maxi February 18th
Very cool.thanks. can make a tutorial how to put a forum in joomal I can hear the fierboard but I do not know how if you could tias be very grateful.
( )Kevin Quillen February 18th
“Drupal geeks see if you can top this with your scripting nightmares.”
Not to sound arrogant, but I don’t have ’scripting nightmares’. I sleep quite well in fact.
( )veepee February 18th
how do you take care of the ugly html codes and spacing that joomla outputs?
i’m aware it doesn’t effect anything other than aesthetics when viewing source.
ex. for mainmenu, it spits out everything on one line but i prefer a list to break after each item.
( )Helmut Watterott February 18th
Joomla rules!, Joomla 1.5 even more so than the previous version yet the templating is slightly harder. Been creating templates for 1.0.1 for ages and now for 1.5. This tutorial is well structured and easy to understand.
BTW, you use wordpress for what its designed for and joomla for what it is designed for. You can’t really compare them for the same usage. I think the templating for Joomla is really clever and once done very versetile on complicated sites
( )Bram's February 18th
Tarek !!!!!!! how are you doing dude?
Great tutorial, wel explained!
Looking foreward the next one…
See ya’
Bram
( )Nate February 18th
Now the next tutorial can be converting a already made HTML/CSS template into a Joomla template.
Thanks, Keep going!
( )haiba February 18th
thanks a lot! Perfect for getting started with joomla templates!
( )joombloat February 18th
Could Jooma! be any more bloated? Hmm…wonder why this site doesn’t use it…cuz it sucks.
( )Wassim February 18th
@igmuska:”Drupal geeks see if you can top this with your scripting nightmares”.. Never heard of ZEN?
Same problem everywhere! people talk passionately about something they actually don’t know really. Same as the guy at webdesignerdepot.com who thinks Joomla! is “Evil” without any respect to the hard work the community does.
I just think open source needs more respect.
( )elton February 18th
Thanks for the tut and thanks to the others for the laughs. I love it when everyone jumps on their bandwagons…
…and I’m not telling which one I prefer either ; – )
( )carlosvm February 18th
Gracias…
Thank you…
Merci…
its exactly like I’ve thought it
( )Peal February 19th
Yeah plz more Joomla Tuts !!!!!
( )Tarek Farage February 19th
Hi guys, a friendly reminder to read the title to all the people who say this is only the basics:)
I’m working at a more in depth one at the moment, but obviously anyone that feels they need to share more info on this topic should! The whole point of this site is to share knowledge.
As for the people comparing Joomla to Wordpress, there is a major difference ,but i understand, its trendy to bash Joomla. FYI Joomla is not a blogging platform like Wordpress, it cannot be compared.
@joombloat This site probably doesn’t use it because they don’t need to. Think of community portals, e-commerce, big scale multi user publishing, Recruitment site, then you will find that ol’ bloated Joomla is your friend.
I seriously advise you to just do a quick test install and then go look at some of the extensions you can get for Joomla, i feel like a kid in a toy store when I’m browsing the extension directory over at Joomla.
Thanks all for the positive comments, and here’s hoping that some of you give Joomla a test spin, you might find it will save your butt for a project in the future.
About to test Drupal and installed MODx yesterday. So anyone willing to shoot out a Drupal tut?:P
( )Wazdesign February 19th
Hey…….. Explained welll .. I like it
( )Jl February 19th
Tarek, your explanation, walk through are just perfect! more of those please.
( )Thanks
Daniel GILLES - Créations du Net February 20th
A very nice job Tarek! joomla is a fantastic cms.
( )Tim February 20th
Nice, clear intro tutorial. Thanks Tarek.
@folks ranting: Perhaps you should examine which system is appropriate to which task? Joomla, drupal, wordpress, et al, all have a different focus. All of them have a learning curve, and some are easier for the developer to use, some are easier for the designer to use. That’s the beauty of open source, we have choices that are based on requirements, not cost.
If you’ve got skills and time stop posting drivel and go support your open source product of choice.
( )John Deszell February 20th
I just got done this morning going through this tutorial. I have to say Joomla isn’t to shabby so far. I look forward creating a real template with it. Might use it for an upcoming personal site.
Still am going to play around with Drupal and see how that is as well.
( )intekhab khan February 20th
Thanks for the tutorial
( )aperta February 20th
Keep Up! and Thanks Tarek
( )factotum218 February 21st
A great tut.
Scratching the surface to provide the fundamentals is a great way to go. You have to realize that many people here are going to be foaming at the mouth for more so you better get crackin’ on the nitty gritty of creating your own custom styles and layouts. Looks like some heads might explode if you don’t.
I’ve tinkered with Joomla a bit here and there but find it too hefty for any project I work on. I’m more of a framework fan myself. My assessment so far is Joomla/Mambo/Drupal for portals, news and heavy content. Wordpress for replacing Tripod/Geocities/Myspace/Blogger type atmospheres (a.k.a. the personal site). Keep up the great work! It seems to be in demand.
( )Diego SA February 22nd
Thanks for adding this!
( )Well, maybe it’s not so difficult to create a layout for Joomla.
I read some parts of this tutorial and it’s similar to Wordpress. I mean, the way you create you own layout. Anyway, I’ll try it later!
Wish me luck!
iDevelopThings February 22nd
Thanks for the tutorial dude…!
( )Nils February 23rd
This is great. I was looking for exactly this kind of tutorial. It is not to detailed but has enough information to kick start the development myself.
Thank you very much.
( )Andrew February 24th
Fantastic article cheers
What a relief that the comments revealed a solution to the output of tables… that would have been a deal breaker for me.
Thanks again
( )mojito February 25th
And I’m stuck in installint the template. I get the:
XML Parsing Error at 1:1. Error 4: Empty document
Did everything as said via Ctr+C/Ctr+V method
Doublechecked the coding (UTF-8)
so… what’s the problem?
( )mojito February 25th
OK… I managed to do this somehow.
I can see Joomla right now. It is a little difficult to get used to names, the new site-building process. But Joomla uses html, css mootools… and i see lots of plug-ins alread available. So can’t wait to see more noobs tutorials ;p Yes… theese kind of sites are mostly for noobs. Thanks to this approach it is easier to became an intermediate and start searching knowledge by oneself.
( )fanta February 26th
Great!! and so easy!! Any other tutorials explain creating templates for Joomla in such a difficult way.
When will be the next part of this tutorial ?
( )Calvyn February 28th
let me bookmark your article, need to have a try on next week end
( )Umair cheema March 2nd
Thank You for such a nice tutorial. It was easy to understand and provide a basic idea how things work in Joomla.
( )jason March 6th
Cool!This is so easy to follow for a newbie like me.Thanks a lot!i have already bookmarked the website.
( )Eddie March 7th
You couldn’t pay me to use WAMP on a production box… bad idea.
If you can’t install a simple AMP stack then you’ve no business in web development.
( )Marcos March 7th
is a very easy tutorial and so usefull!! i have never seen someone like this, great contribution Mr Joomlo!!! Grettings from Argentina!!
( )kerco March 12th
Wow! What a find! It’s like a treasure!
Thank you so much Tarek Farage!
( )Roel March 14th
Bookmarked the site already. really awesome post, thanks!
( )Radoslav March 20th
Thanks!
( )Radoslav March 20th
I just want to ask , I got the css and I have made the menu drop down with fireworks becouse i don`t have space for menu.
So my questin is is it possable to make it work , and add more pages on the drop down menu.
Thanks!
( )stephan March 27th
hey man
vet cool artikel
Ga ermee aan de slag
bel binnenkort
mazzel
( )FLiTdistrict April 7th
thanks dude. a big help for a noodb lyk me.
( )Davor April 9th
Nice job man. Short and sweet and very useful. I like how You avoided to install the template through the install interface in Joomla and saved people a lot of time they would probably waste on trying to catch different files and images and write it down in the xml file.
Great tut.
( )Brian Diaz April 12th
For those of you that are thinking of trying Joomla Template Design.
You should check out the m65.net Joomla Template Kit for Dreamweaver.
Product Page
http://www.m65.net/articles-products-the-joomla-template-kit-dreamweaver-joomla-template-kit-1.html
Demo template conversion video.
http://www.m65.net/demovideo/jtk3xdemo.htm
I’m the developer but I thought that some of you would like it.
( )בניית אתרים April 23rd
Great tutorial !!
( )Thanks a lot !
MIKE May 1st
nice job and good work keep it up
( )Mirlan May 4th
Thanks great for your topic!!!
( )I’ve been looking for topics like your’s since i started my tutorials. The best job!!!
umair May 6th
Great tutorials i am going use this tutorials for my new joomla project
( )kafi May 14th
Nice job, I am searching for this things for a very long time…
( )Giyassuddin May 18th
Great tutorial!
it’s very helpful for all who work on joomla.
With the help of this any one can create template.
( )adhe May 20th
how to make this template? i hope you help….. i want to learn about this template….. can you tell me..please…. email me please…..
( )Faisal Basra May 26th
This is awesome tutorial, i was searching before that will guide through the whole beginning to end process. Tarek Farage did the job well.
Now I am able to develop joomla template from myself for complex to simple web development projects.
Thanks once agains.
( )w1sh May 29th
More please. =)
Thanks for getting me started.
( )2munax June 1st
Great job!! World class Thanks!!
I like This type of guide.
help!!
( )i have a web site. Offline.
just need help how can i set my pages in joomla with my style.
i dont wanna use joomla templets.what is the easy way?
chenillen June 1st
Quit cool tutorial. nice job.
( )Serge June 6th
Nice tutorial
I just can’t find my template in the template manager, I am doing something wrong, please help
( )Serge June 6th
lol, forgot to copy/paste the templateDetails.xml part, got it now
( )kunal kagalkar June 9th
thanks its really helpfull for me but i want more code. i want to create my own
( )modules in joomla and positioning modules any where.
can someone give me code for this?
BMD June 16th
Obviously for those who hate on Joomla on this page, I have to ask, why even click the link?
I have been using WordPress for nearly a year and quite happy with the results. I’ve been wanting to learn one of the other big CMS systems, and have watched a bit of videos of both. Thanks to Tarek for the wonderful tutorial and the others who posted links for more screencasts of Joomla!
( )Brian Diaz June 23rd
You should also check out the Media 65 Joomla Template kit extension
for Dreamweaver if you use Dreamweaver it has a two hour video and extension for Dreamweaver 8 and above on MAC and PC.
http://www.m65.net/articles-products-the-joomla-template-kit-dreamweaver-joomla-template-kit-1.html
I’m the developer for this product but I think you will find it useful.
( )WP R June 28th
Great tutorial. I was looking for tutorial like this for a very long time.
( )socheat July 1st
I like this tutorial, but you should have more simple of the catteries after we finished one step
( )http://www.socheatkulab.com
JOOMLA TEMPLATE July 3rd
I dont know much how to apply joomla template but in your website i had learn a lot especially on tutorial how to do it in basic ways…
( )Jonier July 6th
Nice!!
( )Arshak July 6th
Thanks Tarek i hope next tutorial will come very soon because I enjoy this one!!
( )please tell me when You finish it!!
Thanks
Ahad Noor July 10th
I am a beginner in joomla. This is very useful.
( )Clive July 10th
Dude you rock, thanks a million
( )DRA July 16th
Awesome
( )Danc July 18th
Man, like others said, finally we found some tutorial that teaching those who wish to learn Joomla! However, have you consider doing a more details one for beginners like me?
Maybe a few page, like home, about us, products & contact us.
Anyway, your tutorial did help a lot. At least I learnt how to start using Joomla!…
Thanks a million here.
( )Jatinder July 19th
Ya i also looking for same thing which got here..but i like to be know more about how to design complex and powerful designs of joomla.
( )Jatinder July 19th
I have a problem with how to define joomla classes and it’s ID for defining joomla modules or component so can u pls guide for the same..
( )sobean July 20th
Awesome Tutorial… The very Best Turorial for Joomla Beginners….
( )R Paul July 23rd
Its was a good one, I was waiting 4 something like this
( )pathy July 24th
nice hints …i could learn base about joomla and joomla temlates ..i need
( )some more clarification about joomla working with flash templates…
pathy[a]pathinettambadi July 24th
good one i need the explain about keywords included with this tutorial..
( )senthil July 31st
very good i have gained knowledge and i want a good with adding header and footer image and also i have used chronoform and i want to add content can i do that ?
( )Jisha August 3rd
I have been looking for such a tutorial …
( )Thank you !!!!!!!!
diegop August 3rd
thanks allot
( )post more joomla tips please
Chris August 6th
I hope this tutorial can help me, as I need to develop a joomla template for my client. However, I’m stuck on step 1…ish. I’ve downloaded MAMP and installed it on my machine. However, there is no www folder in the directory inside the application (in the applications folder). So I’m not exactly sure where to install Joomla. Any Mac users make it past this step and know what I’m supposed to do?
thanks, chris
( )Chris August 6th
OK Mac users. Pages & Joomla should be installed the in the htdocs folder (which is equivalent to the www folder for WAMP.
( )Letsnurture August 6th
nice tips for those who wants to conquer Joomla from zero!!!!!!
Thanks for your precious contribution…..
( )dragmen August 23rd
What must i do with the index.php in the map WWW ?
( )dragmen August 23rd
Do you this tutorial also in PDF ?
( )gresbee August 24th
hi. i did exactly the same thing – copy and paste the contents in templateDetails.xml and index.php. safe mode is off. other templates work except this one. what did i miss? thanks
( )gresbee August 24th
hi. i did exactly the same thing – copy and paste the contents in templateDetails.xml and index.php. safe mode is off. other templates work except this one. what did i miss?
( )the template appears in the template manager,however you cannot choose it as the default template. and when i choose to view it,it says “Template %s not found”. thanks
wpt August 25th
Hi, nice tutorial. Anyway I’ve faced some problems with warnings. For example when previed the site for the first time in the place of “Home” in the Main manu i get: “Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in C:\wamp\www\joomla\libraries\joomla\cache\handler\callback.php on line 99″ What does this means and what do I need to do to get it right ?
Thankss for any reply!!
( )Mr.AHMED August 27th
i really looking for this long time ago and im happy cos i made my frst template under ur help
( )Anton Punith August 27th
Tarek, I’m new to joomla but with this article I think I can understand Joomla Template Making a lot more easier than any other tutorial(even simpler than docs)
( )zoli September 16th
What is “user1….user4″?
( )morro September 23rd
Большое спасибо, не ожидал что так всё просто. Вы мне очень помогли. Ещё раз спасибо от всей человеческой души. Я не мог догадаться что можно так писать код.
( )kuldeep verma September 25th
thanks for give the right direction to create a basic template in joomla for newly developer programmer….
( )Gary September 27th
Followed the directions to the “T” and ending up getting this error in the Template Manager over and over again:
XML Parsing Error at 32:11. Error 76: Mismatched tag
I don’t know what is going on here. Any ideas?
( )Gary September 27th
Scratch this. I already found out why, LOL! Totally my mistake. Note to self: Spelling correctly is good
( )sheryl October 6th
fantastic tutorial, exactly what i needed to understand the steps!
Thanks for taking the time!
( )Tohmas October 12th
very good information to start creating a template!
( )Helder Monteiro October 15th
awesome !
( )love October 15th
really great inormation. Thank you so very much:)
just let love be
( )Jonathan October 18th
awesome post, keep going
( )gaurav October 21st
great…………………..
( )Niraj Thapa October 23rd
Really great tutorials, love this kinds of tutorials, hope u keep going with more tutorials. Thank you
( )DevEGG October 24th
Joomla. hmmmm….
( )technicalrob October 31st
Perfect. Thank you for this. Would love to see some more about Joomla!
( )This is why Envato Rocks!
satya November 3rd
Thanks,I got more information about joomla .
( )ardyonline November 11th
way cool man! this one really helps!
simple yet very effective for us developers.
I’m looking for this tuts long time ago!
Im so happy!
thumbs up netTuts!
( )pankhuri November 16th
thanks a lot! will be making my own template pretty soon now…
( )