customize form fields

Hi there,

Happy to help you out here.

You can target the Goal progress bar with the class give-progress-bar. To change the color of the progress, you can change the background-color. There is also a setting in the form editor to change this without needing additional CSS under the goal section.

To target the form fields you’re looking for the give-input class.

There are times where your themes style.css file can be a bit opinionated, and in those instances, you may have to find these styles and make some changes in order for the changes you implement to display correctly.

If you’re looking for specific guidance on something feel free to send over a link to your donation form, and I can take a closer look.

Thanks!

Thank you for your assistance. I tried a snippet of code to change the appearance of the ‘donate now’ button by adding the CSS to ‘additional CSS’ section of my theme ‘generate press’.

#give-purchase-button {
color: white;
background-color: red;
}

It worked so I assumed the following code would work. It didn’t

#give-progress-bar {
background-color: #00061c;
}

P.S. I have no experience with coding O_o

Hi there,

Here is some more CSS that can be used to force that color on the progress bar:

.give-progress-bar span {
    background-color: #00061c !important;
}

While it would be best to change the color form the donation form editor under the “Donation Goal” this will overwrite the admin settings.

If you would like to learn more, here is a link to our documentation on this:
https://givewp.com/documentation/core/give-forms/donation-goal/

Hi there,

I’m going to mark this ticket as resolved, but if there is anything else you need don’t hesitate to reach out.

Thanks.