removing black lines in twentyten

• 

  ridenb · Member · Jan 24, 2011 at 12:51 am

  • Copy link
  • Add topic to favorites

  I would like to get rid of the black bar at the top and bottom of the site and would also like to change the navigation bar as well (which is realize is more difficult). I have the CSS upgrade, but can’t seem to make it happen.

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

• 

  thesacredpath · Member · Jan 24, 2011 at 1:55 am

  • Copy link

  Lines above and below header image:

  #branding img {
  border-bottom: none;
  border-top: none;
  }

  The navigation bar color is set here. Change the hex color code to your chosen color. If you do submenus, then there will be more to change.

  #access {
  background: none repeat scroll 0 0 #000000;
  }

• 

  ridenb · Member · Jan 24, 2011 at 4:08 am

  • Copy link

  got rid of the lines above the header, thank you.

  as far as the nav bar goes, it would like it to be a thin grey line with the type in the same grey. i tried just changing the color with what you provided and couldn’t get it to work.

  thanks for your help

• 

  thesacredpath · Member · Jan 24, 2011 at 4:38 am

  • Copy link

  Here is the code I have with it set to red.

  

  You have to be more specific on what you want to change and how. I can change it 500 different ways. You said you wanted to change the color.

  Try the below. The first sets a dark grey bottom border and turns the whole nav bar white. The second link is for the current page item which will be in the same dark grey as they bottom border. They third sets the “hover” color to a slightly lighter grey so that there is a differentiation between them.

  #access {
  background: none repeat scroll 0 0 #FFFFFF;
  border-bottom: 4px solid #777777;
  }

  #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
  background: none repeat scroll 0 0 #777777;
  color: #FFFFFF;
  }

  #access li:hover > a, #access ul ul:hover > a {
  background: none repeat scroll 0 0 #555555;
  color: #FFFFFF;
  }`

• 

  thesacredpath · Member · Jan 24, 2011 at 4:38 am

  • Copy link

  Excuse me, the third takes the hovered tab slightly darker, not lighter.

• 

  ridenb · Member · Jan 25, 2011 at 4:32 am

  • Copy link

  thanks. i used the first one, but Home disappears and I can’t make it all caps. Really appreciate all of your help.

• 

  thesacredpath · Member · Jan 25, 2011 at 4:43 am

  • Copy link

  Give the following a try. I think it will get you where you want to go.

  #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
  color: #AAAAAA;
  text-transform: uppercase;
  }
  
  #access ul li.current_page_item > a:hover, #access ul li.current-menu-ancestor > a:hover, #access ul li.current-menu-item > a:hover, #access ul li.current-menu-parent > a:hover {
  color: #FFFFFF;
  }