[Plugin: Easy FancyBox] Rounded Corners

Hi,

It can be done with some extra CSS rules but you need to remove the drop shadow because those corners cannot be rounded very easily. To see an example by someone that made it rounded corners work with Easy FancyBox 1.4.3 go to https://www.luckymedia.com/clients/Linus/content/?page_id=3353 and click on one of the “See more” links and open “Agenda”…

He did it by adding border-radius rules for both #fancybox-outer and #fancybox-content

Alternatively, you can wait for the next release of Easy FancyBox which will include the brand new fancyBox2 with rounded corners and slideshow ??

If you do still want to do it Braseco, until the new version arrives, open up jquery.fancybox-1.3.4.css
The path should be.
wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.css

Just delete from line 188 (.fancybox-bg ) to line 254 (#fancybox-bg-nw)

So that will be all the ids like below.
#fancybox-bg-n, #fancybox-bg-ne, #fancybox-bg-e etc ??

Then add this to the file as Ravan already mentioned.

#fancybox-outer, #fancybox-content {border-radius:10px;-moz-box-shadow: 0 4px 8px #444; -webkit-box-shadow: 0 4px 8px #444; box-shadow: 0 4px 8px #444;}

You can play around with the settings for the shadow and the border but this will give you rounded corners and a css shadow. The shadow and rounded corners wont be in present in IE8 and down though.

The end effect should look like this https://dragonartdesign.com/logo-design/stoneage
You might notice a little background around the image but that’s coming from the main style sheet not from the plugins style sheet. I just uploaded the plugin as a demo for you.

I have used the plugin on this site as well and it doesn’t have that background around the edges.
https://sheepriverhomes.com/about-us/

That’s a quick fix until this plugin is updated anyways ??