Easy FancyBox CSS help?

Forums Easy FancyBox Pro Easy FancyBox CSS help?

Viewing 7 reply threads
  • Author
    Posts
    • #36633
      Chris Andrews
      Participant

      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

    • #36639
      RavanH
      Keymaster

      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;
      }
      
    • #36644
      Chris Andrews
      Participant

      Hi Rolf!

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

      Chris

    • #36646
      RavanH
      Keymaster

      In that case, try:

      
      .fancybox-title-over {
        top: 0;
        bottom: initial !important;
      }
      
    • #36649
      Chris Andrews
      Participant

      Working beautifully, thanks Rolf!

      Chris

    • #36651
      Chris Andrews
      Participant

      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.
    • #36654
      RavanH
      Keymaster

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

    • #36656
      Chris Andrews
      Participant

      Oh yea, awesome! Thank you!

Viewing 7 reply threads
  • You must be logged in to reply to this topic.