1. Home
  2. Docs
  3. DearFlip jQuery Flipbook Plugin
  4. Customizations

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;

 

Was this article helpful to you? Yes No

Leave a Reply