Easy FancyBox CSS help?

Your Account / Forums / Easy FancyBox Pro / Easy FancyBox CSS help?

  • Author
    • June 13, 2022 at 2:18 am #36633

      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?



    • June 13, 2022 at 2:18 am #36639

      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;
    • June 13, 2022 at 2:18 am #36644

      Hi Rolf!

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


    • June 13, 2022 at 2:18 am #36646

      In that case, try:

      .fancybox-title-over {
        top: 0;
        bottom: initial !important;
    • June 13, 2022 at 2:18 am #36649

      Working beautifully, thanks Rolf!


    • June 13, 2022 at 2:18 am #36651

      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,


      You must be logged in to view attached files.
    • June 13, 2022 at 2:18 am #36654

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

    • June 13, 2022 at 2:18 am #36656

      Oh yea, awesome! Thank you!

  • You must be logged in to reply to this topic.