Hello
I try to style a gallery lightbox:
fancybox-container {
width: 60%;
height: 60%;
border: 20px solid #73AD21;
padding: 100px;
}

www.bewoners-stadseiland.nl/monitoring-bloemrijke-bermen/

Questions:
- How can the fancybox-container appear centered on the screen?
- How can the grey gradient on the bottom be dismissed?
- How can the white line near the bottom be dismissed?
- How can I make a padding between caption and image
- I would like to show the navigation and caption permanent

Thanks a lot for helping me!

Hello,

Add the following custom CSS rules:



Open "ARI Fancy Lightbox -> Settings -> Lightbox" page and populate "Idle time" parameter with 0 value to show navigation buttons and caption always.

Regards,
ARI Soft

Thank you very much for your help!
the lightbox looks much better now.
www.bewoners-stadseiland.nl/monitoring-bloemrijke-bermen/

This the code I use.
/* styling caption */
.fancybox-caption {text-align: center; font-size: 40px; font-weight: 500; color: currentcolor; }

/* padding around image */
.fancybox-image {padding: 20px;}

/* styling lightbox */
.fancybox-container {
top: 10%;
left: 20%;
width: 60%;
height: 80%;
border: 0px solid #73AD21;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* remove white line */
body .fancybox-caption {border-top-style:none}

/* remove gray background */
body .fancybox-caption-wrap {background:none}

More one question:
How can add a margin around the buttons in the upper right corner?
Thank you!
Otto

Add the following CSS rule:



Regards,
ARI Soft

It works!

I think it is really a nice lightbox now. Very nice to be able to style it.

Thank you for your kind help,
Best regards, Otto