Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Customising footer button colour

Home Forums Support Customising footer button colour

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #359460
    Maria

    Hi, I’d like to know how to change colour on this widget’s button. See green section “Let’s get started…” https://prettynicewebsite.com/coastalpridebuilders

    No matter what I do, the grey doesn’t change. This is the CSS I have added.
    I’ve checked the Colour options on the Pro theme, but no luck. Nothing happens. Obviously, this is a CSS styling thing, which I am aiming to do better each time I use GP.

    Can you please have a look at my CSS below? I think there are some unnecessary elements there, so your advise will be greatly appreciated. Thanks again for creating an awesome product!

    }
    .footer-widgets {
    background-color: #8dc63f;
    clear: both;
    font-size: 24px;
    font-size: 2.4rem;
    padding: 50px 0;
    text-align: center;
    }

    .footer-widgets,
    .footer-widgets a,
    .footer-widgets a:focus,
    .footer-widgets a:hover {
    color: #fff !important;
    text-decoration: none;
    }

    .footer-widgets .widget {
    margin-bottom: 20px;
    }

    .footer-widgets .widget-title {
    color: #fff;
    font-size: 14px;
    font-size: 2.8rem;
    }

    .footer-widgets a.button:hover,
    .footer-widgets a.button:focus,
    .home-odd a.button:hover,
    .home-odd a.button:focus {
    background-color: #fff;
    color: #000 !important;
    }
    .footer-widgets a.button,
    .footer-widgets button,{
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 20px;
    padding: 10px 10px;
    text-decoration: none;
    }

    Tatiana Hindes
    Graphic Designer – Print and Digital

    GeneratePress 1.3.48
    #359565
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .footer-widgets a.button {
        background: #fff;
        color: #222 !important;
    }
    
    .footer-widgets a.button:hover {
        background: #222;
        color: #fff !important;
    }
    #359891
    Maria

    It worked! Thanks once again for your help.

    Tatiana Hindes
    Graphic Designer – Print and Digital

    #360026
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.