Using Browser’s Developer Tools For Customizing

We had a lot of questions lately regarding how someone can modify the css from our templates. We added in our documentation the places where you can find all the styling applied to our Joomla templates, but many people encounter problems in finding those places, especially when it comes to editing the custom.css file.

In this post we will show you the steps on activating the browser’s developer tools to be able to check the styles applied to certain parts of a template.

Firstly we recommend you use Mozilla Firefox for this, but Google Chrome is ok too.
To activate developer tools you need to press Ctrl+Shift+C in Firefox (Ctrl+Shift+I in Chrome).
A dock should appear on your screen with containing all the codes applied to the page:

1. The first item (number 1) you see is the inspector button, you click it every time you need to find information about an html item (for example, the feature addon title which you can see at number 2) .
2. After we click on the inspector button, we click on the html element we want. In our example we clicked on the feature addon title (number 2).
3. Now we can see on the bottom right (number 3) the styles applied to the element. Here we have information about the styling applied, the file where we can find the styling and the line where we can find the styling. This is everything you need to start editing the styles from our template.

This mainly helps for the custom.css file, the other places where you may find styles are already covered in detail in our documentation.

When it comes to external css files, always insert your stylings in the custom.css file (found at templates/templatename/css/custom.css) to make sure that the styles you insert are not overwritten in future template updates.