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.

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok