Sign in to follow this  
Followers 0

How to change Feature Navigation Color?

4 posts in this topic

Posted · Report post

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 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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. =)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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 {
    backgroundnone repeat scroll 0 0 #F2F2F2;
    colorrgba(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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0