How do I make CSS overrides for Joomla! components
RSLens! 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/rslens/css/components/com_component_name.css
Examples
Head to the folder mentioned above. Here, you will find the CSS overrides that RSLens! offers, by default, for the following components: Contacts, Content, K2, Kunena, RSBlog!, RSDirectory!, RSEvents!Pro, RSFeedback!, RSFiles!, RSMediaGallery!, RSMembership!, RSTickets!Pro and Smart Search.
By editing any of these files, you will notice that they contain regular CSS code that overrides the components' default definitions.
CSS overrides per theme
RSLens! expands the CSS overrides capabilities among RSJoomla! templates by introducing the possibility to override the CSS of any component or module for each of the template's 10 themes. Here's how this was made possible:
Head to the template's css folder:
Here you will find the theme folder. Open it:
Inside it you will find the CSS files that control the coloring of the 10 default themes, as well as 2 more folders, components and modules. Open components so we can have a look at what it does:
In here you can create a separate folder for each of your installed components and add a CSS file for any of the themes that you wish to use on your website in order to override that component's CSS for that particular theme. For example, open the com_rsblog folder (there are CSS overrides included by default for this component). You will notice that there is an override created for each of the template's 10 default themes.
To create CSS overrides for any of your installed components or modules, simply replicate a folder structure similar to the one described above. For example, if you wish to apply this for RSForm!Pro on the Crimson theme, you'll need to add your custom definitions in a file called crimson.css and place it in the following folder:
/templates/rslens/css/theme/components/com_rsform/
Note:
- The same process described above is also applicable for Joomla! modules, with the only difference being that the CSS files and the folder structure need to be created within the /templates/rslens/css/theme/modules instead
- Since RSLens! does not include a CSS override for RSForm!Pro by default, you will have to create the com_rsform folder manually.
- Both methods that have been described above are valid, you can either override a component / module's style by creating a CSS file that will have a general use (placed directly in the css/components or css/modules folders), or create a CSS override for each of the available predefined themes.
One person found this article helpful.
