Title: Iframe Filter css code not working Last modified: January 4, 2025 --- # Iframe Filter css code not working * Resolved [jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/) * (@jayyogvihalkrupa) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/) * Hi * Have created site with breakdance builder * Have tried this css filter for overwrite style in inframe * [https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php](https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php) * but it is not working * see added code * [https://nimb.ws/wpGfLQ9](https://nimb.ws/wpGfLQ9) * check on front end css not applying * [https://prnt.sc/aFbbdtyBtAJy](https://prnt.sc/aFbbdtyBtAJy) * CODE * /** - The multi-Step form template and the donor dashboard load in an iframe, which prevents theme styles from interfering with their styles. - To style them, use this PHP snippet to add inline styles. Replace lines 16- 26 with your custom styles. */ * function override_iframe_template_styles_with_inline_styles() { wp_add_inline_style(/*** Below, use ‘give-sequoia-template-css’ to style the Multi-Step form template,*‘ give-styles’ to style the donor dashboard, and ‘give-classic-template’ to style the Classic template_/ ‘give-sequoia-template-css’, ‘ /_ add styles here! A sample( turns the headline text blue): _/ .introduction .headline { color: blue; } /_ It changes the donor name on the donor dashboard to green: */.give-donor-dashboard- donor-info__details .give-donor-dashboard-donor-info__name {color: red;}.givewp- donation-form__steps {box-shadow: 0px 10px 25px 0px var(–bdp-shadow) !important;}. givewp-donation-form__steps .givewp-donation-form__steps-button-next {padding: 30px !important;}‘);}add_action(‘wp_print_styles’, ‘override_iframe_template_styles_with_inline_styles’, 10); * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fiframe-filter-css-code-not-working%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * Plugin Support [Robin Joshua Del Mundo](https://wordpress.org/support/users/robindelmundo/) * (@robindelmundo) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18230879) * Hi [@jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/), * Glad you reached out! Happy to help with this one. * Thanks for checking out our code snippets! That one is still viable for our option- based forms and the Donor Dashboard, but they won’t work with forms made using the Visual Form Builder. * I noticed that you have some styles with the donor dashboard. With that, you can utilize the code snippet that you’ve already used earlier, but make sure to attach it to ‘`give-styles`‘ so that it can target the Donor Dashboard. * We’re still in the process of updating our snippets to work with the Visual Form Builder, but for now, you can use this code snippet. * ```wp-block-code function override_iframe_template_styles_with_inline_styles_vfb() { wp_add_inline_style( 'givewp-base-form-styles', ' /* add styles here!*/ .givewp-donation-form__steps { box-shadow: 0px 10px 25px 0px var(–bdp-shadow) !important; } .givewp-donation-form__steps .givewp-donation-form__steps-button-next { padding: 30px !important; } ' );}add_action('wp_print_styles', 'override_iframe_template_styles_with_inline_styles_vfb', 10); ``` * 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/](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. * Please let me know if you have further questions. * I’m always happy to help! * Thread Starter [jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/) * (@jayyogvihalkrupa) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18233422) * Thank you so much * Issue has been resolved * Thread Starter [jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/) * (@jayyogvihalkrupa) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18236345) * Hi * Again * In Donor Dashboard Overwrite CSS is not working * [https://nimb.ws/mfoJFcD](https://nimb.ws/mfoJFcD) * CSS CODE * ```wp-block-code #give-donor-dashboard { max-width: unset !important; } #give-donor-dashboard .give-donor-dashboard-desktop-layout { display: block !important; } ``` * Thread Starter [jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/) * (@jayyogvihalkrupa) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18236349) * How to Overwrite Donor Dashboard CSS? * Plugin Support [Robin Joshua Del Mundo](https://wordpress.org/support/users/robindelmundo/) * (@robindelmundo) * [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18236961) * Hi [@jayyogvihalkrupa](https://wordpress.org/support/users/jayyogvihalkrupa/), * You can use this code snippet to overwrite the CSS of the donor dashboard — [https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/enqueue-style-for-givewp-iframes.php](https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/enqueue-style-for-givewp-iframes.php). * Make sure to use ‘give-styles’ to target the donor dashboard. * Since this is a different inquiry, please start a new post if you have further questions about this. * I’m marking this one as resolved (since the original inquiry has been). * Thank you for using GiveWP! * Have a wonderful day. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Iframe Filter css code not working’ is closed to new replies. * ![](https://ps.w.org/give/assets/icon-256x256.jpg?rev=2873287) * [GiveWP - Donation Plugin and Fundraising Platform](https://wordpress.org/plugins/give/) * [Frequently Asked Questions](https://wordpress.org/plugins/give/#faq) * [Support Threads](https://wordpress.org/support/plugin/give/) * [Active Topics](https://wordpress.org/support/plugin/give/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/give/unresolved/) * [Reviews](https://wordpress.org/support/plugin/give/reviews/) * 5 replies * 2 participants * Last reply from: [Robin Joshua Del Mundo](https://wordpress.org/support/users/robindelmundo/) * Last activity: [1 year, 5 months ago](https://wordpress.org/support/topic/iframe-filter-css-code-not-working/#post-18236961) * Status: resolved