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.

You need to add the following codes in your WordPress dashboard > Appearance > Customize > Additional CSS.

Change the Lightbox Background Color in an Album

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

Note: 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.

Increase the Size of the Infobar/Toolbar

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

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

Hide Thumbnail Images on Mobile

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

Change 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.

Disable the Gradient at the bottom of the Lightbox Image

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

Remove the Zoom Cursor

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

Add a Border to the Lightbox Image

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.

Center Text

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

Increase the Lightbox Arrows

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

Keep the Caption Visible

.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.