Styling the iframe-loader & spinner

Hi @ferdinandbardamu,

Happy to help you.

The multistep template loads in an iframe, to make it more resistant to changes made in the theme’s CSS. That’s helpful for avoiding theme conflicts, but makes customizing the style of the form a bit more difficult. There are two PHP code snippets in our Snippet library that will help with that process.

The first is for small changes, and adds some style inline to the form: https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/multi-step-inline-styles.php

On that one, you modify lines 13-17 with your own CSS.

The other is for enqueueing your own CSS completely via a custom stylesheet: https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/multi-step-enqueue-css.php

If you need assistance implementing custom PHP code on your website we have this guide:

https://givewp.com/documentation/resources/adding-custom-functions-to-your-wordpress-website/

Please note that this code snippet is provided as an example of how you can extend GiveWP with code. It’s up to you to implement and customize to your liking. We cannot provide support for custom code on your website, only the code that we create and distribute.

Thanks for using GiveWP! Have a great day.

Yes, I read the documentation and successfully styled all of my forms except for the green spinner and its parent div (want to drop the shadow), which is the topic of this post, as I have not been able to locate the correct CSS selectors. I was curious if anyone else had been able to style those specific elements and, if so, the selectors or approach used.

Edit: Please unmark this as “resolved” as your “answer” did not even address my question. If you do not have an answer, perhaps others in the community will.

• This reply was modified 4 years ago by ferdinand.bardamu. Reason: Noticed this was marked resolved

Hey @ferdinandbardamu,

The color of the spinner can be changed in step one of the donation form. Navigate to Donations > All Forms > select your donation form > Form Template > Step 1: Introduction.

Further customization needs to be added via code and needs custom development.