How to create a joomla template?

26/01/2012 powered_by

In this article we will lay the groundwork for understanding the necessary techniques for making a joomla template, the famous CMS. Have you already tried but you gave up quick? You understood nothing while browsing the folders? Do you think it’s difficult?

You’re wrong, enough to understand the method. You don’t believe me?

Before starting let’s see which are the advantages and disadvantages of using a cms for the development of a website.

Which are the disadvantages of using a CMS?

A large quantity of codes and queries has to be executed even though the website is very light. This reduces performances which, on a traditional website, would undoubtedly be superior.
A joomla installation occupies more than 20Mb.
We’ll be tied to a conceptual paradigm (this is not necessarily a disadvantage). A high level of structuring, like in every cms, binds us to a precise methodology. And this not only in the organization of the website itself, but also in the extension of its features. Thus, we can barely reuse for example a library which we had written on another occasion without having to partially or completely rearrange it.

Which are the advantages of using a CMS in the development of a website?

Let us now list the main advantages which in fact are many:

Structured and standardized content management. Thus we won’t have to be afraid of even a strong growth of the website.
Simplified management and maintenance. The modification of logic, organization or navigation will be easy and fast operations.
Immediate availability of services and features. In a traditional website, implementing a reserved area requires hard work. If we use a CMS the entire chain which includes registration, registration verification, user management and authentication is already available. Or let’s imagine we are being asked to implement an internal search engine for a traditional website. It’s not impossible, but the results are not excellent and it will take time. If we use a CMS instead, it’ll take just one minute.

The infinity of existing modules for joomla will enable you to always find an answer for the most diverse needs.

Is it possible to make an aesthetically attractive template with Joomla?

I want to make clear that with Joomla it is possible to make every type of template. I say it for those who are convinced that the use of a CMS brings limitations to creativity. Well, that’s not true as it will come out further on.

Thus, we start producing our template, it will be very simple (header, navigation on the left, contents on the right, footer); it won’t be a captivating layout, what we are interested in is understanding the technique.

I begin assuming that you have a clean joomla installation, with no data.

1. File and folder structure

The folder of a Joomla template can contain various files and folders, but as a minimum it should be structured as follows (use the same names, they’re obligatory).

The template folder – whose name will be the name of the template itself – (in our case we will dub the template “inspiration” so the folder also will bear this name). It contains:

A file named “index.php“.
A file named “templateDetails.xml“.
A folder called “css” which is going to contain the style sheet named “template.css“.
A folder named “images“.

Thus we create the file and folder structure inside Joomla’s “template” directory. Our template, as we said, will be called “inspiration“.

struttura delle cartelle

2. The templateDetails.xml file

This file can contain many data relative to the template, we will insert only a few, the obligatory ones. Our file will be composed like this:

?

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">

 <name>inspiration</name>

 <version>1.0.0</version>

 <creationDate>03/11/10</creationDate>

 <author>Maurizio Tarchini</author>

 <authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.</authorEmail>

 <authorUrl>http://www.mtxweb.ch</authorUrl>

 <copyright></copyright>

 <license>GNU/GPL version 2</license>

 <description>Template description</description>

 <positions>

 <position>left</position>

 <position>user1</position>

 </positions>

</install>

As you can see, the first part contains general information relative to the template, some of which can be found on the choice screen. It is important that the value of “name” is equal to the folder name.

Subsequently, we find another important element, that is the positions. In this section we define the available positions where to insert the various modules. Our template will be needing solely the “left” position for inserting the navigation and “user1″ which we are going to explain further on for what we’ll be using it. This list can be found in the administrative panel when we will have to choose where to position a module.

module

3. The index.php file

This file is the heart of the template, we’ll see how to proceed implementing it. Meanwhile, let’s take a look at the markup and make comments afterward.

?

<!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 href="templates/system/css/general.css" rel="stylesheet" type="text/css" />

 <link href="templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" />

</head>

<body>

 <div id="container">

 <div id="header">

 </div>

 <div id="navigation">

 </div>

 <div id="content">

 </div>

 <div id="footer">

 </div>

 </div>

</body>

</html>

After the declaration of the doctype we go on to declare the html and dynamically insert the language through the “language” public property which will restore the language set in the administration panel.

Now we encounter for the first time a particular tag, that is

?

<jdoc:include …>

This type of tag is used by the joomla engine to locate inside the template which are the points in which it has to insert something. In our case

?

<jdoc:include type="head" />

it signals the point in which to include the dynamic headers, which might be for example the meta tags and other things which, depending on the configuration and required modules, can be inserted or not in the header.

Subsequently we attach to the document the style sheet named “general.css” which will obviously contain some general parameters which can be redefined anyway if there’s the need.

After that we attach the style sheet of our template. Also here we make use of the “template” public property which restores the name of the template set.

At this point there’s nothing left but to set the body. As you can see, we have a containing element(#container) which will serve to center the layout, inside it we have the elements which will contain the header, the navigation, the content and in the end the footer.

At this point we have to start defining the style.

4. The template.css file

Through this file we will now give shape to our layout. We start from some small specifications on the body and subsequently we center the container.

?

body{

 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

 font-size: 11px;

 background-color: White;

}

#container {

 margin: 0px auto;

 width: 962px;

}

At this point we define the header:

?

#header{

 width: 960px;

 height: 250px;

 border: 1px solid gray;

 margin-bottom: 5px;

}

The navigation and contents; notice that I will define them in height also. This solely for being able to see them with an empty layout. As soon as we insert the contents the “height” property should be removed from these two elements so that they can be adapted.

?

#navigation{

 width: 200px;

 height: 400px;

 border: 1px solid gray;

 float: left;

 margin-bottom: 5px;

}

#content{

 width: 746px;

 margin-left: 10px;

 height: 400px;

 border: 1px solid gray;

 float: right;

 margin-bottom: 5px;

}

And finally the footer

?

#footer{

 width: 960px;

 height: 100px;

 border: 1px solid gray;

 clear: both;

}

At this point we can set our template as predefined by the administrative panel and display the preview which will bring a similar result.

struttura del template

5. Inserting contents

Well, now we can start inserting some articles in our CMS. I assume that if you are reading this article you use Joomla and thus you know how to do it, but anyway, in short:

create a section and a category of your choice and insert 4 or 5 articles. I have named them home, content 1, content 2 and content 3.
Go to “menu”->”menu management” and add a menu indicating a type and a title.

Now let’s pass to the creation of the module:

Go to “extensions” -> “Module management” and click on new.
Choose menu and click on next.
Position the menu on “left” and tie it, “in parameter module” to the name of the menu previously created.

Now in “menu” enter the menu created and add the items by clicking on “new” and choosing “articles”->”aspect article”, and subsequently defining (in “standard parameters”) which article to show.

Having done that, do not forget, always in “menu”, to indicate the predefined page (the one that will appear as entry page to the website, otherwise everything will get blocked).

Ok, and now enough inserting this tag in the “navigation” div:

?

<div id="navigation">

 <jdoc:include type="modules" name="left" style="" />

</div>

As you can see the type=”modules” is there to indicate that one or two modules will be loaded; with the name attribute we are letting know that in that point we want the modules inserted in the “left” position loaded.

The tag for the contents is like this instead:

?

<div id="content">

 <jdoc:include type="component" />

</div>

Simply type=”component” to indicate that we want the content in that spot.

Remove now the height attributes of navigation and style sheet content and finally reload the preview.

Here’s the result:

img_3_en

6. Conclusion

Until now we saw the basic structure of the template, that is the minimum files that are required and their usefulness. We subsequently intervened on the style sheet to position the elements and we saw how to indicate, in the template file, the insertion points of the outputs. Like I said, it’s not that difficult.

In the next article we will continue just where we left and we will see how to intervene on the style sheet in order to give shape to the template, that now is only a frame. We’ll see moreover, a very important aspect, how to act on dynamic outputs like for example the navigation.

Blog - Daily Thoughts