How to change font/background color in Twenty Ten them

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
and
#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:

https://74.220.207.146/~ecojuice/

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.

Thanks