Joomla Spots ~ Joomla Websites Directory and Resource Library

Home Tutorials Joomla Templates How to add a Module Class Suffix
How to add a Module Class Suffix PDF Print E-mail
User Rating: / 37
PoorBest 

adding custom joomla module suffix tutorialBRIEF INTRO ABOUT JOOMLA MODULE CLASS SUFFIXES

Module Class Suffix can be used to style differently your modules, for example if you take a look at JoomlaSpots.com frontpage left modules, you can see that each module has a different color background used.
This was achieved using module class suffix for modules, for example "Main" menu module is using suffix dark, see screenshot below for more:


how to use joomla module suffixes in our website part 1

 

 

 

 

 

 

 

 

 

 

 


while "Bugs" module is using suffix light, see screenshot below for more:

 


how to use joomla module suffixes in our website part 2

 

 

 

 

 

 

 

 

 

 

 

JoomlaSpots.com website frontpage left modules look like this as a result of using the previous suffixes.

using joomla module suffixes in our website

 

 

 

 

 

 

 

 

 

 

 

 

TUTORIAL: HOW TO CREATE AND USE YOUR OWN JOOMLA MODULE SUFFIXES

Adding such suffixes on your own Joomla website modules is very easy, just follow our simple guide and let us know if you have any problems.

As you can see every suffix has a name like dark or light or whatever you want to name it, lets say we name our new suffix as spots.

Our first goal is to add this suffix in our template css file, you can find this file inside your /templates/your_template/css directory, filename is usually called as template_css.css unless otherwise stated from your template provider, so:

  1. Use an ftp client(like filezilla) to the path where your template_css.css is located.
  2. Download this file locally on your pc, make a backup(in case you want to undo changes) and open it with an editor like notepad plus plus or similar.
  3. Go to the last line of the file and add the following code:
    /* spots */
    this is necessary for future use in case you want to re-edit your css file and find it hard to remember what changes you made, using this code you can easily track changes and edit them as you wish.
  4. Add below /* spots */ your own css code for example:
    .modulespots {
    padding: 10px;
    font-size: 110%;
    font-color: red;
    }
  5. Pay special attention the the .modulespots entry, there you specify how you are going to call this suffix in Joomla module administration area(see first and second screenshot), if you want to name this suffix differently then replace .modulespots with .moduleothersuffixname where othersuffixname is your desired suffix name.
  6. Save file and upload it back to your /templates/your_template/css directory replacing the old one.
  7. Log into your Joomla admin page, edit your desire module and go to Advanced Parameters under the Parameters section, there you can see Module Class Suffix setting which you should fill with your suffix name, in our example its spots. Apply and close your Joomla module.

    edit joomla module suffix in backend























  8. Reload your Joomla website and preview results.

In case you don't see desired results on your Joomla website you can always re-edit your template css file, upload it on your template css directory and refresh.
You probably have to do this procedure many times until you have a decent result ;).