Changing colours of menus and navigation

• 

  dmfadmin · Member · Jul 11, 2013 at 12:49 pm

  • Copy link
  • Add topic to favorites

  How do I change the colours of navigation, drop down menu and titles (i.e. UPCOMING EVENTS / IN THE KNOW etc.) but leave the rest of the page as white.

  http://darebinmusicfeast.wordpress.com

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

• 

  adamkheckler · Staff · Jul 11, 2013 at 8:25 pm

  • Copy link

  Hi there!

  Since you have WordPress.com Premium for your site (which includes Custom Design), you can edit pretty much anything about the look of your blog using custom CSS. :)

  Let’s see if I can answer these one at a time! Note that, for all of these answers, you’ll be insert the custom CSS here:

  https://darebinmusicfeast.wordpress.com/wp-admin/customize.php#css

  change the colours of navigation, drop down menu

  This will change the menu item colors to red:

  nav#primary-nav li a { color: red; }

  This will change it so they turn blue when you hover over them:

  nav#primary-nav li a:hover { color: blue; }

  Finally, the a:active selector will determine the color for whatever page you’re on when you’re using the menu.

  Of course, you can use whatever colors you want here instead of the examples I’ve chosen. :)

  titles (i.e. UPCOMING EVENTS / IN THE KNOW etc.)

  Target the widget titles and links like so:

  h3.widget-title, h3.widget-title a { color: red; }

  Please see our CSS customization forum for more help:

  https://en.forums.wordpress.com/forum/css-customization

  Let me know if there’s anything else I can help with. :) Thanks!

• 

  dmfadmin · Member · Jul 11, 2013 at 11:11 pm

  • Copy link

  thanks (I do need that information too, but I meant the background colour in each of those sections. i.e. So ‘In the know is in yellow text on a black background, but the ‘About stays in black text on a white background) and the same for the navigation section and the grey that hovers.

• 

  adamkheckler · Staff · Jul 11, 2013 at 11:57 pm

  • Copy link

  Ahh, I see now. :)

  To target the background of the elements, the changes are pretty simple. Instead of using this:

  { color: red; }

  … just use this:

  { background-color: red; }

  Additionally, you might want to read up on how to code basic CSS using the links we’ve collected in our support docs here:

  http://en.support.wordpress.com/custom-design/css-basics/

  http://en.support.wordpress.com/custom-design/editing-css/#css-help

  You can also ask the CSS wizards over in our CSS Customization forums, which are here:

  https://en.forums.wordpress.com/forum/css-customization

  Let me know if there’s anything else I can help with. :) Thanks!

• 

  dmfadmin · Member · Jul 24, 2013 at 12:52 am

  • Copy link

  thanks!

• 

  adamkheckler · Staff · Jul 24, 2013 at 12:42 pm

  • Copy link

  Happy to help! :)