change header color of Andreas09 with CSS

  • Unknown's avatar
    bloggerwithoutaname · Member ·

    Hi everyone,
    I have searched the forums but have not quite found the answer I am looking for. I LOVE the Andreas09 theme, but hate the choice of colors for the header!!!!

    I would like to stick with this theme, because the layout is perfect, but I really want to change the header color to white, off-white or pale green (not sure until I see it, which one it will be) and then change the header text color to black, in order that it doesn’t disappear. Now, I know nothing! about CSS customization but I am totally willing and able to learn.

    Is it possible to make these changes with the Andreas09 theme?

    I am very willing to search the W3 schools data base to learn how to override the original css.

    thank you for your help,
    Lune x

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

  • Unknown's avatar
    jomariajomariajomaria · Member ·

    I think it is possible. You just need a little time to learn, and the CSS upgrade. Good luck!

  • Unknown's avatar
    bigdave44 · Member ·

    I knocked this up on my test site:

    http://bigdave44t.wordpress.com/

    with this:

    #container {
background:#F0F0F0 url('files/2009/09/bodybg-pale-green-2.jpg') repeat-x scroll 0 0;
}

#sitename h1 a {
color:#000000;
}

#sitename h2 {
color:#000000;
}

    I created the new background using Paint.NET (freeware) to modify a copy of this existing background:

    Hope this helps.

  • Unknown's avatar
    bloggerwithoutaname · Member ·

    Hi bigdave44, yes it does thanks.

    OK, I have a white header and a background, white footer and white main menu bar. The only thing left to change is the gray square over ‘home’ which also hovers over the other page tabs when the mouse rolls over them.

    I have looked and looked for this code, I know it is some part of #mainmenu I need to change but I do not know how!!!

    I want a white background to the home tab, with a hover:underline when the mouse is rolled over the page tabs.

    any ideas?

    thanks!!!
    Lune x

  • Unknown's avatar
    bigdave44 · Member ·

    I see you are nearly there!

    I was somewhat delayed by a bug which prevented CSS from being saved (now resolved).

    Try adding this to underline the text and lose the background image for menu hover:

    #mainmenu a:hover {
text-decoration:underline;
background:#FFFFFF;
}

    You might be better off leaving the background which indicates the current page.

    If you are interested, the best way to examine and make temporary changes to your CSS is to use Firefox with the Firebug addon.

  • Unknown's avatar
    bigdave44 · Member ·

    You can set a different background for the current page with:

    #mainmenu li.current_page_item a {
background:#F0F0F0;
}

    just set the colour (I’m English!) to whatever you want. F0F0F0 gives grey.

  • Unknown's avatar
    bloggerwithoutaname · Member ·

    I got caught up with that bug too, all fixed now.

    I am English too. Thanks ever so much (can’t you tell I’m english now?) you are a star, that is exactly what I wanted.

    A perfect blog at last!!!!

    cheers.

  • Unknown's avatar
    bigdave44 · Member ·

    You had me fooled – you said “color” in your question!

    If it’s any consolation, I hadn’t touched CSS until last May.

    Glad to have been able to help.

    Dave

  • Unknown's avatar
    bloggerwithoutaname · Member ·

    ha, that was on purpose, to show up better in the search engines, therefore get more help.

    I think CSS is great, I have been tweaking the Andreas09 theme just because, well, I like tweaking it and I CAN! It is like learning french or how to do crossword puzzles.

    thanks again,
    (I do the saturday telegraph puzzle myself).

    BTW: if anyone wants to share my code for a completely WHITE Andreas09 theme, with the slightest hint of #F0F0F0; very happy to pass it on – it looks nice.

  • The topic ‘change header color of Andreas09 with CSS’ is closed to new replies.