Joomla 3.x. How to change basic colors

This tutorial will show you how to change color scheme in Joomla Template.

Joomla 3.x. How to change basic colors

Most of template colors are edited in .CSS files. They are usually defined in template.css file. In order to change colors, you can edit this file via Joomla dashboard.

Let’s change the background color of the body container section as an example.

1. Inspect element using Firebug plugin for FireFox browser:

   

2. You will be able to see the needed file and exact line to edit:

   

3. Log into your Joomla dashboard.

4. Navigate to ‘Extensions’ > ‘Templates’ menu. Open ‘Templates’ tab on the left:

   

5. Click the ‘ThemeXXX Details and Files’ link, where XXX is your theme number:

   

6. Open ‘CSS’ folder available on the left side:

   

7. Open ‘template.css’ file:

   

8. Locate previously inspected CSS rule. You can search by line number as well:

   

9. Change default color code to any desired one.

10. Save the file:

    

11. Refresh your website to see the changes.

You can change the color of any other element on the website in the same way.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to change basic colors