› Forums › Easy FancyBox Pro › Easy FancyBox CSS help?
- This topic has 7 replies, 2 voices, and was last updated 1 year, 3 months ago by
Chris Andrews.
-
AuthorPosts
-
-
13 June 2022 at 02:18 #36633
Chris Andrews
ParticipantI’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
-
13 June 2022 at 15:11 #36639
RavanH
KeymasterHi 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; }
-
13 June 2022 at 21:34 #36644
Chris Andrews
ParticipantHi Rolf!
Actually, I was planning on using the overlay title position,
Chris
-
13 June 2022 at 21:47 #36646
RavanH
KeymasterIn that case, try:
.fancybox-title-over { top: 0; bottom: initial !important; }
-
14 June 2022 at 01:44 #36649
Chris Andrews
ParticipantWorking beautifully, thanks Rolf!
Chris
-
14 June 2022 at 02:12 #36651
Chris Andrews
ParticipantOkay, 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. -
14 June 2022 at 08:10 #36654
RavanH
KeymasterThat looks good (even without the !important) just add an
overflow:hidden;
🙂 -
14 June 2022 at 12:01 #36656
Chris Andrews
ParticipantOh yea, awesome! Thank you!
-
-
AuthorPosts
- You must be logged in to reply to this topic.