Change Widget Color in Sidebar

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?

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.

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

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

Hi there,

so this would target the second widget:

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

Thanks David, now i get it.

Glad we could be of help.