Customize popup thumb

You can change the thumb size by using Custom CSS. We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS.

Change the size of popup thumb: #

Version 2.1

._df_thumb{
    width:240px;
}

Before version 2.1

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

Tips: In mobiles using bigger size can result in thumb not fitting to mobile screen size. Thus adding a mobile specific constraint helps:

._df_thumb{
    width:340px;
}

@media only screen and (max-width: 500px) {
    ._df_thumb{
        width:100%;
    }
}

---

Disable opening animation of popup thumb: #

First add a class name to the shortcode where you want to disable the animation:

[dflip type="thumb" class="dflip-no-thumb-animation" id="123"][/dflip]

Then add following custom CSS.

.dflip-no-thumb-animation:hover * {
    transform: none !important;
}
.dflip-no-thumb-animation .df-book-page1,
.dflip-no-thumb-animation .df-book-page2{
    display:none;
}

Output:

Meat Atlas

---

Remove the left side ridge from popup thumb #

First add a class name to the shortcode where you want to remove the ridge:

[dflip type="thumb" class="dflip-no-ridge" id="123"][/dflip]

Then you can use following CSS:

.dflip-no-ridge .df-book-cover:after {
    display:none;
}

Output:

Meat Atlas

---

Title Customization: #

Titles can be customized with the CSS selector: .df-popup-thumb span.df-book-title

Hide Title from thumb: #

.df-popup-thumb span.df-book-title {
    display: none;
}

Title Always active without hover: #

.df-popup-thumb span.df-book-title {
    bottom: 0;
    opacity: 1;
}