[Resolved] Right Sidebar – Encapsulate a widget in a colorful frame

[Ashish]

Hi,

Is it possible to encapsulate sidebar widgets in a frame that has a background color? Can I assign different colored frames to each widget? Also, can I have a nice looking optional divider between the widgets?

Ashish

[Leo]

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 🙂

[Ashish]

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

[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?

[Ashish]

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 |

[Leo]

Glad to hear 🙂

[Author]

Posts