Easy FancyBox CSS help?

[Chris Andrews]

I’d like to do two things –

1) Move the title text that is displayed on the image to the top of the image.

2) Keep the arrows visible all of the time.

Can I get an example of how to do those?

Thanks,

Chris

[RavanH]

Hi Chris,

Moving the title to the top depends on which Title option you are using. If set to the (default) option “Float”, then you can try with the following CSS. Adjust the value -15px if it does not vertically align with your close button (depends on several factors).

.fancybox-title-float {
    top: -15px;
    bottom: initial;
}

To keep the arrows visible you can use the following CSS which will do two things: make the arrows permanent and move them to the outer border like the close button (so they do not permanently cover the lightbox content.

#fancybox-left,#fancybox-right {
    width: 0;
}
#fancybox-right span {
    left: auto;
    right: -15px !important;
}
#fancybox-left span {
    left: -15px !important;
}

[Chris Andrews]

Hi Rolf!

Actually, I was planning on using the overlay title position,

Chris

[RavanH]

In that case, try:

.fancybox-title-over {
  top: 0;
  bottom: initial !important;
}

[Chris Andrews]

Working beautifully, thanks Rolf!

Chris

[Chris Andrews]

Okay, now I’m just playing and this is not something I have to do, but I was exploring with rounding the corners on the border surrounding the image. I set the corners set to 20 in the settings.

However, if I do that, then to look correct, I need to round the borders of the text overlay/margin, so I tried:

.fancybox-title-over {
top: 5px; /* I have my border set to 5* /
border-radius:20px 20px 0 0 !important;
bottom: initial !important;
text-align: center;
}

for some reason the border-radius doesn’t work. Is there another !important that might be blocking it?

Again though, I like the rounded corners, but it’s not critical if this is not doable,

Chris

Attachments:

You must be logged in to view attached files.

[RavanH]

That looks good (even without the !important) just add an overflow:hidden; 🙂

[Chris Andrews]

Oh yea, awesome! Thank you!

[Author]

Posts