Iframe Filter css code not working

Resolved jayyogvihalkrupa
(@jayyogvihalkrupa)

1 year, 1 month ago
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

but it is not working

see added code

https://nimb.ws/wpGfLQ9

check on front end css not applying

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 to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support Robin Joshua Del Mundo
(@robindelmundo)

1 year, 1 month ago
Hi @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.
```
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/

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
(@jayyogvihalkrupa)

1 year, 1 month ago

Thank you so much

Issue has been resolved
Thread Starter jayyogvihalkrupa
(@jayyogvihalkrupa)

1 year, 1 month ago
Hi

Again

In Donor Dashboard Overwrite CSS is not working

https://nimb.ws/mfoJFcD

CSS CODE
```
#give-donor-dashboard {
        max-width: unset !important;
    }

    #give-donor-dashboard .give-donor-dashboard-desktop-layout {
        display: block !important;
    }
```
Thread Starter jayyogvihalkrupa
(@jayyogvihalkrupa)

1 year, 1 month ago

How to Overwrite Donor Dashboard CSS?

Plugin Support Robin Joshua Del Mundo
(@robindelmundo)

1 year, 1 month ago

Hi @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.

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.