Module Class Suffix

Published on Thursday, 21 October 2004 00:00
Written by Raúl Benavides
Image

Today we added a new little tip to our "Tips & Tricks" section. It describes the use of the new Mambo 4.5.1 module parameter module class suffix, to perform the style and appearance of an individual module. Click on Read more...








MODULE CLASS SUFFIX

Mambo 4.5.1 comes with an interesting characteristic to change the style and appearance of various items as pages and modules. In this tip we are going to work with modules only. Just using the module class suffix parameter.


IMPORTANT NOTE!: We are not CSS experts, this article was just written with our own experience.


We want to make a template for our site and our inttention is to change some of the modules we are going to use, so the look and feel of the result won't be so homogeneus following the rules of the general templare design.

The CSS class that controls the style of the modules is located in the CSS file of the template: template_css.css; search for this:

  • table.moduletable {}
  • table.moduletable th {}
  • table.moduletable td {}

Inside them are defined the general style or the modules of the site, of course, this depends on the template we chose.

Let's go with an example:

  • We want to modify the Polls module of our site.
  • We want the title in red color and a font size of 20px and uppercase. The body (in this case the poll's options) will change too, green color and bold.

First we need to find our Polls module and in the Parameters tab, search the Module Class Suffix label; now we must give a name (suffix) for our new class we are going to assing to this module, for example mypoll and click on the Save icon.

How it works? We must edit the template_css.css file. As table.moduletable is the general style class for modules, we are going to name the new class as this:

table.moduletable_suffix_ {} -----> so in our example: table.moduletablemypoll {} (no spaces)

With this class now we can assign parameters in the CSS file and change the look of our module, but... because several modules perhaps won't interpret the new CSS class correctly (for example, in our "experiments", the polls module don't works good. The tittle accepts the new code but not the body of the module (options)).
So we are going to use what I named second class method (just a name ;P ). Of course, you can see this way in the original CSS file too, just using the module in two parts, title (table.moduletable th {} ) and body (table.moduletable td {} )

Continuing with the example:

  • Red title adn a 20px font size and uppercase:

table.moduletablemypoll th {

color: red;
font-size: 20px;
text-transform: uppercase;

}

  • Green and bold poll's options.

table.moduletablemypoll td {

color: green;
font-weight: bold;

}


A little more? Follow us...

We are going to make a custom module to show some text and various links.

  • Administrator back-end --> Modules --> Site Modules --> Click on the NEW icon

Give a title to the module, for example, My module and write some text in the Content textarea with two links and a little list. See the image below.
Then we name the class we want to assing to our module, mymodule.







Now the CSS code...


This is the code we are going to write for the new class:

table.moduletablemymodule th {

color: red;
font-size: 20px;
font-weight: bold;

}

table.moduletablemymodule td {

color: olive;
font-weight: bold;

}

table.moduletablemymodule a:link {

color: blue;
text-decoration: underline;

}

table.moduletablemymodule a:hover {

color: red;
text-decoration: none;

}

table.moduletablemymodule li {

color: green;

}


   

This characteristic gives you a lot of differents possibilities to perform your template and your site, just play with CSS code.
But remember that CSS is NOT enterely support by all browsers; each browser has differences or interprets the CSS code in a different way or not support an especific property...

This needs a little of practice.



All by now. If you have any suggestion for this article or knows something new to add here just write a comment.

CREDITS
  • MamboHUT for publishing this article.
  • The Mambo Community!

END OF FILE
@by rabencor

{moscomment}