If you have published some stuff in Joomla you have probably wondered what that field "Class Suffix" is for. Perhaps you have bought a template that use it for a special menu with a class suffix like "-nav". But can it be used for other relevant stuff you might ask, and the answer is of course - yes! In this small tutorial I will show you a little trick that perhaps is able to spice up your site a little bit, but also give you A LOT more room for content... 

For this tutorial I am gonna use a template from Rocket Theme called Versatility 2 - I will use the dark version called "Lime". It doesn't really matter what template you're using, but the new stuff we are going to make in this tutorial Versatility 2 will make sense.

Instead of having the modules expand in height we will adjust the style so it keeps a fixed height to the modules and add a scollbar if you have a lot of content in that module position.

We will also give those modules some nice vivid colours, just so they will pop out a little more and perhaps add a little more interest to an important area.

The 3 new classes will be called:

• _newsblue
• _newsorange
• _newsgreen
  

To give the modules a little depth we will be using a background gradient instead of a flat colour. You can make your own images, or use whatever you like. I have attached the images I have used here:

Source File

The images

Start by uploading 3 background images with the following names and formats:

• news_blue.png
• news_orange.png
• news_green.png

If you downloaded my source file, just upload the images with the names given. The images should of course be uploaded to the folder called "images" placed in the template folder.

The background images will be added to the top of each module box and will be repeated in the x-direction.

When the images have been uploaded it's time to open the template_css.css file of your chosen template and add a little code.

The css

In your prefered editor add the following to the top of the file:

This line just works as a info line the surrounding "/* */" make sure that the line won't be rendered by the browser.

The next bit of code we will add is the new look and behaviour of the module boxes. Right under the last line we made add the following:

iv.moduletable is the normal tag for the template modules. By adding the _newsblue we are saying that every moduletable with the class suffix "_newsblue" should be rendered with the new code.

A short description of the code we have added:

• Line 1 - This defines the height of our module box.
• Line 2 - Tells the browser that if the content fills too much for the box it should add a scroll bar to the module box or whatever the browser does when you tell it to sort it out automatically :)
• Line 3 - Adds a background colour to the box and on top of that an image from our image folder relative to the template folder. No matter how wide the box will be the image should repeat in a horizontal direction also known as repeat-x.
• Line 4 - The colour of the text - in this example white
• Line 5 - The border around our box, both style and colour
• Line 6 - The padding defines the content placement relative to the box.
• Line 7 - The space around the box

When the above code is added you have a working new class suffix called _newsblue. Let's check it out and see if it works.

Add a new module

In your admin area go to the menu called "Modules" and press the menu item "Site Modules". Press the new icon on the right.

In the "Title" field type "My Blue Box". "Show title" should be set to "yes".

Go down to the "Module Class Suffix" and add "_newsblue" in the empty field.

In order to see the scroller in function add a huge amount of dummy text in the text editor, perhaps you can grab a couple of paragraphs from Lipsum.com

Save the new module and make sure it's published. If everything is done right you should see a module with the new vivid look:

In your template_css.css file copy the stuff we added before and change a few tags to make two more options available. When all three modules are added you should have something like this:

http://www.beta-code.com/joomla_tutorials/class_suffix/index.php

If you like the idea of overflowing boxes, you should def. check out the latest template from TemplatePlazza called Overflow - that template is only about overflowing and vivid boxes. Quite unique.

Take care - Thomas!