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

  • Author
    Posts
  • #824578

    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) https://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.

    #824677

    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.

    #824684

    brianjdaily
    Member

    Thanks timethief
    – Brian

    #824726

    1tess
    Moderator Emeritus

    moved to the CSS Forum: hope it helps :)

    #824898

    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.

    #824900

    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

    #824902

    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

    #824903

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

    #824923

    brianjdaily
    Member

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

    #824929

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

    #824932

    brianjdaily
    Member

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

    http://briandailyabroad.wordpress.com/

    Thanks,
    Brian

    #824933

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

The topic ‘twenty ten how to change tab colors and highlight tab for selected page’ is closed to new replies.