Joomla Template Tutorials - Module Hilites

Joomla Template Module Hilites

What is a Module

Modules are small building blocks/elements that make up your site. They usage is generally to display small snippets of information, whether than be latest content items or a slideshow of sorts.

What is a Module Hilite/Class Suffix

A module hilite or module class suffix are the terms giving to the ability to style your modules individually and independently. A Joomla template has stylesheets/css files in which a part of these stylesheets are devoted to the layout and styling on modules. This styling applies to all modules using that template. However, a hilite is an addition to the general module styling of a template to make it unique. This could range from just changing the colour of the links in the module to applying custom background images, colours, font-styles.

The uses of module hilites go beyond the design level with colours, images and other related elements. The structure or layout can also be controlled to the desired effect. The best example for this is a slideshow, such as Rokslideshow from RocketWerx. You may wish for the module to have no margins, paddings and borders so it sits flush in its position to a great effect. However, what if the template has margins and paddings set for its modules?; the hilite will overrite this if set in the stylesheets.

The Module code

The code of the module or the HTML output of the module is not always the same. This is dictated by settings in the template's index.php. There are 5 settings to choose from. A brief outline of the different module settings can be seen below with top as our example:

Module Style 0
In the template's index.php file, you will find the following code if you use Joomla 1.0x:

<?php mosLoadModules('top', >0); ?>

Style 0 displays modules in a column within the position. It is best not to use this option where possible as it limits styling. The HTML output of this setting can be seen below:

<table cellspacing="0" cellpadding="0"
class="moduletable">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>

If we had applied the module class suffix of -hilite1, this would be the HTML output.

<table cellspacing="0" cellpadding="0"
class="moduletable-hilite1">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>

Module Style 1
In the template's index.php file, you will find the following code if you use Joomla 1.0x:

<?php mosLoadModules('top', 1); ?>

The HTML output of 2 modules with this setting are below:

<table width="100%" cellspacing="1"
cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0"
class="moduletable">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table cellspacing="0" cellpadding="0"
class="moduletable">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

If we had applied the module class suffix of -hilite1, this would be the HTML output.

<table width="100%" cellspacing="1"
cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0"
class="moduletable-hilite1">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table cellspacing="0" cellpadding="0"
class="moduletable-hilite1">
<tbody>
<tr>
<th valign="top">Module Header</th>
</tr>
<tr>
<td>Module Output</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Module Style -1
In the template's index.php file, you will find the following code if you use Joomla 1.0x:
```
<?php mosLoadModules('top', -1); ?>
```
Style -1 displays modules in their raw output form, therefore, no headers.. The HTML output of this setting can be seen below:
```
Module Output
```
Hilites do not affect these module types.
Module Style -2
In the template's index.php file, you will find the following code if you use Joomla 1.0x:
```
<?php mosLoadModules('top', -2); ?>
```
Style -2 encloses modules in a <div> and allows for CSS styling. This module settings is most frequently used due to its versatility. The HTML output of this setting can be seen below:
```
<div class="moduletable">
<h3>Module Header</h3>
Module Output
</div>
```
If we had applied the module class suffix of -hilite1, this would be the HTML output.
```
<div class="moduletable-hilite1">
<h3>Module Header</h3>
Module Output
</div>
```
Module Style -3
In the template's index.php file, you will find the following code if you use Joomla 1.0x:
```
<?php mosLoadModules('top', -3); ?>
```
Style -3 type modules allow for expandable rounded corners. The process changes moduletable to module with the addition of 3 extra <div> tags excluding closing tags. The HTML output of this setting can be seen below:
```
<div class="module">
<div><div><div>
<h3>Module Header</h3>
Module Output
</div></div></div>
</div>
```
If we had applied the module class suffix of -hilite1, this would be the HTML output.
```
<div class="module-hilite1">
<div><div><div>
<h3>Module Header</h3>
Module Output
</div></div></div>
</div>
```

Adding Module Class Hilites to the stylesheets

The module class suffixes are loaded from the CSS/stylesheet files. Depending on your how extensive your module class suffixes are and their purposes, determines which CSS file you shall place them in. If you are editing the structure of the content page such as removing the margins for a slideshow, place the suffix into template_css.css or similar file such as default.css. However, if it is a suffix based on style such as content background colour, then choose style.css or similar file. If it is a mixture, divide them into both files, the structural styles in template_css.css and colours in style.css. Choosing which CSS file is not important in terms of the output of the suffix but is more efficient organisation of your stylesheets.

What are the prefixes that make the class suffix work? Probably the most important part of this tutorial is what you need to insert into your style sheets. From the main section prior, we are now aware that there are 5 module styles to choose from which produce different HTML outputs, therefore, we have different CSS code that we need to use. However, types 0 and 1 use the same style code and type-1 cannot have additional styling. Therefore, we will focus on types 0 and 1 as a single section with -2 and -3 as additional pieces.

Type 0 & Type 1
For the module type 0 as well as type 1, the following style reference is required:
```
table.moduletable-hilite {
```
From earlier, the HTML output that concerns us is <table cellpadding="0" cellspacing="0" class="moduletable"> . The opening tag is table which initiates the statement in the css table. The class changes to . (dot) in the style sheets after table. After the dot, we have moduletable, which was between the " " tags in the HTML. Any code between those tags are what follow the dot.

However, for my CSS snippet, I use moduletable-hilite which denotes the hilite. Anything that follows moduletable is classified as a module class suffix. For the purpose of organisation and understanding, I will just use -hilite.
Type -2
For the module type 2, the following style reference is required:
```
div.moduletable-hilite {
```
From earlier, the HTML output that concerns us is <div class="moduletable"> . The opening tag is div which initiates the statement in the css div. The class changes to . (dot) in the style sheets after div. After the dot, we have moduletable, which was between the " " tags in the HTML. Any code between those tags are what follow the dot.

However, for my CSS snippet, I use moduletable-hilite which denotes the hilite. Anything that follows moduletable is classified as a module class suffix. For the purpose of organisation and understanding, I will just use -hilite.
Type -3
For the module type 3, the following style reference is required:
```
div.module-hilite {}
div.module-hilite div {}
div.module-hilite div div{}
div.module-hilite div div div{}
```
From earlier, the HTML output that concerns us is <div class="module"><div><div><div> . The opening tag is div which initiates the statement in the css div. The class changes to . (dot) in the style sheets after div. After the dot, we have module, which was between the " " tags in the HTML. Any code between those tags are what follow the dot. We must remember to take into account the extra 3 <div>s. Therefore, we need to apply additional styling for each extra <div> which is a subsidiary of the main reference.

However, for my CSS snippet, I use module-hilite which denotes the hilite. Anything that follows is classified as a module class suffix. For the purpose of organisation and understanding, I will just use -hilite.

Basic Suffixes

Let us show a few examples from the snippets above and describe the effects.

table.moduletable-hilite1{
background:#000;
color:#fc0;
font-size:15px;
font-family:Comic Sans MS;
border:5px solid #fc0;
text-align:justify;
}

div.moduletable-hilite1{
background:#000;
color:#fc0;
font-size:15px;
font-family:Comic Sans MS;
border:5px solid #fc0;
text-align:justify;
}

div.module-hilite1{
background:#000;
color:#fc0;
font-size:15px;
font-family:Comic Sans MS;
border:5px solid #fc0;
text-align:justify;
}

From the snippet above, I have concentrated on styling so I would place that in my template's style.css file. The following lists describes the effect/purpose of each line

background:#000; - this changes the background colour of the content item to back as generated by the HEX colour #000
color:#fc0; - this changes the colour of the text within the content item. #fc0 is the HEX colour for gold.
font-size:15px; - this changes the size of the text within the content items. Ensure it is complete with a size unit such as px(pixel).
font-family:Comic Sans MS; - this generates which font is loaded in the content such as my example Comic Sans MS. Please be aware that if you choose a font that is only available to your, it will not appear to others.
border:5px solid #fc0; - this produces a solid gold border of 5px thickness around the content item.
text-align:justify; - this aligns all the text in a justify format.

Now to use a structural hilite example instead of just styling. In this situation, it would be best to place the CSS in the template_css.css file

table.moduletable-hilite1{
margin:10px;
padding:10px;
}

div.moduletable-hilite1{
margin:10px;
padding:10px;
}

div.module-hilite1{
margin:10px;
padding:10px;
}

In this situation, we are applying a margin and padding of 10px. The margin is the distance between the module and the position. For example, margin-top:10px;" will move the module 10 pixels from the top of the module position such as advert1. Padding is slightly different, this is the distance/space between the module boundary and the output of the module or content if you prefer.

In another scenario in which we have a slideshow module which we want to be flush, we can apply a module hilite remove any template margins or padding that are generating the undesired spaces. Apply the module class suffix -flush. This does not exist in the template but adding the non-existent suffix removes any styling from the module, creating the same effect. These are just examples in which you can expand upon.

Styling the Module Headers & Other Elements

In most circumstances, you will wish to apply different styling to your module headings to your module content. This requires some additional CSS in the stylesheets to accomplish.

The following examples are based on styling the headers, in which it would be best to insert the module class suffixes into the style.css type file.

table.moduletable-hilite1 th{
color:#fc0;
}

div.moduletable-hilite1 h3{
color:#fc0;
}

div.module-hilite1 h3{
color:#fc0;
}

The main hilite statements, such as div.moduletable-hilite1 are followed by a additionally tag, separated with a space. For types -2/-3, h3 is the tag that we insert which refers to Heading3 or <h3>...</h3> in HTML. The tabled module, table.moduletable-hilite1 uses th as its extra tag which refers to Table Heading or <th>...</th> in HTML. This method allows us to focus on a particular part of the module, in this case the Headings.

The code we insert between the {} tags was color:#fc0;. This makes all text gold in the module,excluding links. These are just examples in which you can expand upon.

As observed before, we can control the layout with the CSS. We will place the structural styling in the template_css.css file for organisational purposes. A few examples are soon below:

table.moduletable-hilite1 th{
padding-left:10px;
font-weight:bold;
}

div.moduletable-hilite1 h3{
padding-left:10px;
font-weight:bold;
}

div.module-hilite1 h3{
padding-left:10px;
font-weight:bold;
}

The code show above moves the Heading text 10px from the left of the module, as denoted by padding-left:10px;. That could be useful if you are using an image in your Module Header, such as an icon. The font-weight:bold; reference makes the Heading bold. These are just examples in which you can expand upon.

The same techniques can be applied to all HTML elements which are a subsidiary of the module itself, not just the Headings. These could range from lists, links or images as well as many others. The limitations are only by what you wish to use in the modules. A short example for links

table.moduletable-hilite1 a{
color:#c00;
}

div.moduletable-hilite1 a{
color:#c00;
}

div.module-hilite1 a{
color:#c00;
}

Therefore, for this example, all links will have the colour red.

Rounded Corners

Stretchable rounded corners can be created when you use type-3/rounded for your Modules. This is because Joomla process the code to output 3 extra <div&;gt tag groups so we can style each layer to produce the rounded box effect. This is seen in the HTML output below

<div class="module-hilite1">
<div><div><div>
<h3>Module Header</h3>
Module Output
</div></div></div>
</div>

Before we begin to construct the module in the stylesheets/css, we need to create the background images that are going to be our rounded corners. This is best done in Fireworks. The following is a quick guide to creating rounded corners in Fireworks:

Fireworks Guide

Open Fireworks with a blank canvas with around 250 square pixels of space. The size does not really matter unless you go to extreme proportions.
Select the shape tool on the left hand tool bar, the default image should be a rectangle. It is in the Vector block. Left click and hold so that a dropdown appears. Now we select Rounded Rectangle.
On the canvas, left click, hold and drag to create the rounded corner. Multiple points will appear around the shape vector which allow you to change the dimensions and characteristics of the Rounded Rectangle. Change the shape to your personal preferences.
Select the slice tool on the left hand tool bar. This is in the Web block and should have a knife icon place on it. Left click to activate. You now left click, hold and drag to create a slice which should be green. Create the slice around one of the corners. Attempt to make the slice the exact size of the corner to conserve images size. We need to duplicate this slice for each of the 4 corners. For this, we need to activate the cursor tool on the left hand tool bar. Now left click on the slice, copy and paste. Make 3 copies of the slice and drag to each corner so they are equal.
Select all the slices. Right click on one of the slices, but ensure that all are still select. Choose Export Select Slice... from the dropdown menu and export to somewhere on your PC.

You have now created your own Rounded corners in Fireworks.

Alternatively, you download pre-made corners by RocketTheme. Download the 4 hilite image elements used in this tutorial

FTP Guide

Now that you have created or download the images, you need to upload them to your website. Follow the instructions below

Open your FTP client such as FileZilla and login to your web server with your account details.
Navigate to your template's image directory which is located in joomla root/templates/rt_template_name/images.
Now drag and drop your rounded corner images into this folder. If you are using style variants, place them into your active style variant

CSS Guide

We are not at the point where we can integrate the Rounded Corners into our stylesheets as module class hilites. We insert the following into style.css. We are using 4 images, box-br.png, box-bl.png, box-tr.png & box-tl.png. Therefore, all our code will be based around those images so if you are using different names, change the references to fit your situation.

div.module-hilite1 {
background: #333 url(../images/box-br.png) 100% 100% no-repeat;
}
div.module-hilite1 div {
background:
url(../images/box-bl.png) 0 100% no-repeat;
}
div.module-hilite1 div div{
background:
url(../images/box-tr.png) 100% 0 no-repeat;
}
div.module-hilite1 div div div{
background:
url(../images/box-tl.png) 0 0 no-repeat;
}

The first snippet, div.module-hilite1 { is the main module block reference as seen in prior sections. The background is split into sections:

background: is the opening statement which controls styling for the background.
#333 controls the colour of the background not covered by the images which is a dark shade of grey. You can choose any Hex colour.
url(../images/box-br.png) is what loads the image itself. As you can observer, we use relative paths.
100% 100% dictates the position of the element in respects to the elemental. Therefore, 100% along the horizontal axis and 100% along the vertical axis positions the image in the bottom-right area, hence the image box-br.png.
no-repeat ensures that the background does not repeat

The next section of code, div.module-hilite1 div{ is the block that controls the following div layer in the module.

background: is the opening statement which controls styling for the background.
url(../images/box-bl.png) is what loads the image itself. As you can observer, we use relative paths.
0 100% dictates the position of the element in respects to the elemental. Therefore, 0 along the horizontal axis and 100% along the vertical axis positions the image in the bottom-left area, hence the image box-bl.png.
no-repeat ensures that the background does not repeat

The third reference, div.module-hilite1 div div{ is the block that controls the following div layer in the module.

background: is the opening statement which controls styling for the background.
url(../images/box-tr.png) is what loads the image itself. As you can observer, we use relative paths.
100% 0 dictates the position of the element in respects to the elemental. Therefore, 100% along the horizontal axis and 0 along the vertical axis positions the image in the top-right area, hence the image box-tr.png.
no-repeat ensures that the background does not repeat

The final statement, div.module-hilite1 div div div{ completes the div layers which creates the rounded corner.

background: is the opening statement which controls styling for the background.
url(../images/box-tl.png) is what loads the image itself. As you can observer, we use relative paths.
0 0 dictates the position of the element in respects to the elemental. Therefore, 0 along the horizontal axis and 0 along the vertical axis positions the image in the top-left area, hence the image box-tl.png.
no-repeat ensures that the background does not repeat

Applying the Suffix in the Joomla Administrator

We have everything now setup so we can apply the module class suffix to our module in the Joomla Administrator, this is a straight forward procedure which is outlined in the following guide:

Logging In
First, we need to login to the Joomla! administrator. You can access the Joomla! administrator by typing the following into your web browser (edit the link below to fit the context of your website).
```
http://www.yoursite.com
```
You will come across the login panel shown below. Enter your administrative username and password which were created when you install Joomla!
Navigating to the Module Manager
Once you have successfully logged into the Joomla administrator, you need to access the module so you can apply the suffix. Go to the following location:
```
Modules -> Site Modules
```
The Module Manager
You will now be in the Module Manager itself. This is a list of modules that are available to you on your Joomla site. Scan through the list to find the module you want to apply the suffix to. Remember that there are normally more than 1 page.
The Module Control Centre
This is the final stage of Applying the Module class suffix. We are now located in the control centre for the individual module. In the parameters area, located the field Module Class Suffix. This is where you type in your suffix which created such as -hilite1