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 and many more. To guide you to add these customization for personalized flipbook, 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 underline the auto-generated link and change its hover style
a.df-autolink{
/* First, set the background color to transparent if you only want to underline. */
background-color: transparent;
/* Change the color and size of the underline according to your need. */
text-decoration: underline black 1px;
}
/* On hover */
a.df-autolink:hover{
background-color: transparent;
text-decoration: underline blue 1px;
}
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;
}
