How do i change the color of the top links?

• 

  homesalere · Member · Nov 30, 2011 at 5:41 pm

  • Copy link
  • Add topic to favorites

  My blog is AskHomesale.com ( http://pruhomesale.wordpress.com/ ) and i would like to change the top page links. Maybe solid black with white text?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 30, 2011 at 6:15 pm

  • Copy link

  The background color, if that is what you are wanting to change, is a 16px x 22px image that repeats in the “x” direction (horizontally). You can create a new image of the same size, upload it to your media library, get the URL and replace URL OF IMAGE between the double quote marks in the below.

  #navigation ul li {
  background: url("URL OF IMAGE") repeat-x scroll 0 0 #FFFFFF;
  }

  The existing image: http://s2.wp.com/wp-content/themes/pub/under-the-influence/images/top_gradient.png

  Or if you want a solid color, add this to your CSS instead and edit the color code.

  #navigation ul li {
  background: #FFFFFF;
  }

• 

  homesalere · Member · Nov 30, 2011 at 6:20 pm

  • Copy link

  i tried the solid color code and previewed it, nothing changed?

• 

  homesalere · Member · Nov 30, 2011 at 7:00 pm

  • Copy link

  got them to turn solid black with this code but would like the white text to stand out more, suggestions?

  #navigation ul li {
  background: black;
  font-color: white;
  font-weight: bold;
  font-size: 14px;
  }

• 

  designsimply · Member · Nov 30, 2011 at 7:08 pm

  • Copy link

  In your code example, it should be “color” instead of “font-color”.

• 

  homesalere · Member · Nov 30, 2011 at 7:16 pm

  • Copy link

  tried this and it didn’t change navigation colors:

  #navigation ul li {
  background: black;
  color: white;
  font-weight: bold;
  }

• 

  designsimply · Member · Nov 30, 2011 at 7:17 pm

  • Copy link

  Looking a little closer, the colors in the menu in the Under the Influence theme are set through the navigation list items and anchor tags. Here are some more specific examples.

  This will change the color of the links in the menu in general:

  #navigation ul li a, .navigation, .navigation a {
      color: #fff;
  }

  This will change the color of the links when you hover over them:

  #navigation ul li.current_page_item a, #navigation ul li a:hover, #navigation ul li a:focus {
      color: #333;
  }

  This changes the color of the links for the current page and the top menu item when you’re hovering over submenu items:

  #navigation li:hover > a, #navigation ul ul:hover > a, #navigation ul li.current_page_item > a, #navigation ul li.current-menu-ancestor > a, #navigation ul li.current-menu-item > a, #navigation ul li.current-menu-parent > a {
      color: #333;
  }

• 

  designsimply · Member · Nov 30, 2011 at 7:18 pm

  • Copy link

  Note, you also need to keep this for the main color change. It updates the background link but doesn’t change any of the link colors:

  #navigation ul li {
      background: black;
      font-weight: bold;
      font-size: 14px;
  }

• 

  homesalere · Member · Nov 30, 2011 at 7:25 pm

  • Copy link

  thank you, you are awesome!

• 

  designsimply · Member · Nov 30, 2011 at 7:26 pm

  • Copy link

  You are too! :)