[Bradley HParticipant]

Hi there
I am using the wonderful X Theme and it’s absolutely amazing!
I had posted earlier about customizing certain parts of the site but forgot to ask about the header and footer code. These are the codes I was given earlier.

.site { background-color: red; }
.x-main { background-color: yellow; }
.x-sidebar { background-color: green; }

So I tried putting these in the css customization in the customizer
.header { background-color: red; }
.footer { background-color: red; }

But they did not work. So I was just wondering what the correct codes were.
Any help with this would be very much appreciated. Thanks so much again.

[RadModerator]

Hi Bradly,

Thank you for dropping by. Header could have three parts, and it will depend on which part of the header you will need background change. And there you have different option to choose from.

.x-topbar { /* header : top bar  */
background-color:red;
}

.x-navbar { /* header : navigation bar  */
background-color:red;
}

.x-widgetbar { /* header : widget bar  */
background-color:red;
}

Or all at once

.x-topbar, .x-navbar, .x-widgetbar {
background-color:red;
}

Same as for footer :

footer.x-colophon.top {
background-color:red;
}

footer.x-colophon.bottom {
background-color:red;
}

Or

footer.x-colophon.top, footer.x-colophon.bottom {
background-color:red;
}

Hope this helps.

[Bradley HParticipant]

oh my…thank you ever so much for this. This helps a lot
Thanks again 🙂

[SupportMember]

Glad we could help. If you have any question, let us know.

[194rocParticipant]

Sorry for jumping in…

I tried to apply the custom css given above but it doesn’t work on all header area…

What am I missing ?

My web site is www2.castello.it

Thanks for the advice.

Best regards,

Roberto

[FriechModerator]

Hi Roberto,

Thanks for writing in! Regretfully, at this time I am not entirely certain. Which CSS above you’re referring to? And what exactly you’re wanting to do on the header? If you wouldn’t mind providing us with a little more clarification (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[194rocParticipant]

Hello staff,

trying to create my new site at www2.castello.it I used your demo content and I would like to apply some modification.

So the actual header and footer should be dark gray as in my actual site http://www.castello.it (see screenshot: http://prntscr.com/9wg3w9)

On the production site www2 I try to apply the code written on post https://community.theme.co/forums/topic/css-code-for-footer-and-header/#post-32727 but the result as you can see is not what expected..

Could I receive some tips on how to modify the custom css accordingly to my needs ?

Thanks for the help,

best regards,

Roberto

[194rocParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for the clarification. You can add this under Custom > CSS in the Customizer.

body,
.x-logobar,
.x-topbar,
.x-navbar,
.x-widgetbar,
footer.x-colophon.top,
footer.x-colophon.bottom {
	background-color: #4c4c4c !important;
}

Hope it helps, Cheers!

[194rocParticipant]

Hello Staff,

it works great.

Thank you very much for your help.

Best regards,

Roberto

[ThaiModerator]

Glad it worked, Roberto.

If you need anything else, please let us know.

[Author]

Posts