- This topic has 7 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
October 13, 2020 at 12:05 pm #1487330
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! π
October 13, 2020 at 12:30 pm #1487371Leo
StaffCustomer SupportHi there,
Does this help?
https://www.w3schools.com/cssref/sel_nth-child.aspDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 13, 2020 at 12:41 pm #1487394Chris
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.
October 13, 2020 at 12:44 pm #1487397Leo
StaffCustomer SupportAny 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/October 13, 2020 at 1:54 pm #1487491Chris
Yeah sure, see the link below.
October 13, 2020 at 6:14 pm #1487679Leo
StaffCustomer SupportYou 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/October 14, 2020 at 6:59 am #1488500Chris
Perfect Leo, exactly what I needed. Thanks!
October 14, 2020 at 8:56 am #1488839Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.