Right Sidebar - Encapsulate a widget in a colorful frame

Hi there,

You could do something like this:

.sidebar .widget:first-child {
    background-color: #e86000;
    color: #fff;
}

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

More on child selector:
https://www.w3schools.com/cssref/sel_nth-child.asp

Let me know if this helps :)

Hi Leo,

I tried it and put the code in the additional-css. Didn't seem to work. Have I put it in the wrong place?

Ashish

Hi,

I removed the :first-child from the widget you gave me and I tried this code:

/* Sidebar widget color */
.sidebar .widget {
background-color: #e86000;
color: #fff;
}

This seems to make all the widgets to the color #e86000.

I also tried this code found in the forum that boxes each of the widget:

.inside-article, .sidebar .widget, .comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
If I add background-color: #e86000; to above it too changes all the widgets to the same color.

Is it possible to have individual colors for each of the widgets on the sidebar?

Found it in the support forum. This is what I was looking for.

https://generatepress.com/forums/topic/change-widget-color-in-sidebar/

I'm sorry, didn't find it earlier, and opened another topic. Thanks, guys. You're awesome |

Glad to hear :)