Archived topic
Creating a second CSS styled sidebar widget in Marketer
7 replies · Started by Chris on October 13, 2020
Hi, I want to style a second CSS widget like the first one in the sidebar of Marketer theme, but with different colors.
I've tried:
/* Featured widget 2 */
.sidebar .widget:second-child {
background-color: #343E47;
color: #fff;
}
.sidebar .widget:second-child .widget-title,
.sidebar .widget:second-child a:not(.button) {
color: #fff;
}
.sidebar .widget li {
margin-bottom: 15px;
}
.button.light {
background: #1b78e2;
color: #fff;
}
.button.light:hover {
background: #1b78e2;
color: #fff;
}
But that doesn't seem to work. Please explain how to make a second or multiple CSS styled widgets.
Thanks! :)
Hi there,
Does this help?
https://www.w3schools.com/cssref/sel_nth-child.asp
Thanks Leo, no that doesn't help me. I have the CSS styling seet up, but it's not reflecting in the second, third, etc. widget where I want it applicated.
I'm not a CSS pro ;)
This is the default CSS for the widget styling in Marketer (I just changed the colors)
/* Featured widget */
.sidebar .widget:first-child {
background-color: #343E47;
color: #fff;
}
.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #fff;
}
.sidebar .widget li {
margin-bottom: 15px;
}
.button.light {
background: #1b78e2;
color: #fff;
}
.button.light:hover {
background: #1b78e2;
color: #fff;
}Now if I try the same code with 'second-child' or 'third-child' it doesn't work on the second or third widget. Hope I'm explaining clearly.
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Yeah sure, see the link below.
You would do this for the second widget:
.sidebar .widget:nth-child(2) {
background-color: #343E47;
color: #fff;
}
.sidebar .widget:nth-child(2) .widget-title,
.sidebar .widget:nth-child(2) a:not(.button) {
color: #fff;
}Perfect Leo, exactly what I needed. Thanks!
No problem :)
