If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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:

    Joomla_3_How_to_change_basic_colors_1

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

    Joomla_3_How_to_change_basic_colors_2

  3. Log into your Joomla dashboard.

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

    Joomla_3_How_to_change_basic_colors_3

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

    Joomla_3_How_to_change_basic_colors_4

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

    Joomla_3_How_to_change_basic_colors_5

  7. Open ‘template.css’ file:

    Joomla_3_How_to_change_basic_colors_6

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

    Joomla_3_How_to_change_basic_colors_7

  9. Change default color code to any desired one.

  10. Save the file:

    Joomla_3_How_to_change_basic_colors_8

  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