Change Background Color of "Recent Posts"

Hi there,

This should help:
https://generatepress.com/forums/topic/how-to-change-background-color-of-sidebar/#post-934724

Let me know :)

That did it! Thanks again!

No problem :)

For us semi-newbies, I think it would be helpful to explain just HOW to change the background color from orange to another color.

/* Featured widget */
.sidebar .widget:first-child {
background-color: #e86000;
color: #fff;
-------------------------------------------

In the example above, I assume #e86000 is "orange"? Is there a "color wheel" link you can provide that displays the various other colors?

And does #fff remain the same ... or does that change, too?

Thank you.

Hi there,

i find this site really handy for getting hex colors:

https://www.colorhexa.com

You can type in a color name or a specific hex/rgb/lab color etc...

The color: #fff; is setting the color of the text to white. Its full code should be: #ffffff; but can be reduced to only 3 letters as they are all the same values.

Thank you!

Glad we could be of help.

I'd like to change the text color from white to black.

In the last line below, I changed #fff to #000000 but the text color remained white.

Thanks for your help!
--------------------------

/* Featured widget */
.sidebar .widget:first-child {
background-color: #e86000;
color: #000000;

Can you link me to the site in question with the CSS added?

Let me know :)

https://theblumenthalgolfreport.com/

/* GeneratePress Site CSS */ .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);
}

/* Featured widget */
.sidebar .widget:first-child {
background-color: #e86000;
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: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}
} /* End GeneratePress Site CSS */

What I just sent you had the original color codes: orange background & white text.

I'm still seeing this CSS in the code:

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

Have you tried clear and disable the caching plugin after you made the change?

Yes, I did.

But I've decided to leave the orange background and white text as is.

Thank you, Leo.

Awesome :)