Lightbox Custom CSS Changes

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.

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; } <br>

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; }

Still need help? Contact Us Contact Us