Global Lightbox Styling

The gallery lightbox comes with just a few simple style options, and these adjustments only affect the individual lightbox element. There’s no overall setting to standardize the appearance across all lightboxes on your site.

To gain complete control over the styles, add the snippet below. It allows you to customize background colors, borders, and captions, enabling you to quickly match your brand’s color palette. You can easily modify the HEX color codes or add your own CSS rules—everything is clearly labeled and simple to customize.

/* background */

.breakdance .bde-lightbox .lg-backdrop {
background-color: #efefef
}

/* image */

.breakdance .bde-lightbox .lg-image {
border-radius: 24px
}

/* thumbnails border */

.breakdance .bde-lightbox .lg-outer .lg-thumb-item {
border: 4px solid white;
border-radius: 12px;
}
.breakdance .bde-lightbox .lg-outer .lg-thumb-item:hover {
border-color: black
}
.breakdance .bde-lightbox .lg-outer .lg-thumb-item.active {
border-color: var(--bde-brand-primary-color)
}

/* caption */

.breakdance .bde-lightbox .lg-sub-html {
color: black;
font-weight:700;
}

/* icon, toolbar... */

.breakdance .bde-lightbox .lg-toolbar,
.breakdance .bde-lightbox .lg-icon,
.breakdance .bde-lightbox .lg-counter {
color: var(--bde-brand-primary-color)
}

/* navigation arrows */

.breakdance .bde-lightbox .lg-next,
.breakdance .bde-lightbox .lg-prev {
color: var(--bde-brand-primary-color);
background-color:transparent;
border-radius: 12px;
border: 2px solid var(--bde-brand-primary-color)
}

Cool Gallery Example

Click an image to open the styled lightbox.