How do I make CSS overrides for Joomla! components

In this example we will choose an RSJoomla! component, RSTickets!Pro. The same process can be done for other non-related RSJoomla! components.

Let's say we want to change how the RSTickets!Pro table header looks in the frontend. You can notice in the following picture the table header doesn't really match our template's Orange theme:

RSEvento! allows you to add separate style sheets for every installed component of your website. You basically need two things, the component's exact name as found by going to /Components/ folder and a CSS file with your custom definitions.

Tip:

CSS definitions can be added to the classes or IDs of RSTickets!Pro found by inspecting the page's source code.

Steps you need to take:

  1. Create a CSS file with your custom style definitions. For example:
     
    .rsticketspro_tablebig th{
      background-color: #FAAC22;
      font-family: 'OswaldLight','Arial';
      font-size:16px;  
    }
     
  2. Rename the CSS file as the component name (in this case "com_rsticketspro.css").
  3. Place the CSS file under this path:

    \templates\rsevento\css\components\com_rsticketspro.css

...and voilà:

Tip:

The CSS definitions of RSEvento! themes can be found under this path: \templates\rsevento\css\theme\

Note:

The same procedure can be used for modules too. Simply create your custom style sheet for the module, rename it as mod_name-of-module.css by replacing "name-of-module" with the module's exact name and place it under this path:

\templates\rsevento\css\modules\

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Built-in template overrides

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

How do I create a template override