[Support request] Change Widget Color in Sidebar

[Sonja]

Hello,

how to change the color of the sidebar widgets in marketer?
I want, that the sidebar widgets have different colors. And if the background have a darker color, also the color of the text should be white.

[Leo]

Hi there,

The original Marketer template is using this CSS to color the first sidebar widget:

.sidebar .widget:first-child {
    background-color: #e86000;
    color: #fff;
}

Are you wanting each sidebar widget to be different?

Can you link me to your site in question?

[Sonja]

Yes, like i said, i want each sidebar widget to be different. I try to design this site before launch and it is protected, so i can not link to it.

Would be nice, if there is a documentation for each site in the library. Since Marketer Site have a colored sidebar widget, i can imagine, that some other users have this question also.

[Leo]

So you can basically use the CSS above then just keep adding rules with the nth-child selector:
https://www.w3schools.com/cssref/sel_nth-child.asp

[Sonja]

Thanks Leo. Can you please give an example, how this code looks like for some more widgets in the sidebar?

[David]

Hi there,

so this would target the second widget:

.sidebar .widget:nth-child(2) {
    background-color: #e86000;
    color: #fff;
}

[Sonja]

Thanks David, now i get it.

[David]

Glad we could be of help.

[Author]

Posts