Delicious: Multiple colors for header buttons

• 

  rwhnewton · Member · Jan 19, 2012 at 3:10 pm

  • Copy link
  • Add topic to favorites

  As of now, my header menu buttons are all white. When I hover over a particular button, it will go blue.
  How do I make each menu button a different color (pre-hovering)?

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

• 

  designsimply · Member · Jan 19, 2012 at 3:33 pm

  • Copy link

  Each menu item is assigned a unique identifier. To find them, you can look in the page source. In the Delicious Magazine theme, you can change the menu hover colors like this:

  #menu-item-935 a:hover {
    background: tomato;
  }
  #menu-item-936 a:hover {
    background: palegreen;
  }
  #menu-item-1097 a:hover {
    background: aquamarine;
  }
  #menu-item-1185 a:hover {
    background: peachpuff;
  }
  #menu-item-938 a:hover {
    background: lavender;
  }

  Colors: http://www.w3.org/TR/css3-color/#svg-color

  Note that if you change the menus, you may also need to adjust the identifiers like #menu-item-1234 to new number and you can look in the page source to find them if you make a change like that.

• 

  rwhnewton · Member · Jan 19, 2012 at 5:46 pm

  • Copy link

  Thank you so much for your help. This was my first foray into coding and CSS, and your assistance really helped me take a solid beginning step.

• 

  designsimply · Member · Jan 19, 2012 at 5:49 pm

  • Copy link

  Yay! Here’s another tip: search for information about the developer tools available in your browser. In Firefox, you can get an add-on called Firebug. Those tools will help you browse through web page source html and see what CSS applies to the things you click on. They’re super handy.