Change Background Color Header & Footer

  • Resolved PattayaNic

    (@pattayanic)


    11 years, 11 months ago

    Clean Retina supports Custom Background Feature.

    Go to Appearance->Header.
    You can either set the image or color as background.
    You can see the background preview on the same setting page.
    Click on Save Changes.
    NOTE:The background effect will only change the content part but not in the header and footer part. If you want the change to reflect in the header and footer as well then write your custom CSS in Appearance->Theme Options->Design Options->Custom CSS input field to hide the Header and Footer pattern. And Save the Changes.

    Well this is what i want to do, change the color of the Header and Footer background. I have no experience with CSS and been searching the Internet and tried a quite a few different codes, wich did not work. So is it anyone who did that and would like to share the code with a newbie?

    Otherwise it is a great theme, easy to work with and figure out how to do.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Sovit

    (@sovitranjitkar)

    Hi PattayaNic,

    Go to Appearance -> Theme Option -> Design Option Tab -> Custom CSS
    and Paste the following CSS code to change header and footer background-image/color, border-color and box-shadow:

    For Header:

    #branding {
    background: none #YOUR-BACKGROUND-COLOR;
    border-bottom-color: #YOUR-BORDER-COLOR;
    -moz-box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
    -webkit-box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
    box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
}

    For Footer:

    #colophon {
    background: none #YOUR-BACKGROUND-COLOR;
    border-top-color: #YOUR-BORDER-COLOR;
    -moz-box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
    -webkit-box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
    box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
}

    Note: Change YOUR-BACKGROUND-COLOR field for background, YOUR-BORDER-COLOR field for border and YOUR-SHADOW-COLOR field for shadow with your own HTML Hex color code. For HTML Hex color code refer to this link https://0to255.com/ and you can add similar colors for your background, border and shadow which makes your website more beautiful.

    OR

    If u just want to hide the entire header and footer background-color/image as well as border-color and box-shadow then paste the following CSS code:

    #branding, #colophon {
    background: none;
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    Now, Click on Save All Changes Button and Refresh your browser.

    Regards
    Team Horse

    Hi Sovit,

    To piggy back on this question, I want to keep the design of the header and footer (the panel look), but just change the color. Is there any easy way to do this?

    Thanks for the fantastic theme!

    Samantha

    Thread Starter PattayaNic

    (@pattayanic)

    Thanks Sovit,

    For an accurate and easy to understand answer for a newbie. It solved me problem.

    //Nic

    samanthaborn, instead of hacking in to other threads you should create your own since we are looking for to different answers… Answers to two different questions can be confusing for other later on.

    Sovit

    (@sovitranjitkar)

    @pattayanic:
    You Welcome Sir and Thank you to u too for using our theme.

    @samanthaborn:
    Thanks for using our theme.
    Yes, there is a easy way to change a color for header and footer panel.
    I have already figure out your problem in the first section of my reply above. Please go through it.
    If you are having still confuse than create your own thread because this threads is already [RESOLVED].

    Regards
    Team Horse

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change Background Color Header & Footer’ is closed to new replies.