| Using the Module Class Suffix |
|
|
|
| Wednesday, 23 September 2009 20:14 | |||
|
Learning how to use Joomla's Module Class Suffix will allow to customize certain modules without editing their code. However, you will need to inspect a little into your website's template and you require some CSS knowledge The Module Class Suffix is a parameter every Joomla module should have, and it looks like this: But before you apply it to your module, you might want to view the source code of your live module in order to understand the difference between before and after. I use either one of the following Firefox Web Developer Tools to do this:
Templates usually write different HTML arround the modules depending also on the position you publish them (Module Chrome). For example, let's say your target module's code looks originally like this: <div class="module"> <h3>Title</h3> {Module Content} </div>...and after you apply the custom Module Class Suffix, it changes to: <div class="modulecustom"> <h3>Title</h3> {Module Content} </div>Most often, your template's CSS already have some styles for the simplest modules, maybe something like:
.module {
padding: 10px;
...
}
So, if you want to keep these attributes besides the new ones, you could define the new class as followed:
.modulecustom {
padding: 10px;
...
font-size: 150%;
}
So every module wearing the custom class suffix will now have a certain different font size.
|







