{"id":60411,"date":"2016-01-14T07:46:26","date_gmt":"2016-01-14T12:46:26","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=60411"},"modified":"2017-07-11T09:07:22","modified_gmt":"2017-07-11T13:07:22","slug":"joomla-3-x-how-to-change-basic-colors","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-change-basic-colors.html","title":{"rendered":"Joomla 3.x. How to change basic colors"},"content":{"rendered":"

\r\n

This tutorial will show you how to change color scheme in Joomla Template.<\/p>\r\n

Joomla 3.x. How to change basic colors<\/a><\/p>\r\n

Most of template colors are edited in .CSS<\/strong> files. They are usually defined in template.css<\/strong> file. In order to change colors, you can edit this file via Joomla dashboard<\/strong>.<\/p>\r\n

Let’s change the background color of the body container section as an example.<\/p>\r\n

    \r\n
  1. \r\n

    Inspect element <\/strong>using Firebug plugin for FireFox browser<\/a>:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_1\"<\/a>\r\n<\/li>\r\n

  2. \r\n

    You will be able to see the needed file<\/strong> and exact line<\/strong> to edit:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_2\"<\/a>\r\n<\/li>\r\n

  3. \r\n

    Log<\/strong> into your Joomla dashboard.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Navigate to ‘Extensions’ > ‘Templates’<\/strong> menu. Open ‘Templates’<\/strong> tab on the left:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_3\"<\/a>\r\n<\/li>\r\n

  5. \r\n

    Click the ‘ThemeXXX Details and Files’<\/strong> link, where XXX<\/strong> is your theme number:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_4\"<\/a>\r\n<\/li>\r\n

  6. \r\n

    Open ‘CSS’<\/strong> folder available on the left side:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_5\"<\/a>\r\n<\/li>\r\n

  7. \r\n

    Open ‘template.css’<\/strong> file:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_6\"<\/a>\r\n<\/li>\r\n

  8. \r\n

    Locate previously inspected CSS rule. You can search by line number as well:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_7\"<\/a>\r\n<\/li>\r\n

  9. \r\n

    Change default color code to any desired one.<\/p>\r\n<\/li>\r\n

  10. \r\n

    Save<\/strong> the file:<\/p>\r\n

    \"Joomla_3_How_to_change_basic_colors_8\"<\/a>\r\n<\/li>\r\n

  11. \r\n

    Refresh your website to see the changes.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    You can change the color of any other element on the website in the same way.<\/p>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    Joomla 3.x. How to change basic colors<\/a><\/p>\r\n

    <\/p>\r\n\r\n\r\n

    \r\n\r\n\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to change color scheme in Joomla Template.<\/p>\n","protected":false},"author":37,"featured_media":60420,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[661,520,483],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/60411"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=60411"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/60411\/revisions"}],"predecessor-version":[{"id":81866,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/60411\/revisions\/81866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/60420"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=60411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=60411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=60411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}