Ethos topbar content colour

[SBA-Marketing]

Hi there,

I have enabled the Topbar on my website, but the text doesn’t display. I am guessing that it might be because the text colour is set to white. Where can I change the topbar content colour?

And is it possible to control the colour of the footer area and footer content?

I am using the Agency demo.

Many thanks!
Daniela

[SBA-Marketing]

One more thing How can I align the text in the topbar center?

Many thanks!

[Prasant]

Hello @SBA-Marketing,

Thanks for asking.

Please use following CSS selector .x-topbar .p-info a to specifically change top bar content color. In that you need to use CSS color property. Here is a tutorial link to CSS color property. https://www.w3schools.com/cssref/pr_text_color.asp

For footer here is the main CSS selector you need to use footer.x-colophon.top. And depending on the type of content eg list item, link element you can apply CSS color rule.

In order to center align content, please use text-align CSS property. Here is the tutorial that you can refer. https://www.w3schools.com/cssref/pr_text_text-align.asp

Thanks.

[SBA-Marketing]

Hello @Prasant,

Thanks a lot for your reply! The coloring of the top bar and the centering of the footer worked out really well. But somehow the content of the top bar won’t align center. Also, the text content in the footer won’t change color (that’s the menu on the bottom and social media icons. When I hover over them they turn from white to purple, but I just want them to be purple from the beginning).

This is the code I used:

footer.x-colophon.top {
text-align: center;
}

.x-topbar .p-info {
color: #5e2058;
text-align: center;
}

Could you point out my mistake?

Many thanks!
Daniela

[SBA-Marketing]

Hello again

I managed to fix the code myself. Here’s what I used:

footer.x-colophon.top {
background-color: #fff !important;
box-shadow: none !important;
color: #5e2058 !important;
text-align: center;
}

footer.x-colophon.bottom {
background-color: #fff !important;
color: #5e2058 !important;
text-align: center;
}

footer.x-colophon.bottom a {
color: #5e2058 !important;
}

[thai]

Glad you’ve sorted it out