Customizing Popup Thumbs

How to change thumb size for lightbox popups? #

You can change the thumb size by using Custom CSS. The thumb size wont increase beyond it’s original size We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS.

.dp-element[data-lightbox=thumb] {
    width: auto;
}

.dp-element[data-lightbox=thumb] img {
    max-height: 300px;
}

---

How to change thumb size for lightbox popups?(Width solution) #

You can change the thumb size based on width by using Custom CSS. This is best suited for responsive solution. We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS.

.dp-element[data-lightbox=thumb] {
    width: auto;
}

.dp-element[data-lightbox=thumb] img {
    max-height: none;
    height: auto;
    width: 200px;
}

---

How to show thumb title without hover? #

By default, popup thumb titles are displayed on hover. It can be changed to auto with Custom CSS. We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS.

.dp-element[data-lightbox=thumb] .dp-book-title,
.df-element[data-lightbox=thumb] .df-book-title {
    bottom: 0;
    opacity: 1;
}