Jan
22
2009
How to use Joomla Module Class Suffix
HariesDesign.com - Module Class Suffix is modification module in joomla with own style.we can use module class suffix to distinguish that module from others with regard to the css classes it uses.

How to modify Module Class Suffix with our style?

Step 1

Open the module that you want to style in your backend:

Module->Site Modules->Module Name


Step 2

Add a suffix of your choice, say  _mynewmodule ,  in the module class suffix parameter box, and save.


Step 3

Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.

Scroll down to your css classes for modules. You'll probably see generic settings like the following:

table.moduletable {
  width            : 167px;
  border          : 1px solid #C0C0C0;
  margin-bottom    : 10px;
  margin-left      :10px;
}

table.moduletable th {
  font-size        : small;
  font-weight      : bold;
  color            : #000;
  background      : #FFF;
  text-align      : center;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 1px solid #999999;
}

table.moduletable td {
  padding          : 2px 4px;
  background      : #FFF;
  font-size        : x-small;
} 

 

Step 4

To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change.  Say you want to change your module table heading class, you might do something like this:

table.moduletable_mymodulestyle th {
  font-size        : small; 
  font-weight      : bold;
  color            : #888; 
  background      : #FFF;
  text-align      : right;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 2px solid #999999;
}

DONE