Joomla! has a neat little feature where you can go beyond the basic customization of the template and specificly customize modules and pages to better suit your site. Below we are just going to describe the process for modules, but the same principle applies to the individual content pages as well.
The first thing to do after you figure out the purpose of giving a module its own css class is to insert that class in the template_css.css of the template you are using. Below is an example of what the code might look like.
As you can see if looks just like the table.moduletable class which was talked about in section C. What we did here was add a suffix, in this case (-menu) was our suffix. You can add any suffix you like, but it's better to name it something similiar to the module it will be assigned to for debugging purposes. I add the hyphen so make it easier to notice when scrolling through the css code. You can change the different css values according to you liking.
Now that the css class is in our css file and edited to suit our needs we need to assign the class to our module. We will be doing this in our admin backend.
Once logged into your admin panel you will need to goto Modules-> Site Modules. Once there click on the module you wish to add the css class to and edit the parameters of the module. Once you have the parameters tab open you will notice, as in the image below, a line that says:
Module Class Suffix:
Click to Enlarge
On that line is where we add the suffix of the module class we created for it above. Notice that the hyphen is included in it as well. Every character after the normal class is the suffix. So if we would have just put table.moduletablemenu as the custom class then in the parameters we would have just typed in menu.
I hope this has helped some of you understand this a little better and if not I ask that if you have any iformation that could be usefull to others and needs to be added please let me know.
; "Click to Enlarge")