How to edit colour of my footer

Hi Angelika,

You can technically do that with CSS, but it should be possible to do the same from the editor.

Can you try going to Site Editor > Patterns > Template parts > Footer, then see if you find your footer there? You should be able to change the background color there.

If you really want to do with CSS, you just use the tag name as the seletor, it should work perfectly:

footer {
    background: red;
}

You can add this CSS by going to the Site Editor, then Styles. There you can click on the three-dot icon (kebab menu), and go to Additional CSS.

Image as example:

Full Size: https://d.pr/i/Yox1tm

Dear Felipe,

thank you so much for being so helpful. With the additional CSS I was able to change the background colour of my footer. I wrote it into additional CSS as you explained to me. ->

footer {
background: #EEEEE0;
}

The same way I tried to change the background colour of my header. So I wrote below

header {
background: #EEEEE0;
}

but nothing changes. What has happened?

Another question: When do I write my additional CSS in the additional CSS field that you showed and when do I write it into: navigation -> styles ->edit design of blocks -> then I choose navigation and put the additional CSS there.

Where is the difference? This is not clear to me.

Thank you in advance and BR from Vienna

Angelika

Hey @hellblauervogel! For the header, you can do something like this:

header.wp-block-template-part {
  // your css properties here
}

I would still recommend that you use the site editor’s built-in tools to change colors of elements.

Another question: When do I write my additional CSS in the additional CSS field that you showed and when do I write it into: navigation -> styles ->edit design of blocks -> then I choose navigation and put the additional CSS there.

In general, any general css code should be under the main CSS area, as shown by Felipe in the last reply. The longer way that you have mentioned, should only be used if you want to apply any specific css to any specific instance of a block.

Dear Kavya,

thank you so much for your reply. I have already tried before to change the colour of the header using the built in colour tool. I can do the change (system tells me I do the change in the template) but when I take a look at the website I see no change. How can I find out what went wrong?

So I tried now the way to add the additional CSS as follows:

header.wp-block-template-part {
background: #EEEEE0;
}

But still no change. Why? What has happened?

Hope you can help me.

Looking forward to hearing from you.

BR Angelika

I want to add the information that when I take a look at the website and the header I see at the bottom of the header a little bit of the correct colour. But for some reason the correct colour is overlayed by a wrong one. Hope this additional information helps and looking forward to hearing from you.BR Angelika

It looks like you have set the background for an inner block inside the main header block. Can you try using the List view and see if there are multiple levels inside the main header that have any background set?