How to Customize flipbook using Custom CSS in Dearflip Joomla Flipbook Extension?

Sometimes you may want to change the Flipbook's height, or the color of the next and previous arrow, hide or display the book title, or change the background color of links and annotations. 

The Dearflip Joomla Flipbook component will become crowded if all these customization options are added, as there are already enough options listed. Therefore, for the user-specific customization, we have listed some custom CSS. You can add these custom CSS to your website to match the styling of your website and make the flipbook yours.

 

 To change the background color of auto-generated links

/* Set the background color to none if you don't want to highlight auto-generated links */
a.df-autolink{
background-color: rgba(76, 175, 80, 0.3); /* Green background with 30% opacity */
}

 

To change the background color of auto-generated links on hover

a.df-autolink:hover{
background-color: rgba(76, 175, 80, 0.9); /* Change the fourth parameter to adjust the transparency from 0 to 1. */
}

 

To change the background color of auto-generated link and its hover color for specific flipbook using id

#flip24 a.df-autolink{
background-color: blue;
}

/* On hover */
#flip24 a.df-autolink:hover{
background-color: black;
}

To change the background color of internal links

section.linkAnnotation a{
background-color: rgba(76, 175, 80, 0.3); /* Change colors according to your desire */
}

 

To display the book's title without hovering in Lightbox

._df_thumb ._df_book-title {
opacity: 1;
bottom: 0;
color: red;  /* To change the color of book title. */
}