How To Customize CSS in Joomla Template

In this guide we will explain how to customize the CSS of Joomla templates when all other ways of customization have been tried, such as making changes to the template options, extension or Joomla.

To make a CSS customization it is necessary to know the CSS selectors such as id, html tags and css classes.

For this you will use the Element Inspector of your browser, by right clicking on the button, section, link, image or whatever you want to customize, then on Inspect. This will open the developer tools of your browser that in the Inspector or Elements tab (depends of your browser) you will see all the HTML code (DOM) and in below or on side the classes with the styles. Try changing the values of those classes by clicking on the attribute value.

For this guide we are going to change the active menu item of the Sombra template from red to green (just for example because this in our templates can be done from Helix easily)

1. Right click on the element you want to customize.
2. Clik in Inspect, it open developer tools
3. The inspected item is marked
4. Selector, css class that contains the attributes and values of the element's style.
5. New attributes and values to change to bold and green color. To add new attributes and do live tests you just have to click on a blank space after the value of the last attribute.

Creating CSS File

Currently most templates have the option of adding a custom.css file. In our case we use Helix Ultimate that does give us the possibility to add custom.css

For this it is recommended to use a code editor like NotePad++, sublimeText or another, if you don't have one you can use Windows Note Pad or its similar in your OS.
Now inside the custom.css we paste the CSS classes (4 in the image) and inside the new attributes and values (5 in the image), staying like this.

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a{font-weight: 700;color: forestgreen;}

When you have the changes you can upload the file to /templates/TEMPLATE_NAME/css/custom.css then refresh the site, if you do not see the changes you may have to clear the browser cache or in the developer tools configuration check disable cache while developer tools is open. If you still don't see the changes, you may need to add the !important statement to the values, like this: font-weight: 700!important;color: forestgreen!important;

Remember not to modify existing CSS files because they are rewritten in updates or when you enable SCSS-to-CSS compilation in Helix Ultimate