Jump to content

- - - - -

How to change Feature Navigation Color?

  • Please log in to reply
3 replies to this topic

#1 pixelkoi†



  • DMS Subscriber†
  • 14 posts
  • Country: Country Flag

Posted 11 May 2012 - 07:56 AM

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 :)
  • Stojerbtrog likes this

#2 Henry Perkins†

Henry Perkins

    Friendly Contributor

  • DMS Subscriber†
  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 11 May 2012 - 11:18 AM

Hi pixelkoi,

To change the background color of your feature navigation, you must add this to your custom CSS:
 #feature-footer .feature-footer-pad {
	    background-color: #4D526F;

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.wordpre...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:
 #featurenav a.activeslide {

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:

 #feature-footer.dots a {

Hope this helps. =)

#3 reese



  • Members
  • Pip
  • 1 posts
  • Country: Country Flag

Posted 30 August 2013 - 06:01 PM

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??

#4 Rob


    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 09:53 PM

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.