Customizations

Lightbox Customizations

How to change thumb size for lightbox popups?

You can change the thumb size by using Custom CSS.

._df_thumb{
    width:240px;
    height:360px;
}

How to show thumb title without hover?

Normally thumb titles are displayed on hover. It can be changed to auto with below Custom CSS:

._df_thumb ._df_book-title {
    opacity: 1;
    bottom: 0;
}

Other Customizations

How to change the color of Bookmark / Outline?

You can use Custom CSS to change the color of the outline/bookmark

.df-outline-item {
    color: red;
}

How to change color of links in the flipbook?

The links in the PDF are auto-detected an d highlighted in yellow as default. To change the color you can either make the highlight transparent to hide the yellow highlight or change the color to another.

/* Make the highlight transparent - no color */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{
    opacity:0; 
}

/* Make the highlight color red */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{ 
    background-color: red; 
}

How to remove Shadow from middle of the book?

In case of 2D Flipbook use custom CSS. and set opacity as desired, 0 for no shadow.

.df-page-front:before, .df-page-back:before {
    opacity: 0;
}

In case of 3D flipbook, use the stiffness setting. Stiffness defines the curve in the page. 0 is absolute flat – close to hard page flat; value 1 is curvy,2 is less curvy, default is 3. higher value will result in flatter look like setting the value to 0

var book_option = {stiffness:0};

If you want that for all book in the page, then use default settings.

DFLIP.defaults.stiffness = 0;