Background Colour of sidebar widgets

Support
#1

Hi,
I am using X-theme. I am using main sidebar widget. There are two text widgets on the sidebar. I want both text widgets to have different background colour, is this possible.
I am using this code to change background colour, but this is changing background colour of both text widgets
.x-sidebar {background:#CDDCEC;
}
Any suggestions.

#2

Hello Anuja,

Thanks for writing in!

You need to get the widget class or at least the ID of the widget to be able to apply different background colors.
Alternatively, you can make use of this code:

.x-sidebar .widget:nth-child(1) {
  background: red;
}

.x-sidebar .widget:nth-child(2) {
  background: green;
}

I used distinct colors to see the changes right way. Feel free to change it.

#3

Yes, It’s working. Thanks

#4

Also is there a way to change the colour of heading text and paragraph text of these widgets, Thanks

#5

Using the example code above, append the heading text and paragraph selectors like this:

.x-sidebar .widget:nth-child(1) .h-widget {
    color:red;
}

.x-sidebar .widget:nth-child(1)  .textwidget p {
    color: blue;
}

Hope that helps.

#6

Thanks, I just modified CSS for heading and it is working now.

.x-sidebar .widget:nth-child(2) .textwidget h4 {
color: #FBFCFC;
}

#7

We are delighted to assist you with this.

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.