You may be familiar with the 'Custom CSS' field available within the template parameters of your Joomla51 template. This field allows you to add your own Custom CSS styling to your website. You may however find that you wish to be more specific in how your custom CSS is applied. In this tutorial we will be detailing how to apply this custom CSS to a single module. We will achieve this by assigning the CSS styling to a class and then adding this class to your module using the 'Module Class Suffix' field within the modules settings.

Following is an example of some custom CSS which changes the color of your module titles to red.

.module_header h3 {
    color: #D80000;
}

Adding the above CSS to the Custom CSS field of your templates parameters will apply that CSS to every module title. To allow us to apply it to a single module we are going to prepend this CSS with our own class name. Effectively this means the CSS will only be applied to module titles (.module_header h3) within an element with your chosen class name. For this example we are using the class name 'redTitle'. The CSS you will be adding to the Custom CSS field of your templates parameters will look like the following..

.redTitle .module_header h3 {
    color: #D80000;
}

So now that you have added the styling to your class name you can go ahead and add this class to your module. Navigate to your module settings (Extensions -> Module Manager -> [YourModule] and select the 'Advanced' tab. Using the 'Module Class Suffix' field add the class name you have just used in your custom CSS.

redTitle

Click save and refresh your site. The red title should appear on your edited module without effecting other modules on your site.

Note: Depending on your Joomla template you may need place a space before the first class in your 'Module Class Suffix' field.