Customizing Lightbox Appearance with CSS

The Modula plugin offers versatile customization options for its lightbox feature. However, if you find that certain specific modifications are not readily available in the plugin settings, you can achieve them using custom CSS. This guide provides examples of custom CSS changes you can apply to your Modula lightbox to tailor its appearance to your preferences.

Changing the Lightbox Background Color in an Album:

If you wish to alter the background color of the lightbox within an album, follow these steps:

1. Go to Appearance > Customize > Additional CSS.
2. Add the following code to apply the change to albums.

html body .modula-fancybox-is-open .modula-fancybox-bg { background-color: white; }

You can customize the background color by specifying a color name (e.g., “white,” “blue,” “orange,” “red”) or by using a hexadecimal code (e.g., “#02e0e8”). Online color pickers can help you find the desired hex code.

Increasing the Size of the Infobar/Toolbar:

To enlarge the infobar in your lightbox, use the following code:

.modula-fancybox-infobar span { font-size: 28px !important; } 

Replace ’28px’ with your preferred font size value.

Hiding Thumbnail Images on Mobile:

If you want to hide thumbnail images on mobile devices, use 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; } }

Changing Lightbox Caption Properties:

To customize the font size, color, and typeface of the lightbox caption, apply this code:

.modula-fancybox-caption__body { font-size: 20px; color: red; font-family: Arial; }

Modify the values (’20px’, ‘red’, ‘Arial’) according to your preferences.

Disabling the Gradient:

To remove the gradient at the bottom of the lightbox image, add this code in “Appearance > Customize > Additional CSS”:

html body .modula-fancybox-caption {
background: none !important;
}

Removing the Zoom Cursor:

To eliminate the zoom cursor and disable the zooming pointer event, use this code in “Appearance > Customize > Additional CSS”:

html body .modula-fancybox-can-zoomIn .modula-fancybox-content { cursor: default; pointer-events: none; }

Adding a Border to the Lightbox Image:

To include a border around the lightbox image, insert this code in “Appearance > Customize > Additional CSS”:

html body .modula-fancybox-image { border: 10px solid antiquewhite !important; } 

To adjust the border’s size, modify the ’10px’ value. Change the color by replacing ‘antiquewhite’ with your desired color.

Centering Text:

To center text, access your dashboard, navigate to “Modula,” edit your gallery, and add this code in the “Custom CSS” section:

.modula-items > .modula-item > .modula-item-content > .figc > .figc-inner { margin-bottom: 22px; }

Increasing the Lightbox Arrows:

To enlarge the arrows in the lightbox, use this code:

html body .modula-fancybox-navigation .modula-fancybox-button { height: 120px; width: 85px !important; }

Keeping the Caption Visible:

Ensure the lightbox caption remains visible with this code:

.modula-fancybox-caption {
    opacity: 1 !important;
    visibility: visible !important;
}

With these CSS customizations, you can achieve the desired look and feel for your Modula lightbox, tailoring it to your unique preferences. If you want to know how to use Custom CSS with Modula this article might help: Leveraging Custom CSS for Modula Galleries.