Module Class Suffix
The Module Class Suffix parameter works in the same way as the Page Class Suffix. Let's go through an example using the Latest News module
In the administrative back end, navigate to Extensions → Module Manager and find the "Latest News" module. Click on it to open it for editing, and enter <space> + "customLatestClass" in the Module Class Suffix parameter field, as shown below
Now, navigate to the home page in the front end and view the page source code. The screenshot below was made using the Firebug add-in tool. It shows the home page and the HTML and styling for the customised Latest News module
In the upper part of the screen, outlined in light blue, is the "div" element for the module. Below, in the HTML window, we see the HTML as follows
<div class="moduletable customLatestClass">
and then
<ul class="latestnews customLatestClass">
The "moduletable" and "latestnews" classes are created automatically. The new class, "customLatestNews" was created because we started the Module Class Suffix parameter with a leading space
Now, let's use our new class to add some custom styling. Again, go to the end of the templates/rhuk_milkyway/css/template.css file and add the following code
div.customLatestClass {
background-color: #FFFFD2;
}
div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a {
color: #8B4513;
}
Save the file and re-display the home page. It should look like the screenshot below

The CSS selector div.customLatestClass sets the background color for the entire area. The three selectors div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a select the font color for the "h3" heading, the bullets ("ul" tag), and the "a" tag, respectively. Note that, if we only wanted to style the "ul" element, we wouldn't need a Module Class Suffix unless we had more than one "Latest News" module. Instead, we could just have defined the CSS using the standard "latestnews" class
Be careful not to break existing CSS styling
In menus, we need to be careful not to break existing CSS styling
Let's look at how this works. In the administrative back end, navigate to Extensions → Module Manager and open the Main Menu for editing. Click on the Advanced Parameters. Notice that the Module Class Suffix is set to "_menu", without a leading space
Now, go to the Home page in the front end and view the source code (or use Firebug). The screenshot below shows the HTML for the Main Menu

Notice that the class is called "module_menu" because of the Module Class Suffix. Also, notice that there is special styling in the "template.css" and "blue.css" files for the "module_menu" class. For example, there is a background image that provides part of the blue border around the menu
We can confirm this by returning to the back end and changing the Module Class Suffix to blank. Return to the Home page and refresh. Now the Main Menu will show without the special "module_menu" styling, as shown below

This shows an important point. Existing modules, especially menus, may already have CSS styling that depends on Module Class Suffixes. So we need to be careful when making changes
What if we still wanted to add some special styling just to the Main Menu? One way is to get tricky and add a second CSS class to the existing suffix. To see this, return to the Module Manager in the back end and open the Main Menu for editing. This time, in the Module Class suffix, enter _menu, a space, and then myMenuClass, as shown below
Now, add the following code to the end of the templates/rhuk_milkyway/css/template.css file
div.myNewClass {
font-size: 1.2em;
}
Go back to the Home page and notice that now the font in the Main Menu is larger, as shown below
If we open Firebug, we can see what the HTML and CSS looks like, as shown below
By putting a space between the "_menu" and "myNewClass", we added the new class into the HTML. Then, by selecting the new class in the CSS file, we changed the font size
Menu Class Suffix and Menu Tag ID
All core modules allow you to enter a Module Class Suffix, as discussed above. Menu modules have two additional parameters: Menu Class Suffix and Menu Tag ID. Let's look at what these parameters do.
Menu Class Suffix
The Menu Class Suffix inserts an extra suffix in the class for the unordered list that builds up the menu. If unedited, the class is "menu". If adding "_myMenuClass" under Advanced Parameters → Menu Class Suffix, the new tag will be "menu_myMenuClass".
(This behaviour is only for the Menu Style "List". If choosing "Legacy - Vertical" or "Legacy - Horizontal", the class suffix will be added to the links in the table; this suffix will then be "mainlevel_myMenuClass". When choosing the Legacy Flat List, the suffix will be added to the links (as on the two other Legacy lists), but it will also be added to the ul tag, but as an id rather than a class; the id will be "mainlevel_myMenuClass".)
Menu Tag ID parameter
Now, lets look at the Menu Tag ID parameter. Navigate to the back end, open the Main Menu module for editing, and enter "myTagID" in the Menu Tag ID parameter.
Add the following code to the end of the templates/rhuk_milkyway/css/template.css file
#myTagID {
list-style-type: square;
}
Now, re-display the Home page to see the change. The bullets for the Main Menu should now appear as squares, as shown below
Finally, we can look at the HTML and CSS in Firebug, as shown below
Conclusion
The Class Suffix and Menu Tag ID parameters allow you to fine-tune the CSS styling of your web site. By using a leading space in the suffix name, we can create a new class. This is normally the preferred method, since, as long as the new class name does not conflict with an existing class, no existing styling will be broken