pixelkoi 2 Report post Posted May 11, 2012 Hi, would like to be able to change the color of Feature Navigation (the area where boxes, dots or numbers appear). Sorry if this is was answered in the past but I haven't been able to find an answer in forums. p.s. I'm css/html clueless so I need pretty simple instructions. Thank You 1 Share this post Link to post Share on other sites
Henry Perkins 14 Report post Posted May 11, 2012 Hi pixelkoi, To change the [b]background color[/b] of your feature navigation, you must add this to your custom CSS: [code]#feature-footer .feature-footer-pad { background-color: #4D526F; }[/code] The "#4D526F" part controls the color, and there are a number of online tools available to help you choose a color scheme or what is called a hexadecimal number that corresponds to a color. http://codex.wordpress.org/Developing_a_Colour_Scheme is a good place to start. To change the "active" little navigation square in your feature navigation, add this to your custom CSS: [code]#featurenav a.activeslide { background-color:#F1F1F1; }[/code] Same idea here with the color code here, too. To change the 2 (or more) "inactive squares in your feature navigation, add this to your custom CSS: [code]#feature-footer.dots a { background-color:#EEEEEE; }[/code] Hope this helps. =) @henry_rly Share this post Link to post Share on other sites
reese 0 Report post Posted August 30, 2013 I am trying to do something similar, I am currently working on a site for a client at http:alcc.theideacenter.com I am trying to change the background color of the navigation buttons using css. I have been using google inspect element to find the proper section but noting seems to be working any thoughts?? Share this post Link to post Share on other sites
Rob 547 Report post Posted August 31, 2013 Hi, get Firebug from http://www.getfirebug.com and use it to inspect the elements. You may need to read its instructions first. It's very easy. The CSS you need to change is: #featurenav a { background: none repeat scroll 0 0 #F2F2F2; color: rgba(224, 207, 56, 0.4); } The background color #F2F2F2 is the light grey. You'll have to change it to a darker color so that the rgba color shows up in contrast. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites