How do I change the background color of the header and footer of my website?

[Webster8]

[Note: The title of this post has been edited by a moderator.]

Hello,

I am currently creating a weebly website using a theme that I have selected. However, the only thing that I don't like is that both the header and footer are white, so I would like to change the color of both of them. I have tried looking at other community posts and changing the code, but so far nothing has worked for me. Could someone help with this? It would be greatly appreciated, and thanks in advance.

[Adam7 · Accepted solution]

For sites built using the classic Weebly drag and drop website editor, you'll need to do some CSS customization like @BJ  gave in the post I linked.

If you built your site with the Square Online editor, click on your header or footer section, then click on Customize and then Section style. You can change the background to a color or image (or transparent if it's the header section).

[BJ5 · Accepted solution]

Add this to Settings > SEO > Header Code:

<style>
	.cento-header, .cento-header .nav-wrap, .footer-wrap
	{
		background: #000000 !important;
	}
</style>

Change the #000000 part to whatever color you want to use for them.

[Adam7 · Accepted solution]

For sites built using the classic Weebly drag and drop website editor, you'll need to do some CSS customization like @BJ  gave in the post I linked.

If you built your site with the Square Online editor, click on your header or footer section, then click on Customize and then Section style. You can change the background to a color or image (or transparent if it's the header section).

[Webster8]

The theme is John and Maggy- Cento. The header and footer both default to white

[BJ5 · Accepted solution]

Add this to Settings > SEO > Header Code:

<style>
	.cento-header, .cento-header .nav-wrap, .footer-wrap
	{
		background: #000000 !important;
	}
</style>

Change the #000000 part to whatever color you want to use for them.

[Webster8]

THANK YOU!!

[jsequoia]

hi there

I've looked through this site and havent found my answer so thought I'd try herre.

I only want to change the footer colour on this site: http://www.bcanimalownersassociation.ca

the theme is spotlight business

any help would be much appreciated

thanks

Jai

[jsequoia]

forgot to choose to be emailed when someone answers so doing that here.

[Queso]

Hey there jsequoia!

While I can't lend a hand with code details, I wanted to let you know that you can use the top right menu on the main post to Subscribe to a thread. That way, you can keep up on replies, even if you don't want to post yet.

[longtimeweeble]

UGh! I've tried all the fixes I can find to change just the footer background on theme: claen lines - business to black but can't get anythgin to stick. Any suggestions much appreciated!

[Adam7]

Could you post a link to your site, @longtimeweeble? I think it would be easier for our Community members to help if they can see your Footer code.

[longtimeweeble]

Thanks so much, Adam! My site is kimberlyteal.weebly.com it has a password on it becaue I don't want it to be "live" yet - so much more to do. The password is "success".

Really appreciate your time!

[BJ5]

Try adding this to Settings > SEO > Header Code:

<style>
#footer
{
background: #000 !important;
}
</style>

[jsequoia]

this didn't work for me. here is the style code from the 'styles' section of the css editor in weebly called: _footer.less /* Footer */ .footer-wrap { .flex-shrink(0); width: 100%; background: @headerColor; font-size: 14px; color: @backgroundColor; } .footer-wrap .wsite-footer { margin: 0 auto; padding: 35px 0 20px; } .footer-wrap h2 { .font-tertiary; color: @backgroundColor; font-size: 12px; font-weight: 700; line-height: normal; text-transform: uppercase; } .footer-wrap p, .footer-wrap div.paragraph { color: @backgroundColor; font-size: 14px; padding: 0 0 15px; } .footer-wrap blockquote { .font-tertiary; background: url(images/quotes.png) no-repeat 0px 15px; font-size: 14px; color: @backgroundColor; } .footer-wrap .wsite-form-container { text-align: left; margin-top: 0 !important; } .footer-wrap .form-radio-container { color: @backgroundColor; font-size: 14px; } .footer-wrap .wsite-form-label { color: @backgroundColor; } .footer-wrap div.paragraph { .font-tertiary; color: @backgroundColor; font-size: 14px; ul { padding-left: 0 !important; li { .font-primary; margin-bottom: 10px; color: @backgroundColor; font-size: 16px; list-style-type: none !important; } } a { color: @fontColor; &:hover { color: @primaryColor; } } } .footer-wrap div.paragraph ul { } if anyone knows how I change the @backgroundColor portion, I think that would be what I need to do?

[BJ5]

Looks like your code is a little different than the test site I was playing with. Try changing this:

.footer-wrap { .flex-shrink(0); width: 100%; background: @headerColor; font-size: 14px; color: @backgroundColor; }

To this:

.footer-wrap { .flex-shrink(0); width: 100%; background: @headerColor; font-size: 14px; color: #000; }

[jsequoia]

nope that didn't work.

I"m obviously not a css person, but dont we somewhere have to attribute the @backgroundColor to the new colour I want?

hope someone can help me figure this out.

cheers

Jai

[BJ5 · Accepted solution]

I made a mistake in my code. Oops!  

Try this change instead:

.footer-wrap { .flex-shrink(0); width: 100%; background: #000; font-size: 14px; color: @backgroundColor; }

[longtimeweeble]

It worked! Thank you SO MUCH!!

[netomu]

Hi, this code worked great for me, but now i need to change the width, i need to do it all thw way to the left and right, do you think you can help me with that? Thank you.

[netomu]

Hi, this code worked great for me, but now i need to change the width, i need to do it all thw way to the left and right, do you think you can help me with that? Thank you.

[ToeClark]

I followed this help but the header color did not change. Any idea why?

[anonymous94]

it seemed like the header not change the colour