How to change basic colors

This tutorial provides a brief explanation on how to change the colors of the items on your Joomla website. We’ll do it by editing the style rules in the template.css file of your theme.

So, first, you should reach the file for editing. There are two ways to do this, choose the more convenient one for you:

• Connect to your FTP or use the hosting cPanel File Manager tool and navigate to the templates/themeXXX/css directory. Open the file with any text editor.
• Alternatively, open the Joomla admin panel and navigate to the Extensions -> Templates -> Templates section. Then click ‘ThemeXXX Details and Files’ and select the required file from a list on the left side. You’ll be able to edit the file directly in Joomla this way.

Now you’re ready to add here your custom style rules or adjust the existing ones up to your liking. We’ll change the header background color in this example – rest of the changes would be similar. Follow these steps please:

1. Open your website in a separate browser tab.
   
2. Click on the desired element (header area in our case) with the right mouse button and select the ‘Inspect’ option from a drop-down menu. It might also say ‘Inspect element’ or ‘Inspect element with Firebug’ depending on a browser you use.
   
3. You will see an inspector panel with the styles section. Find the rule that defines the needed property (background in our case). E.g.,
   
4. Check the location of this rule, it’s specified to the top right of it. In our case, it’s a template.css file, line 5330.
5. Finally, go back to your template.css file, scroll to the needed line and change the ‘white’ value for a background color to any other one you prefer. You can specify the color in HEX (#123456) or RGB format, or simply use the color name (pink, red, etc.).

That’s it. Press the Save or Save & Close button at the top in case you’re editing the file from Joomla admin panel or re-upload the file to your FTP.

Next, feel free to check the website to see your changes applied. This way works for changing all of the site colors – for the titles, buttons, etc. Wish you good luck!