How to create a joomla template? (part two)

In the first part of the article on the creation of a Joomla template, we left with a template draft. We saw how to set the work and how to create and position the modules. Now we’re gonna act on the style sheet to model our template.

At the end of this article you will be capable to create the template from scratch for your website managed by Joomla.

A look at security: index.html in the folders

Before starting I got aware that I should have explained something in the previous article. It’s simple but important. In every folder of the template (and not only) it’s a standard procedure to insert an empty file called index.html. In this way, whatever is the configuration of the server and of the chmod, it won’t be possible to read the content of the folder.

In fact, when we are positioned in a folder, Apache as default loads the index.html file or index.php. If these files are not present, the contents of the directory might be shown. I say might since the direct display of the contents of the folder can be made impossible with a .htaccess file (a kind of file which is used to modify the Apache settings).

I believe that in the future I will write an article on the various possible uses of this extremely important file. Or it is possible to set the right chmod. For those who don’t know, they are numerical codes we can assign to files and folders by means of ftp client and which determine the prerogatives of reading/writing/execution. These would be the safest procedures, but since Joomla is used also by many people who don’t have the skills to operate this kind of configuration, the presence of an index.html file represents a basis of protection, albeit minimal.

Now we can start.

1. How to set the header of our theme?

We start by inserting a background image to the header (960 x 250) and removing the edge which is no longer needed.

#header{
    width: 960px;
    height: 250px;
    margin-bottom: 5px;
    background-image: url(../images/header_bg.png);
    background-repeat: no-repeat;
}

Now in the index.php file we can insert a title or also take directly the title set in the global configuration of the CMS using the getCfg method and passing sitename as a parameter in this way:

<div id="header">
    <div id="title">
    <h1><?php echo $mainframe->getCfg('sitename'); ?></h1>
    </div>
</div>

The getCfg method belongs to the JApplication class and can restore the value of the configuration parameters of Joomla (global configuration). In the documentation you can find the parameter list that can be passed to this method. Therefore, if for example we wanted to know how is the database which contains the Joomla tables called we are going to proceed as follows:

echo $mainframe->getCfg('db');

we define now the style sheet title:

#title h1{
    padding-left: 30px;
    padding-top: 50px;
    font-size: 25px;
    float: left;
}

How to add a research module?

Now let’s do another thing, we insert a research module in our website and, as you can often see, we position it in the header.

First we insert a new element in the header; do you recall the position of “user1″ which we haven’t used yet? It will be needed just for this.

<div id="header">
    <div id="title">
    <h1><?php echo $mainframe->getCfg('sitename'); ?></h1>
    </div>

    <div id="input_search">
    <jdoc:include type="modules" name="user1" style="" />
    </div>
</div>

As you can see inside the new element we have declared the tag to include the modules positioned in user1.

Therefore we are going to implement the research module. Enough going to Extensions -> Module management -> new in the administration panel and thus select the “search” module.

In the next configuration screen we insert the title and position the module in user1.

Now, through the style sheet, we position the research motor down on the right of our header:

#input_search{
    float: right;
    width:200px;
    margin-right: 10px;
    margin-top: 220px;
}

And now give a little bit of form to the input field:

#input_search input{
    width: 200px;
    border: 1px solid navy;
    color: gray;
    background-color: #F2FFFF;
}

At this point the result will be more or less this:

As you can see, in a few passages we have implemented a research module.

2. How to set the navigation?

Now we are going to structure the navigation. It is very important at this point to display the html produced to acquire the necessary information. Let’s see then how Joomla has populated our div navigation:

<div id="navigation">
    <ul>
        <li id="current" class="active item11"><a href="http://localhost/cms/"><span>HOME</span></a></li>
        <li><a href="/cms/index.php/page-1"><span>Page 1</span></a></li>
        <li><a href="/cms/index.php/page-2"><span>Page 2</span></a></li>
        <li><a href="/cms/index.php/page-3"><span>Page 3</span></a></li>
    </ul>
</div>

In order to represent the menu a list is generated. You will also notice that the “active” class is added to the current page which we are going to use to mark the page currently displayed in the navigation.

Improving the aesthetic aspect of our navigation

As a first thing we eliminate the suspension points from the list and give a minor padding to the one set as default for the lists.

#navigation ul{
    list-style-type: none;
    padding-left: 5px;
}

And now we go on to modify the aspect of the menu items. We’ll give it a grey background and we will separate them with a dashed line:

#navigation li a:link, #navigation li a:visited{
    padding: 10px;
    display: block;
    color: #523F36;
    font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    width:150px;
    background-color: #E2DEE0;
    border-bottom: 1px dashed gray;
    text-decoration: none;
}

Thus the hover effect, with a lighter grey:

#navigation li a:hover{
    background-color: #E6E6E6;
}

Next we assign to the active page the same background of the hover effect, using the “active” class we saw above:

#navigation li.active a{
    background-color: #E6E6E6;
}

Last touches to the navigation

We requested the dashed edge in the bottom of elements. But, so that it’s correct, we want that the first element of the list, besides having the edge on the bottom, it has got it on top also. We’re gonna use the item11 class which is assigned to the first element of a menu (as it’s possible to see in the html product), thus:

#navigation li.item11 a{
    border-top: 1px dashed gray;
}

Now we remove the edge of the navigation element.

And here’s the result:

3. How to set the content area?

Let’s move on now to the section relative to the content. We start by redefining the content style by eliminating the edge and modifying the character and color:

#content{
    width: 746px;
    margin-left: 10px;
    font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: gray;
    float: right;
    margin-bottom: 5px;
}

Let’s go now to the administration panel and remove the print icons, pdf and mail, as well as the details of the publication (author, release date, etc) and keep only the title .

In order to achieve this enough going to “article management” and click on “preferences“. Here we can set the global preferences, valid for all articles if not otherwise specified.

Let’s give now another style to the title. In order to do that we go once more to see in the generated code how the title is represented.

<div id="content">
    <table class="contentpaneopen">
         <tbody>
             <tr>
                 <td class="contentheading" width="100%">
                 Content 1
                 </td>
             </tr>
        </tbody>
    </table>

As you can see it’s a cell with contentheading class.

Thus let’s define its style:

#content td.contentheading{
    font-size: 20px;
    font-weight: bold;
}

This is the result:

4. How to set the footer?

Let’s move on to the footer. We can decide, as we are dealing with a static content, to directly write the text in the template file (index.php) or insert a “personalized HTML” module so that you can modify it from the administrative panel. It doesn’t make any difference. In this example we’re going to write it directly on the template.

Remove now the edge and height from the footer and define it in the style in this way:

#footer{
    width: 960px;
    background-color: #4682B4;
    clear: both;
    text-align: center;
    color: White;
    font-size: 10px;
    padding: 10px;
}

The result will be the one shown in the following image

5. The last touches

Now let’s do a little trimming. Eliminate the margins from the body and give a very light blue color so that the central area stands out; modify the container as well with a white background and take the width to 960px.

body{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin:0px;
    background-color: #ECF3F9;
}

#container{
    margin: 0px auto;
    width: 960px;
    background-color: white;
}

Now we try to make the navigation horizontally aligned with the text content,

#navigation{
    padding-top:80px;
    width: 200px;
    float: left;
}

And here’s the final result:

Nothing special (on the contrary!), it was important to grasp the mechanism and I hope you have understood it. Obviously there’s still something to do. For example, we have implemented the research module but if you try doing a research you will become aware that the results don’t have the style in line with the website. Going to analyze the generated source, it won’t be difficult for you to spot the classes on which to act on the style sheet to make the result correct.

Although at this point you should be capable of doing it, I have foreseen a supplementary article in which I will show how to “import” an existing XHTML layout in Joomla. To be specific I am going to use the layout designed by Sara in her recent article “How to create a website in corporate/business style?“.

In the end, YIW will release the Joomla corporate/businness template as a free resource ready for installation.

Conclusions

We have thus arrived at the end of these two articles which provide you with the basis for working on Joomla templates. A doubt remains, when is it convenient to use a CMS? Only for websites of certain dimensions? If yes, when does the use of a CMS for managing a website starts getting interesting?

Personally, and it’s my opinion, whenever possible ( if I don’t have problems of space and services) prefer to manage the website by means of a CMS.

The realization of the layout, as we have seen, requires a slightly major effort which is widely compensated by the innumerable advantages of using a structured platform.

And you what do you think? What kind of experience have you had on the matter?



*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia