Support » Plugin: GiveWP - Donation Plugin and Fundraising Platform » Donate Reveal Button Styling

  • Resolved panto

    (@panto)


    Hi guys

    I have the Donate Reveal settings working well. Just would like to style the buttons separately as per this screen grab:

    https://ibb.co/PFwrtLf

    1. CSS to target the row of $ Buttons with their own background color and hover state,

    2. CSS to target the Donate Now Button with its own background color and hover state.

    Is this possible?

    Thank you 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Ben Meredith

    (@benmeredithgmailcom)

    Hi @panto!

    Yes, here’s a quick screencast showing that:

    http://somup.com/cYVUlghnGd

    Here’s the code that I used:

    button.give-donation-level-btn {
        color:blue;
        background-color:white;
    }
    
    button.give-btn.give-btn-reveal {
        color:white;
        background-color:green;
    }

    Have a great day!

    • This reply was modified 3 weeks, 6 days ago by Ben Meredith. Reason: typo

    Thanks so much Ben!

    I also managed to work out a hover color state for both button types as per code below.

    For the $ buttons, when user selects a $amount, I would like the green hover state to remain active eg: https://ibb.co/ZBw2kTL

    Would you be able to help on that?

    Here’s my current code………………

    /* Give Donate Amount Buttons */

    button.give-donation-level-btn {
    color:white;
    background-color: #fbac34
    }

    button.give-donation-level-btn:hover {
    background-color: #228AA4
    }

    /* Give Donate Now Button */

    button.give-btn.give-btn-reveal {
    color:white;
    background-color: #94287b
    }

    button.give-btn.give-btn-reveal:hover {
    background-color: #228AA4
    }

    Plugin Support Ben Meredith

    (@benmeredithgmailcom)

    Hi there,

    When a level is selected, a class of give-default-level is added to it, so if you want both the hover and the selected level to have those attributes, this code will do:

    /* Give Donate Amount Buttons */
    
    button.give-donation-level-btn {
    color:white;
    background-color: #fbac34
    }
    
    button.give-donation-level-btn:hover, button.give-default-level {
    background-color: #228AA4
    }
    
    /* Give Donate Now Button */
    
    button.give-btn.give-btn-reveal {
    color:white;
    background-color: #94287b
    }
    
    button.give-btn.give-btn-reveal:hover {
    background-color: #228AA4
    }

    I took the same code you gave me, and added a second selector to the hover declaration.

    For cool things you can do with CSS, I’d recommend checking out css-tricks.com and searching there. They have great free stuff!

    Have a great day!

    Thanks so much! Works perfectly.

    cheers

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.