[Resolved] Change Background Color of "Recent Posts"

Home Forums Support Change Background Color of "Recent Posts"

This topic contains 14 replies, has 3 voices, and was last updated by  Leo 4 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #955172

    tbgr

    I’m using GP Premium’s “Marketer” template.

    The top-right widget — “Product Highlight” — has an ORANGE background color. I didn’t want that widget so I removed it.

    I DID want the “Recent Posts” widget, but the background color is still ORANGE.

    Is there a way to change the background color?

    Thank you.

    #955178

    Leo Customer Support
    #955212

    tbgr

    That did it! Thanks again!

    #955215

    Leo Customer Support
    #955843

    tbgr

    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.

    #956012

    David Customer Support

    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.

    #956083

    tbgr

    Thank you!

    #956086

    David Customer Support

    Glad we could be of help.

    #956126

    tbgr

    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;

    #956159

    Leo Customer Support

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

    Let me know 🙂

    #956167

    tbgr

    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 */

    #956168

    tbgr

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

    #956178

    Leo Customer Support

    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?

    #956185

    tbgr

    Yes, I did.

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

    Thank you, Leo.

    #956186

    Leo Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.