Joomla Templates - RokWebify Tutorials

The same module style for every position can become teadious. That is why Joomla! allows for individual module styling in the form of the module class suffix. In this case, we are going to use hilites. The hilites themselves will consist of four images to contruct the stylised module.

Open your index.php file. This should be contained within the rt_rokwebify directory. A php/html specific editor such as Adobe Dreamweaver or TextMate should be used to ensure that the code is not corrupted
In this scenario, we are going to add hilites to the positions, User 1 and User 2. The techniques learnt, can be adapted to modify your entire template with module class suffix and any other template. Note the following is not required for hilites that use less than 2 images
Now that you have opened your index.php. You must locate the following
```
<?php if(mosCountModules('user1')) : ?>

<td class="usermodules">

<?php mosLoadModules('user1', -2); ?>

</td>

<?php endif; ?>

<?php if(mosCountModules('user2')) : ?>

<td class="usermodules">

<?php mosLoadModules('user2', -2); ?>

</td>

<?php endif; ?>
```
This area of the index.php is responsible for loading and controlling the user module position. The following will break down each line to further your understanding of how the template operates.

<?php if(mosCountModules('user1')) : ?> is a php statement that allows for collapsable modules. Therefore, if there is no module in the user1 position, then the column will not load such as, if you wanted a full width wrapper.

<td class="usermodules"> defines the column in which the position is located. The 'class="usermodules"' denotes which are in the template_css.css controls the style of the colum.

<?php mosLoadModules('user1', -2); ?> is another php statement which loads the module itself. The name inside the ' ' brackets is the module position name that Joomla! shall recognise. The number determines how many div's are loaded for the module position, which allows for complex hilite features.

</div> </td> <?php endif; ?> are all closing tabs

The number 2 is what we shall change to create our complex hilites. Change it to a 3, as in example below.
```
<?php if(mosCountModules('user1')) : ?>

<td class="usermodules">

<?php mosLoadModules('user1', -3); ?>

</td>

<?php endif; ?>

<?php if(mosCountModules('user2')) : ?>

<td class="usermodules">

<?php mosLoadModules('user2', -3); ?>

</td>

<?php endif; ?>
```

We must add an extra few lines of code into the index.php so the website will load another CSS sheet that we shall create at a later stage.
Locate the following, which is responsible for loading template_css.css.

<link href="<?php echo 
$mosConfig_live_site;?>

/templates/<?php echo 
$mainframe->getTemplate(); ?>

/css/template_css.css" 
rel="stylesheet" type="text/css" /

Below the above, add the following, which is responsible for loading the style.css.

<link href="<?php echo 
$mosConfig_live_site;?>

/templates/<?php echo 
$mainframe->getTemplate(); ?>

/css/style.css" rel="stylesheet" 
type="text/css" /

Open up template_css.css which should be located within the rt_rokwebify/css directory

Add the following lines of code to the end of the style sheet

CSS

div.module-hilite {

margin: 1px 0;

line-height: 100%;

height: auto;

}

div.module-hilite div div div {

padding: 15px 15px;

}

Create a new CSS file called style.css . In this newly created file, add the following

div.module-hilite {

background: url(../images/style/
 module-1-tr.png)
 100% 0 no-repeat;

}


div.module-hilite div {

background: url(../images/style/

module-1-tl.png)

0 0 no-repeat;

}

div.module-hilite div div {

background: url(../images/style/

module-1-br.png)

100% 100% no-repeat;

}

div.module-hilite div div div {

background: url(../images/style/

module-1-bl.png) 

0 100% no-repeat;

}
div.module-hilite h3 {

color: #CCCCCC;

border-bottom: 4px solid #DBDBDB;

}
div.module-hilite h3 {

color: #333;

}

Due to the nature of IE6, you need to add the following to template_ie6.css

div.module-hilite {
height:1%;
}

Login to your web server and navigate to rt_rokwebify/images In this images directory, create a new folder called style.

This folder is where our images for the hilites will be situated.

Whilst you have entered your web server via FTP, transfer style.css into the /css directory
We must now create the images to act as our hilites. This is best done in Fireworks, the image editing software from Adobe. In the opened software, create a rounded rectangle with either solid background, or gradient with the colour variation of your choice. A gradient is better for a more dynamic appearance. Apply a shadow or glow to the edges of the rounded shape. We must now divide the rectangular body into four sections.
The first slice will be called module-1-tr.png (tr meaning top right). With this slice, you shall incorporate the entire mainbody of the rounded object as well top right area of the body.
The second slice shall be called module-1-br.png (br meaning bottom right). With this slice, you will select the bottom right corner of the shape which was missed by the top right slice.
The third slice shall be called module-1-bl.png (bl meaning bottom left). With this slice, you will select the bottom left corner of the shape which was missed by the top right slice.
The final slice shall be called module-1-tl.png (tl meaning top left). With this slice, you will select the top left corner of the shape which was missed by the top right slice.
Ensure that module-1-tl.png, module-1-bl.png, module-1-br.png are all of equal size, just a differening orientation.

Export these slices and upload to rt_rokwebify/images/style.

Download the 4 hilite image elements used in this tutorial
Now that the hilites have been created, we must then configure the modules to load them. Scroll over the Modules item on the top taskbar in your Joomla! administration area, follow the drop down menu to Site Modules and select.

You have now entered the Control Panel for Site Modules in your Joomla! administration area. Select a module in which you want to hilite, in this example, it must be either a module in User 1 or User 2.
In your module of choice, scroll down to parameters. You should then see Module Class Suffix. In the text box to the immediate right of this, enter -hilite

Set all the other paramters of the module as you would normally and save.
Once you enter the front page of you website, you should now see the module with the hilite