Any way to change the Give button in sidebar widget to a custom one?

Hi @shihtzurescue

I’m glad you reached out here.

The easiest way to change the button is using CSS code on the page to modify the appearance of the button. That way you still get all the benefits of a true GiveWP button, but can style it to match the look you are going for.

Without being able to see the page in question, I can give you some general CSS tips:

Try a snippet like this to change the button to red with white text and a black border:

.give-btn-modal {
    background:red;
    border:2px solid black;
    color:white;
}

Note that that snippet will change all modal (and button mode) GiveWP buttons to that style. You can select a specific form’s buttons by specifying the Form ID like this:

[id*=give-form-805] .give-btn-modal {
    background:red;
    border:2px solid black;
    color:white;
}

You’d substitute the 805 in that code for your form? ID.

We try our best to “stay in our lane” with Give’s CSS, and let the theme do the bulk of the work of styling.

If you need assistance implementing custom CSS on your WordPress website, we have this guide for you:
https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/ ID.

Thanks!

• This reply was modified 4 years, 10 months ago by Ben Meredith. Reason: typo

Thank you!

Hi Ben,
I had similar issues, but thanks to your clear instructions, I was able to change both the modal and the submit button with the colors of my choosing.

However, although it might be somewhere deep in the forum history, I cannot find how to change the colors of the donation-level buttons. I have 5 levels, and the default options are grey with black text that changes to a different grey with white text on hover. I’d prefer to customize that. What do I replace here to stylize the right buttons?:

.give-btn-modal {
background:orange;
border:2px solid black;
color:white;
}

@malangali we were able to change all the buttons by using the following:

For example:
.give-btn {
background: #d6efff
}
.give-btn:hover {
background: #78c3fb;
}

Hope this helps.

• This reply was modified 4 years, 10 months ago by shihtzurescue.

Thanks, I think it looks pretty good! https://www.teachyoubackwards.com/tipjar/

It would be helpful to have the button code names written in their descriptions. That way, it would be easy to know that one is editing “give-btn” or “give-btn-modal”. Otherwise it is not obvious, at least to a bum like me.