This is Part 2 of the Joomla Template Tutorial series. Part 1 is here. Part 3 is here.
By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:
3. Identify where you want to place your Joomla elements
Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.
Here is mine:
As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.
And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.
A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.
A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.
4. Create the directory structure
In your computer, create the directory structure below:
- Create a directory called template_name (or any name you want). Don’t put spaces.
- Under template_name, create 2 folders: css and images.
This is where you will be saving your template files, which is explained in the next section.
5. Code the HTML version of your mockup.
It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.
Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.
Include also your logo & other graphics you have decided should be part of your template.
For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.
Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:
Folder | Save what files |
---|---|
template_name | template.html (which will be renamed later on to index.php) |
template_name/images | All images |
template_name/css | CSS file (template_css.css) |
You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.
Remember to save your template_css.css file in the proper folder: /template_name/css
6. Rename your HTML mockup to index.php
Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.
7. Enter the code for the Joomla elements
It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.
Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.
Joomla Element | Code |
---|---|
Main Body | <?php mosMainBody(); ?> |
Module | <?php mosLoadModules ( ‘module_name’ ); ?>
Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?> |
Date | <?php echo mosCurrentDate(); ?> |
Footer | <?php include_once( $GLOBALS[‘mosConfig_absolute_path’] . ‘/includes/footer.php’ ); ?> |
Pathway | <?php mosPathWay(); ?> |
Site Name | <?php echo $mosConfig_sitename; ?> |
For example, if you want to put the Main Body in the center table, then you have to put the code <?php mosMainBody(); ?> inside that table.
This ends Part 2 of the Joomla Template Tutorial. Click here for Part 3
Chette – you are [b]very[/b] talented and generous! This is needed and very much appreciated! Thanks for sharing! :)
Ever thought of publishing a book? You should seriously think about it.
Thanks for this tutorial. Very well written, excellent approach, superb content flow.
Subscribed to your feeds. Don’t want to miss Part 3.
You guys are sweet :) One more part to go. Hopefully I can squeeze it within 800 words. There’s just so many things I wanna say!
Thanks chette. I finally understand how Joomla templates work.
Thanks Chette. Superb work. Is the first tutorial, thats helps me with joomla.
Thanks guys! Part 3 will be coming in later than I expected. Didn’t have a lot of time this week.
Well done and easy to understand! This will definitely help my learning joomla. Thank you for your time and generosity!
Thanks for Part 2
Awesome article
Submitted into queue @ tweako.com
( http://www.tweako.com )
I have been scrounging for helpful tutorials for Joomla for months now. Thank you so much for this. It is so straight forward and easy to follow. You’ve got another regular reader.
Thank you,
If we could only move forward in time to next week
hi chette,
I am new to Content Management and your guide was very helpfull for me to understand the directory structure and how to install the templates, I am new to PHP, can u suggest me any tutorial for me to create a template.
a newbie question: can i put a Module into the Main Body?
if yes, how?
thanx
Great tutorial!
hi Chette Soriano
in the index.php i have this line:
so I see only the date –
i wish to see time too…
how can i do this
(and why i can not put for example things in the right module – I will not be able to see it)
kind regards from switzerland
gabriel
this line: :-)
sorry somehow this line will not be send
echo mosCurrentDate()
[b]@gabriel:[/b]
Try using this
[quote]mosFormatDate(date,strftime,offset)[/quote]
Replace strftime with the values found here: http://www.php.net/strftime
Hi, I’ve been waiting since April for part 3 LOL! When on earth is it coming (you said next WEEK)?
Thanks.
[b]@T.C.:[/b] Part 3 has been up for ages :) Here’s the link: [url=http://www.chette.com/main/content/view/122/1/]Part 3 of the Joomla Template Tutorial[/url]
I have been looking for tutorial on creating a template for a long time. BTW you are a great writer. You make this technically topic sounds fun and easy to learn. Great job!
Great tutorial! Thanks so much for sharing, Chette! ;D
Thanks for the tutorial. It really helped me a lot… I’m maintaining a website for our Local Government and i like to change the look of the site… You’re so generous… Hope to hear from you soon… Thanks again…
For me it isn’t clear where and what Joomla codes I should paste in Body, modules, how to define user places and etc.
p.S.
I created design (mocup, as you call) and it is quite complicated; therefore I have problems how to define all Joomla codes
Some times ago I had tutorial for Dreamweawer with its php extensions and it was easy to create template
i’m use joomla in my blog, thanks for review
Excellent tutorial!! Chette. Thank you. May you live a thousand years.
thank you for good joomla hints
kidstuff
css web template page (example) — http://www.css-lessons.ucoz.com/css-template-page.htm
hallo alle wie gest euch ??????????
dear,..chette!
i hope you don’t mind to send me via e-mail about tutorial joomla from begining till the end.
thanks,
yours fun.
the tutorial appeared so interactive to me. feeling ko hands-on mo ko tinuturuan. haha. anyway, great job!
more! :p
[b]Hi Ms. Chette this is really helpful sa lahat ng tutorials na binasa ko no offense sa iba.. Dito ko lang talaga naintindihan Thank YOU [/b]
Hi Chette, wow thanks for your tutorial it really solves my problem.. hats off
Thanks! Your tutorial really is helpfull. ;)
Thanks so much for this information. A fresh start for new joomla beginner like me.
hi?can u pls send me some tutorails??tnx,.God bless you
more powers!!!
wow dood. This page cleared up all my problems with wrapping my head around templates. I have bene through so many sites and this summed it up.
Maybe you will have thought-about including additional video clips about this subject to your blog posts to carry the guests additional entertained? I imply I just learn by means of the entire article of yours and it had been completely good quality but since I’m more of a visible learner,I found that to be extra helpful well let me know how it seems! I get pleasure from what you guys are always up too. Such knowledgeable job and reporting! Sustain the great works guys I’ve added you guys to my blogroll. It is a good article thanks for sharing this informative information.. I will go to your weblog repeatedly for some newest post.