{"id":11357,"date":"2011-10-18T03:47:52","date_gmt":"2011-10-18T07:47:52","guid":{"rendered":"http:\/\/info.template-help.com\/?p=11357"},"modified":"2013-03-26T08:19:34","modified_gmt":"2013-03-26T12:19:34","slug":"css-how-to-change-colors","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/css-how-to-change-colors.html","title":{"rendered":"CSS. How to change colors"},"content":{"rendered":"

This tutorial will show you how to change the colors in any HTML based template using the CSS style properties. <\/p>\r\n\r\n\r\n\r\n

Items on the pages can be colorized in two ways: color codes or images. First of all open your website in browser and press F12 button to open the browser developer tool.
\r\n Using this tool you can find the style properties of any element on the page. If you are not familiar with browser developer tools please check this article.
\r\n For example you can see the following style: <\/p>\r\n \r\n

 \r\n.button {\r\n    background: -moz-linear-gradient(#FF8E00, #FF7F00) repeat scroll 0 0 transparent;\r\n    border-radius: 5px 5px 5px 5px;\r\n    color: #FFFEFE;\r\n    display: inline-block;\r\n    font-family: 'PT Sans',sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 400;\r\n    line-height: 1.2em;\r\n    padding: 20px 27px 19px;\r\n    text-transform: uppercase;\r\n}\r\n <\/pre>\r\n \r\n
In the style  properties above you can see several color codes: #FF8E00, #FF7F00, #FFFEFE  etc. Each of them defines it\u2019s own color. You can get the color codes from any  image editing software. <\/p>\r\n\r\n\"\"<\/a>\r\n\r\n
Copy the code  to your CSS file, save it and refresh the page in browser to see the changes. <\/p>\r\n
In case the  background color is created using the images you can change the image file or  replace the image background with the color one. <\/p>\r\n
For example you  have the following style:<\/p>\r\n\r\n
 \r\n.box-red {\r\n    background: url(\"..\/images\/box-red.gif\") repeat scroll 0 0 transparent;\r\n    border-bottom: 1px solid #E8837E;\r\n    border-radius: 9px 9px 9px 9px;\r\n    border-right: 1px solid #E8837E;\r\n    border-top: 1px solid #E8837E;\r\n    color: #FFFFFF;\r\n    position: relative;\r\n    width: 315px;\r\n}\r\n<\/pre>\r\n\r\n
Where the  background is set using the image:<\/p>\r\n\r\n
 background: url("..\/images\/box-red.gif")  repeat scroll 0 0 transparent;<\/pre>\r\n\r\n
You can go to  the images folder and replace the box-red.gif file with your background image or simpley  replace the image background with color<\/p>\r\n\r\n
Replace:<\/p>\r\n\r\n
background: url("..\/images\/box-red.gif")  repeat scroll 0 0 transparent;<\/pre>\r\n\r\n
with <\/p>\r\n
background: #E8837E;<\/pre>\r\n\r\n\r\n
 <\/p>\r\n
Feel free to check the detailed video tutorial below:<\/p>\r\nCSS. How to change colors<\/a>","protected":false},"excerpt":{"rendered":"
This tutorial will show you how to change the colors in any HTML based template using the CSS style properties. Items on the pages can be colorized in two ways: color codes or images. First of all open your website in browser and press F12 button to open the browser developer tool. Using this tool […]<\/p>\n","protected":false},"author":2,"featured_media":11359,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[1008,859,520,514,537],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11357"}],"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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=11357"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/11359"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=11357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=11357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=11357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}