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!

Did you enjoy this article? Please bookmark it onto:

Comments (7)

Subscribe to this comment's feed

Show/Hide comments

Franck said:

One more very good tutorial! I will use your instructions in my sites!

November 09, 2006 | url

Dave said:

Thomas, this was a very useful tutorial. Now I can use the modules without having them expand with more text! Great!!! dave

November 10, 2006

Frances said:

Many thanks Thomas, this is amazing! So simple and effective. It makes me wonder about all the other quick and easy things I could do to enhance my sites if only I knew how... I also thought your newsletter was really enjoyable to receive - I don't like endless mail but your newsletter contained several helpful and interesting leads, and the style is so accessible it is a pleasure to read. Thanks again!

December 02, 2006 | url

jsmain said:

... on the other hand all the texts of the template versatilityII overflow under IE6, the bonds in the navigation of left are too large, the text of the “body” exceed under the column of right-hand side, the title “H2” or “h3” is too large and is superimposed on several lines… I do not have the solution for a compatibility under IE6.

December 28, 2006 | url

kernelpanic said:

dude you are awesome thanks for this brilliant tutorial. i have a question though: how can we mix some other template css with that? Such as i want to add some Joomlashack Voodoo module style into versatility css (rounded corners for module stye etc, it looks good) thanks.

January 05, 2007 | url

Jerome said:

Awesome man! How do I color code the sidebar?

January 09, 2007 | url

creativeT said:

I found this tutorial at just the right time. Thank you for sharing!

May 28, 2007

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment