Hi @ildomandatore,
The multi-step donation form and the donor dashboard load in an iframe, to make them more resistant to changes made in the theme’s CSS. That’s helpful for avoiding theme conflicts, but makes customizing the style of them 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 donor dashboard or the multi-step donation form: https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php
On that one, you modify lines 16-26 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/enqueue-style-for-givewp-iframes.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.
I keep having changes in the child theme and I don’t understand who makes them … I should be the only one.
this is the fourth time this unwanted code has appeared;
element.style {
position: absolute;
}
.introduction {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.give-section {
display: flex;
flex-direction: column;
}
user agent stylesheet
div {
display: block;
}
I didn’t understand the difference between the child theme and the Code Snippets plugin.
I strongly suspect that I have to study php to use which plugin. I really don’t want to study, after being stuck for 9 months on nonsense … Can I use CSS? I’m afraid not …
Hi @ildomandatore,
I also have no idea what’s writing the CSS code into your child theme’s stylesheet. GiveWP certainly is not.
The element.style and user agent stylesheet are only generated by the browser and only seen when you view the CSS via the developer tools. Like if someone had just copied the developer tools code into the stylesheet.
That said, you don’t need to learn PHP. The code snippets I gave you are can just be copied/pasted. The instructions are very clear on the parts that you need to edit. These snippets have been used by a lot of other novice users as well.
I also want to clarify that you don’t need to create a child theme. You can use the Code Snippets plugin instead. That plugin makes it so much easier to implement PHP code.
Or, if you want to avoid using snippets and PHP you can always use the legacy form templates.
Interesting; I could remove the Astra child theme and use the plugin you suggested.
How do I see changes in real time, like in child themes?
The first code you gave me goes on plugin Code Snippet and the second on my theme?
If I want to make other changes, what should I do? I’m afraid I should make a long list.
Hi @ildomandatore,
Happy to clarify. If you want to implement several lines of CSS into the multistep for template use this snippet: https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/enqueue-style-for-givewp-iframes.php
– Create a new CSS file and name it givewp-iframes-styles.css
– Add your CSS customizations and place the file in your child theme folder
– Implement the snippet using the Code Snippets plugin.
That’s it. Let me know if you have any other questions.
Hey @ildomandatore,
Do you still need assistance here? I’ll close this ticket for now but if you still need assistance with it, please reopen it and we’ll happily assist you.
If you have other issues, you can open a new ticket and we’ll help you there too.
Thanks for using GiveWP! Have a great day.
I took the photo to confirm if I did everything right. Can I now change the donation form?
Hi @ildomandatore,
I just checked the source code of the form’s iframe: https://oldfreegame.com/en/give/donation-form?giveDonationFormInIframe=1
And I don’t see any custom CSS there. This tells that either you need to clear your cache or that you didn’t add the CSS with the snippet I mentioned in my first reply:https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php
On that one, you modify lines 16-26 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/enqueue-style-for-givewp-iframes.php
Another issue I noticed is that the form is not loading on the form page:https://oldfreegame.com/en/make-a-donation/ because the iframe is being “lazyloaded”. If you use a “lazy loading” plugin like Smush make sure to exclude iframes from it.
Ok, it seems to be working on the iframe now: https://oldfreegame.com/en/give/donation-form?giveDonationFormInIframe=1
The heading is red.
The form still doesn’t load here because of that lazyloading issue: https://oldfreegame.com/en/make-a-donation/
