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.

[cruzintolight]

That didn't work....

aynicenter.weebly.com

When I scroll down, it changes from white to a light peach. I need it to stay white or it conflicts with my logo... any ideas? 

[ningkaiyang]

that doesnt do anything for me. I set the color to #005992, dark blue, but it still doesn't do anything.

[Bernadette3]

It's possible the code is theme specific. Can you post a link to your website so people in the community can take a look?

[keno1]

Hi, I added exactly this (but chamged the 6-digit color) and nothing changed.  Do you know what could've happened?

[MTpockets2]

Hi @keno,

Looks like you're wanting to make your footer the same black color as the rest of your site. If so try this code. Place it under Settings > SEO > header code, hit save, and then publish. 

<style>
.footer {
    background-color: #020202 !important;
}
</style>

[cc1231]

I am not a computer person. What am I chaning the number to? 

[Bernadette3]

Hi @cc123  the 6 digit number in the code is called a "hex code" and is used in html codes. Here's a site that will show you the hex code numbers for any color you choose. https://htmlcolorcodes.com/

[Shingo___]

This code didn'r work for me.

I want to change just header's backgound color. I want to keep the font color.

Can anyone help me?

Thank you

[rlyon]

I tried to use this code and it did not work. Want white instead of black. Any other suggestions?

[Bernadette3]

Hi @rlyon I'm not super familiar with css code, but I do know that sometimes the code does not work in the editor, but applies to the live site? Did you check to see if the site is working properly when published? 

[samiam1]

Hi there Adam,

I created a custom HTML weebly site several years ago and decided it needed a refresh. I am not a coder, just a determined health coach I transitioned to the theme 'Clean Lines' today and mucked about to simplify and adjust things. The one spot I'm stuck is changing the Nav Bar background color from white to anything else. I've become rather more obcessed with sorting it out than the color itself at this point.

I've searched for nav background color and hex color codes, but it seems this theme is using labels for colors maybe? My site is http://coastalcoaching.weebly.com/

Any help would be very much appreciated!

[Condoleeza]

I'm stuck.  I too am trying to change the color of my footer to black.  Everything I try simply reverts everything to the default font and teal colors but doesn't change the footer color.  Can you please explain to me as if I was 5 how to do this!  Where exactly do I put the code and what do I put in.  I know that the black html code is #020202.  I have not gone live yet with my site but here is the url https://www.embodyfc.weebly.com.

[longtimeweeble]

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

Hi - this code copied form Bj above worked great for me. Put it in the Settings-SEO-header code box.

Good luck! 

[Condoleeza]

---

@longtimeweeble wrote:

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

Hi - this code copied form Bj above worked great for me. Put it in the Settings-SEO-header code box.

Good luck! 

---

Darn.  Nothing happened when I put it the code in the header code box or footer code box.  I do have other stuff in there that my digital marketing company put in.  I wonder if that is the issue.  Is this code specific to the Clean Lines template?

[Laura17]

Hey,

my way is go to THEMES - HTML (in the bottom for the coding) - look for STYLES - variables lights - change the color code from #ffffff to your color code in the first top row. Thats it!

It worked for me for me for Header and Footer at the same time. 

[Ada11]

Thank you, so much!!