Flash and Joomla News by Eyezberg

Joomla is a CMS, or Content Management System.

This means, simplified, that it is coded to allow for easy setup of the site, content addition and editing, publishing etc..
This content will consist mostly of text, and some media such as images, video, pdf and other files.

What's all this got to do with templates?

Well, all this content will have to be displayed to your visitors somehow! You could of course just have any old page with a block of text, and a few images in there, and then a list of links.
But this CMS is not only about managing your content, it also allows you to format and present it in nice ways very easily by selecting a template.

Templates are in fact the "presentation layer" around your content, they add images around the text for borders and buttons, the CSS file is used to style all the various parts of your text: headers, links, titles, buttons, input fields.. you name it, you got it.

A template consists generally of

1. an images folder with the various presentation elements it uses;
   
2. sometimes a thumbnail to present the templates look,
   
3. a CSS file (style sheet) -sometimes more than one for print, screen, different text sizes etc.., 
   
4. and the main "workhorse", the index.php file in the template folder.

The Images Folder

This folder holds the various "decorative" parts of your template. Generally, the designer creates a template with his graphics software as one screen-sized image. This image is then sliced into small parts, each optimized for fast loading, and exported with the corresponding tables or divsholding the image parts.

The thumbnail

It gets used by the template chooser module included with Joomla (by default unpublished), which allows each user to select his prefered template amongst the ones you would have installed, and provides a small preview of the achieved look.. 

The CSS file(s)

A very important part in modern webdesign; everything is moving away from the mix of presentation and markup found in most older sites, towards a standards compliant code. Not easy to get right due to browser bugs and inconsistencies. Too vast a topic to even scratc the surface of here.
The main CSS file usually has the same name for all templates: template_css.css. Additional stylesheets, as already mentioned, can be used to remove page backgrounds for printing, changing colors or header images for different parts of your site, allow the user to select different text sizes on so on and so forth..

 The index.php file

That's where it's at! Here is where all the magic happens!
This file is basically a normal HTML file, with bits of PHP interspersed throughout to integrate the content provided by the CMS.

These bits of PHP provide various positions to load modules into, and one position for the main content  (mainbody).

Joomla contains by default 26 named positions (plus one for debug messages) to load modules into.

Some of these are used only by the admin template, such as "cpanel, toolbar etc..
Others are commonly used in most template desings, such as "left, right, top, bottom, user1" etc

Now, what is a bit weird is that these position names do not mean anything, and are useful only in combination with a template that makes room for them! Going to Site => Template Manager => Module Positions , you'll notice the relation between the positions and the template. This screen allows you to rename any position into anything you like, like mom, daddy, sister, doggy, whatever really!

The names you select here will show up in the "position" drop-down when you edit a module, just as you named them.

But if you want the modules assigned to these positions to show up in your template, it has to provide a space for them, and load them into that space! You can assign 10 modules to "left" position, if the template doesn't use a call somewhere to load modules into a position called "left", they simply won't show up! Hope this makes this template - modules - position thing a bit clearer!?

Of course, renaming the standard positions to something meaningless would be a bit stupid, right? It's much easier to have a "left" position, and a space in your template to the left to load the assigned modules there, than a position "schmurz" somewhere in the center  of the template.. right? :D

To sum this up:

1. a space in your template loading a certain module "position" will load ALL modules assigned in the admin interface to this "position" and display them, one after the other! but:
   
2. no position created in the template, and no matter how many and or which module(s) you assign to that position, they won't be displayed!
3. a "position" is really just a word, it's denomination doesn't mean that's where it'll be showing in the final layout.. where would that be for "user5" for example?

Maybe you could think of your template as one of those modular cutlery drawers, where you can move around separators to place your knives to the left, forks in the center, spoons to the right, coffee spoons in a smaller compartment, longer tools up top etc.. just as you want them. The drawer and the separator elements are the template, the cutlery is the content filled in by Joomla into the appropriate spots.

First course finished, enjoy the food. 

Comments (3) >>

Show/Hide comments

wp1 said:

Hi Eyezberg Thank you for this tutorial. If I wanted to change the name of a template I customized for a particular site, could I just do a " Find and Replce"? In other words, if a template is call the "happy" Template and I want to call it the "funny" Template, could I just do a "Find" - happy - and "Replace" with - funny - in the (1) index.html (2) XML file Of course, I would give credit to the original developer of the theme. It would really be great to have a tutorial about changing a templates name and version number. Thanks in advance for your reply. WP1

April 03, 2006

shandman said:

All of these variables can be found in the "templateDetails.xml" file in the template folder. Just open it up with any text editor and make the required changes (providing credit to the original designer of course). Template_Name Version 1.0 If you change the template name that may require changes in the index.php and css files if their are links which include the exact template name rather than its variable title.

July 25, 2006

matty said:

Hurray - a Joomla help site written for people who need help not geeks. So nice to read things in an understandable, humanistic way. You never know, it could catch on (but never at Joomla itself eh!)

April 03, 2008 | url

Write comment

Show/Hide comment form

Name

Email

Website

Title

Comment

Add Comment