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 AtlasRemove 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