Edit footer

Support
#22

thank you. I already got the css to get it blurry. My problem is that the filter is applied to the whole popup, even the text. All I want is the effect to be applied to the background of the window

#23

Hi there,

Thatā€™s what Iā€™m trying to say in my previous reply :slight_smile:

Because you canā€™t directly apply it to the background, instead, it will be applied in the whole element. Unless your background is a type of overlay which isnā€™t. But letā€™s try this, please remove the transparent background that you applied, instead, add this


    .cc-color-override-1820807693.cc-window:before {
       content : "";
       position: absolute;
       left: 0;
       top:0;
       bottom: 0;
       right: 0;
       background: rgba( 255, 255, 255, 0.5 );
       z-index: -1;


-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);


    }

Thanks!

#24

Thanks pal. Got rid of the bg color in the functions.php. Now everything is set by the global css. however the blur effect was not applied :confused:

#25

Hi,

Where have you added the code? I checked your site source code but canā€™t see the code getting added.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#26

added it to the global css

#27

Hi There,

Iā€™ve changed the custom CSS to this and it seems to work:

.cc-window:before {
       content : "";
       position: absolute;
       left: 0;
       top:0;
       bottom: 0;
       right: 0;
       background: rgba( 255, 255, 255, 0.5 );
       z-index: -1;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
}

Can you please check again?

Thanks.

#28

Thank you :slight_smile: But do you see the intended blur on the stuff behind the popup? I donā€™t, cache cleaned and everything

#29

Hi,

You can try this code instead.

.cc-window:before {
  border:10px solid #eee;
       content : "";
       position: absolute;
       left: 0;
       top:0;
       bottom: 0;
       right: 0;
       background: rgba( 255, 255, 255, 0.5 );
       z-index: -1;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
}

Hope that helps.

1 Like
#30

THank you. But now it just got a little darker

#31

Hi,

You may change #eee to adjust the color.

You can get color hex value from the link below.

https://www.w3schools.com/colors/colors_picker.asp

You can try this.

.cc-window:before {
       border:10px solid #f2f2f2;
       content : "";
       position: absolute;
       left: 0;
       top:0;
       bottom: 0;
       right: 0;
       background: rgba( 255, 255, 255, 0.5 );
       z-index: -1;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
}

Hope that helps.

#32

Ok I found out, that it is not possible to achieve the effect that I wanted. Iā€™d have to use the
ā€œbackdrop-filterā€
However this feature is only available on safari, and coming to edge. This is how it looks now:
.cc-window:before { content : ""; position: absolute; left: 0; top:0; bottom: 0; right: 0; background: rgba( 255, 255, 255, 0.5 ); z-index: -1; -webkit-backdrop-filter: blur(10px); }

How to I implement a fallback (with another background color), for all the browsers that donā€™t support that feature yet?

#33

Hi there,

Please note that we already went above and beyond to provide you some suggestions to what you are trying to achieve which falls beyond the scope of our support as this requires custom coding as it is not a feature that is available out of the box with the theme.

Please check this link with some information about CSS Workaround for backdrop-filter.

Hope this helps.

#34

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.