How To Fancybox Rounded Corners?

[Eric]

Hello,

So reading all the posts I see that I should add css3 rounded stuff to
#fancybox_wrap and #fancybox_outer. But i need to edit the css right?
I need to get rid of all the divs holding the current shadows? But
then i need to feed them still to ie yeah? So I believe I have the
basic idea here. Anyone done this already and can save me a few hours
of trial and error and can confirm or deni my assumptions??? Thanks!

[Kai Gradert]

Eric,

I havent messed with the frame divs/css myself yet, but I have created a custom frame for one of my projects that has rounded corners…

You can preview this custom frame here… 

:: http://kaigradert.com/projects/fb/index_fixed.html 

And you can download the PSD template and individual resources here: 

:: kaigradert.com/dropbox/fb_frame.zip

Kai

kai.me · @kaikemono · hingeheads · @hingeheads · gri.pe

323.304.5906 (cell) · 323.393.3524 (google voice) · 323.686.5287 (fax)

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[Eric]

Thanks for the response. I'll take a look. I forgot to mention this is
for type iframe content too.

On Jan 28, 10:05 am, Kai Gradert <kai.grad...@gmail.com> wrote:
> *Eric,*

>
> I havent messed with the frame divs/css myself yet, but I have created a
> custom frame for one of my projects that has rounded corners…
>

> You can preview this custom *frame* here…
>
> ::http://kaigradert.com/projects/fb/index_fixed.html<http://www.google.com/url?sa=D&q=http://kaigradert.com/projects/fb/in...>

>
> And you can download the PSD template and individual resources here:
>
> :: kaigradert.com/dropbox/fb_frame.zip
>
> Kai
>

> kai.me · @kaikemono <http://twitter.com/kaikemono> ·
> hingeheads<http://hingeheads.goodsie.com> ·
> @hingeheads <http://twitter.com/hingeheads> ·
> gri.pe<http://www.gri.pe/user/77003>
>
> <http://www.gri.pe/user/77003>323.304.5906(cell) ·323.393.3524(google
> voice) ·323.686.5287(fax)

>
>
>
> On Fri, Jan 28, 2011 at 9:41 AM, Eric <ewwat...@gmail.com> wrote:
> > Hello,
>
> > So reading all the posts I see that I should add css3 rounded stuff to
> > #fancybox_wrap and #fancybox_outer. But i need to edit the css right?
> > I need to get rid of all the divs holding the current shadows? But
> > then i need to feed them still to ie yeah? So I believe I have the
> > basic idea here. Anyone done this already and can save me a few hours
> > of trial and error and can confirm or deni my assumptions??? Thanks!
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "fancybox" group.
> > To post to this group, send email to fanc...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > fancybox+u...@googlegroups.com<fancybox%2Bunsubscribe@googlegroups.c om>
> > .

[aisha ahmad]

I edit the css like this, and it is works..

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}

-moz-border-radius is used on firefox. I add border-radius and -webkit-
border-radius in order to make it work on other browser..

Hope it work on you too..

[aisha ahmad]

I also change other css ID

#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #fff;

-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}

This works on me..