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 desired background color 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 set the background color of auto-generated links to transparent (no highlighting)
/* Set the background color to transparent if you don't want to highlight auto-generated links */
a.df-autolink{
background: transparent;
cursor: default; /* For cursor to not treat the link as clickable. */
}
/* Set the background color to transparent while hovering */
a.df-autolink:hover{
background: transparent;
cursor: default; /* For cursor to not treat the link as clickable. */
}
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. */
}
To display books with fixed height and varying width
/* Change the value of height according to your requirement. */
.df-popup-thumb img {
width: auto;
height: 150px;
}
.df-popup-thumb {
display: inline-table;
width: auto;
height: 150px;
}
