Support » Themes and Templates » How to change font/background color in Twenty Ten them

  • I would like to know how I can change the Font size/color of the page names that appear in the header, I am trying to modify color codes in style.css in the following code but it doesn’t seem to change work:

    /* =Global Elements
    ————————————————————– */

    /* Main global ‘theme’ and typographic styles */
    body {
    background: #f1f1f1;
    textarea {
    color: #666;
    font-size: 12px;
    line-height: 18px;
    hr {
    background-color: #e7e7e7;
    border: 0;
    clear: both;
    height: 1px;
    margin-bottom: 18px;

    Please help.

Viewing 15 replies - 1 through 15 (of 40 total)
  • Hi

    If you are referring to the site Nav, in twenty ten that is associated with #access in the CSS – it is LI and A tags you need to adjust

    you should use firefox with the firebug plugin, it will tell the exact code it is that you are trying to change so you don’t have to go through each one of the codes.

    Stvwlf – Do you mean update the Li and A tags in style.css file?

    the CSS you need to change is in the area of

    #access li

    and #access a

    in the stylesheet. There are many settings, so make a copy of the file before you change anything.

    I completely agree with spacejamz that using Firebug makes this all much simpler. But many people I suggest that to never install it or learn how to use it, so I am pointing you to what in the stylesheet you need to change.

    Firebug is like having a microscope or stethoscope that shows you exactly what is going on with your CSS. But there is a learning curve associated with it.

    I changed the color code in style.css in the area of both

    #access li
    #access a

    Updated file and then when I check, still no change. I am really confused now, I even try changing color codes at other places, but nothing seems to change on the home page menu.

    is your site online? what is a url of a page you want to change the color of? what color do you want to change it to?

    stvwlf – My site is not live right now, but maybe you can check out the link:

    I am trying to change the color of the black menu bar, to green and the text on the bar such as ‘home’, ‘about us’, ‘contact us’ to color white.

    on line 369 in style.css is nav background styling

    #access {
        background: #000000;   --> change to #476d06 (or green of your choice)
        display: block;
        float: left;
        margin: 0 auto;
        width: 940px;

    on line 392 is

    #access a {
        color: #AAAAAA;      --->  change to #ffffff to make nav letters white
        display: block;
        line-height: 38px;
        padding: 0 10px;
        text-decoration: none;

    A problem you will have making that white is the Active nav tab is also displaying in white, so there will be no indicator of the active tab.
    On line 433 is the code that makes the active nav tab white. You can change the #ffffff to another color for the active tab:

    #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: #FFFFFF;   -->  change this to something not white

    stvlf – Thank you soo much, i finally got it to work, but I did had to update the file functions.php for changes to show up, i modified the color code in the function:

    function twentyten_admin_header_style()

    and then when i refreshed it, the changes showed.

    I am glad it finally works.

    glad to hear!

    stvwlf – One last thing I wanted to ask you was, since I was able to change the menu bar to green and the text to white, but i ran into another problem, on tabover, when you tab over other buttons, the entire thing shows white, so you cannot read the button text, do you know how to fix that, I will appreciate your help, you can visit the same URL above to see what I mean.

    I am seeing the tab overs as grey and I am able to read the word in the button when the tab is over it. But none the less:

    The background and foreground colors in the hover state are on line 425

    #access li:hover > a, #access ul ul :hover > a {
        background: #AAAAAA;
        color: #FFFFFF;

    you can experiment with different colors until you find the setting you like.

    stvwlf – Thank you soo much, I finally figured this out, i am not a very tech savvy person, I appreciate your help, now i can play around with different colors.

    Thank you.

    glad to hear it.

    So you know, you are more tech savvy than many people who ask questions on this forum. You know what a stylesheet is, you can find the code sections I pointed out, you can change them without blowing up your site! These are not small things.

    I wish for you a great site.

    Hi stvwlf, One more questions I have for you is on a different topic, how do I insert a video on the home page, i have a video on youtube that I would like to display and play on the right side of the page in the widgets area, so when user clicks on it, it starts playing.

    I know how to put a link to a video, but i dont want to open a second browser window, i would like to play the video within the page itself.


Viewing 15 replies - 1 through 15 (of 40 total)
  • The topic ‘How to change font/background color in Twenty Ten them’ is closed to new replies.