Creating a second CSS styled sidebar widget in Marketer

[Chris]

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! 🙂

[Leo]

Hi there,

Does this help?
https://www.w3schools.com/cssref/sel_nth-child.asp

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

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.

[Leo]

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Yeah sure, see the link below.

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Perfect Leo, exactly what I needed. Thanks!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts