If you are looking to change certain elements from your lightbox and they are not available in the plugin, you can do it with custom CSS. Here are a few examples of custom changes using CSS.
Change the background color of gallery lightbox inside an album
To change the gallery lightbox inside an album background color, add this code in your gallery > Custom CSS, to apply the changes only to that gallery.
html body .modula-fancybox-is-open .modula-fancybox-bg { background-color: white; }Alternatively, if you want your changes to affect all album galleries on your website, add the code in Appearance > Customize > Additional CSS.
The code can be customizable to any color you need. You can either specify the color name (for example white, blue, orange, red, etc.) or use a hex code (for example #02e0e8). To find your desired hex code, you can use online color pickers.
Increase the size of the infobar/toolbar in the lightbox.
To increase the size of the infobar in the your lightbox, add this code in your gallery > Custom CSS (to apply it only to that gallery) or in Appearance > Customize > Additional CSS (to apply it to all galleries):
.modula-fancybox-infobar span { font-size: 28px !important; } Replace the value ’28px’ with the value you want.
How to hide on mobile the thumbnail images from the lightbox.
To turn them off on mobile please add this code in Appearance > Customize > Additional CSS:
@media screen and (max-width: 800px) { .modula-fancybox-thumbs.modula-fancybox-thumbs-y { display: none !important; } html body .modula-fancybox-show-thumbs .modula-fancybox-inner { right: 0 !important; } }How to change the font size, color of the lightbox caption and caption typeface.
If you want to change the one in the lightbox, add this code in Modula> edit gallery> custom CSS or Appearance > Customize > Additional CSS to apply the same styling to all galleries.
.modula-fancybox-caption__body { font-size: 20px; color: red; font-family: Arial; }Replace the values ’20px’, ‘red’ and ‘Arial’ with the size, color and font you want.
How to disable the gradient.
If you are not happy with the gradient you see at the bottom when you open the image in the lightbox you can hide it. You need to add this code in Appearance > Customize > Additional CSS:
html body .modula-fancybox-caption {
background: none !important;
}How to remove the zoom cursor
To remove that cursor and the pointer event for zooming in, please add this code in Appearance > Customize > Additional CSS:
html body .modula-fancybox-can-zoomIn .modula-fancybox-content { cursor: default; pointer-events: none; }How to add a border around the image in the lightbox.
To add a border around the image when you open it in the lightbox, you need to add this code in Appearance > Customize > Additional CSS:
html body .modula-fancybox-image { border: 10px solid antiquewhite !important; } To make the border larger/smaller you will need to increase or decrease the value ’10px’. To change the color you would need to replace the value ‘antiquewhite’ with the desired color.
How to centre the text
If you want to centre the text you need to go to your dashboard > Modula > edit your gallery > Custom CSS > add this code:
.modula-items > .modula-item > .modula-item-content > .figc > .figc-inner { margin-bottom: 22px; }How to increase the arrows in the lightbox
html body .modula-fancybox-navigation .modula-fancybox-button { height: 120px; width: 85px !important; }How to keep the caption visible in the lightbox
.modula-fancybox-caption {
opacity: 1 !important;
visibility: visible !important;
}
