Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

twenty ten how to change tab colors and highlight tab for selected page

  1. brianjdaily
    Member

    My name is Brian. I work in health care, and I know nothing about blogs or CSS. I created a .com WordPress blog last weekend here: http://briandailyabroad.wordpress.com/

    My theme is twenty ten. I paid $30 for a WordPress upgrade to be able to make changes to the CSS code. In the menu, I would like to make all the tabs white with black text. And I would like the tab for the selected page to be sky blue with black text, so the viewer can tell which tab is selected. I have looked at two related threads for guidance:
    1) http://en.forums.wordpress.com/topic/custom-menu-tab-colors-in-twenty-ten?replies=15
    2) http://wordpress.org/support/topic/twenty-ten-colour-tabs?replies=6

    However, after 3 hours of trial and error, I can't figure out how to type the CSS code to make it work for me. Which doesn't surprise me, because I programming is completely new to me. P

    My Requests:
    1) Please type out exactly what the code needs to look like. I plan on copying and pasting your code into my dashboard, then clicking preview, then keeping it if it works.
    2) Where can I find a CSS "dictionary" that explains the symbols and words to me in terms understandable by someone with zero background in programming?

    Thank you very much for your help and for your patience.
    - Brian

    My code:

    #access ul li.current_page_item > a,
#access ul li.current_page_parent > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_parent a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}

    * note:

    The blog I need help with is briandailyabroad.wordpress.com.

  2. timethief
    Member

    Hi there,
    I don't help with CSS editing but Staff do. I have flagged this thread so it will be moved to the CSS Forum for you.

  3. brianjdaily
    Member

    Thanks timethief
    - Brian

  4. 1tess
    Moderator

    moved to the CSS Forum: hope it helps :)

  5. designsimply
    Staff

    I would like to make all the tabs white with black text.

    You were totally on the right track to start with! Well done.

    Here's some CSS you can use to make the top menu items have a white background and black text in the Twenty Ten theme:

    #access {
	background: #fff;
}
#access a {
	color: #000;
}
#access ul ul a {
	background: #fff;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #fff;
	color: #aaa;
}
#access ul li.current_page_item > a,
#access ul li.current_page_parent > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #000;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_parent a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #000;
}

    I found that CSS by looking at the Twenty Ten original stylesheet, copying any bits from the Menu section that had "background" or "color" in them, and then swapping out color codes until I found what worked best.

  6. designsimply
    Staff

    And I would like the tab for the selected page to be sky blue with black text, so the viewer can tell which tab is selected.

    In the 2nd to last code block in the CSS rules from my first reply, add this:

    background: #cce2ed;

    Or you can pick another color. Here is a page to help you learn about how web color codes work: http://en.wikipedia.org/wiki/Web_colors

  7. designsimply
    Staff

    Where can I find a CSS "dictionary" that explains the symbols and words to me in terms understandable by someone with zero background in programming?

    Here is an index of CSS2 properties straight from the W3C. It's a good reference.
    http://www.w3.org/TR/CSS2/indexlist.html

  8. designsimply
    Staff

    This is a good resource if you want to take a look at a beginner CSS tutorial.
    http://www.htmldog.com/guides/cssbeginner/

  9. brianjdaily
    Member

    designsimply,
    Thank you very much for your recommendation. I will give it a try and let you know how that works.
    - Brian

  10. designsimply
    Staff

    I'd love to hear how it works out. Cheers :)

  11. brianjdaily
    Member

    Your code worked great. I made a couple tweaks. Check out my blog:

    http://briandailyabroad.wordpress.com/

    Thanks,
    Brian

  12. designsimply
    Staff

    It looks great! And it's a neat story. Good luck with your project and getting donations. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags