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

.modula-best-grid-gallery .fancybox__slide.has-image {
    background-color: red;
}

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

.modula-best-grid-gallery .fancybox__infobar {
    font-size: 28px;
}

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-best-grid-gallery .fancybox__caption { font-size: 20px; color: red; font-family: Arial; }

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

Remove the Zoom Cursor

.modula-best-grid-gallery .can-zoom_in .fancybox__content {
    cursor: zoom-in;
    pointer-events: none;
}

Add a Border to the Lightbox Image

.modula-best-grid-gallery .fancybox__slide.has-image>.fancybox__content {
    border: 15px solid antiquewhite!important;
}

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

Increase the Lightbox Arrows

.modula-best-grid-gallery .fancybox__nav .f-button {height: 120px; width: 85px !important; ;}

Keep the Caption Visible

.modula-best-grid-gallery .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.

Was this article helpful?
0 Yes 0 No