How to change header background color in Skylark Theme?

  • Unknown's avatar
    lodosmedia · Member ·

    Hi,

    I’m planning a custom CSS upgrade just for changing the background color of header area (Blue- in my case). I’ve tried to change through CSS preview first, but unsuccesful. I’ve also searched the whole stylesheet for commands like “color, background color, header”.

    Is there anyway to make this change on Skylark Theme?

    Thanks in advance.

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

  • Unknown's avatar
    hugosbpereira · Member ·

    Hey,

    I have the same question. I want to purchase the CSS upgrade, but only if I can change the blue head color to another one on CSS.

    Is that possible?

  • zandyring · Staff ·

    You need to add this to your stylesheet, and adjust at will:

    .site-header {
    background: #FFFFFF;
}

    #FFFFFF is white, but then you can go from there.
    Good luck!

  • Unknown's avatar
    lodosmedia · Member ·

    Still not working for me.

    Here is what i made: http://lodosmedia.files.wordpress.com/2012/09/csscommand1.jpg

    And preview result: http://lodosmedia.files.wordpress.com/2012/09/csspreview.jpg

    As you can see, a change for main-navigation background color works. But for the header?

  • zandyring · Staff ·

    When I look at your css, I still see your .site-header set to this:

    .site-header {
    background: none repeat scroll 0 0 #4188D4;
}

    When I change your hex code to #ffffff, the entire header goes white. Try adding this:

    .site-header {
background: none repeat scroll 0 0 #FFFFFF!important;
}
  • Unknown's avatar
    lodosmedia · Member ·

    Still the same result.

    Please notice that i can only preview the changes, saving is unabled without a custom CSS upgrade.

    Perhaps, it’s a “non-editable” part of this theme?

    Thanks anyway.

  • zandyring · Staff ·

    You would need the custom design upgrade to make this change, yes. I’m sorry I didn’t notice you didn’t already have it.

    If it is something that is editable as a standard part of the theme, you’ll find it in Dashboard/Appearance/Design.

    Good luck!

  • Unknown's avatar
    designsimply · Member ·

    I tested the CSS zandyring first replied with using the preview option on Skylark, and it worked in my test:

    .site-header {
    background: red;
}

    I used “red” to make it stand out in a during testing.

    Can you make sure you are pasting it as a separate new paragraph all by itself? Let me know if it’s still not working for you and I’ll see what else I can figure out to help you.

  • Unknown's avatar
    lodosmedia · Member ·

    Can you make sure you are pasting it as a separate new paragraph all by itself?

    This was the main problem entire the time. I deleted all other commands in CSS stylesheet editor, including the default commands ( Introduction etc..). Now works fine both hexadecimal and predefined color names.

    zandyring, designsimply,
    I’m sorry for my inattention and thank you for your efort. Now, it’s time to upgrade a CSS customization for me ;)

    Cheers..

  • Unknown's avatar
    designsimply · Member ·

    No problem! Happy to help. :)

  • The topic ‘How to change header background color in Skylark Theme?’ is closed to new replies.