How do I make CSS overrides for Joomla! components

RSClario! includes a feature that allows you to easily create CSS overrides for any Joomla! component or module (3rd party or our own), without losing any of the changes when performing updates.


This is done by adding a .css file named after the component's internal name in the template's css folder. The full path looks as follows:


\templates\rsclario\css\components\com_component_name.css


Example


By default, the article titles listed by Joomla! Content when using RSClario! with the Dark Green theme are colored green and are using the Desyrel font family, like in the image below:



Let's assume that we need to have them displayed in black, using the Georgia font family, here's what you need to do:


Create the following file:


\templates\rsclario\css\components\com_content.css


and add the following code:

 
.page-header h2 > a{
    color: #000000 !important;
    font-family: 'Georgia',cursive;
}
 

The end result should look similar to this:



Note: The same type of CSS overrides can be performed for modules, with the only difference that the mod_your_module.css file will need to be added in the following folder:

\templates\rsclario\css\modules\

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How to rename menu title on mobile devices

How do I create a template override

How to modify RSClario!'s style without changing the source code

How do I change the favicon image

How to enable displaying sub-menu items