UI
Customizing flipbook UI (toolbar) layout and style
Removing buttons
Each button can be removed from the toolbar, with enabled: false, for example to remove buttons Print and Download pages
btnPrint: {enabled: false},
btnDownloadPages: {enabled: false}Layout
There are 4 predefined layouts that you can choose from, with option
layout: "1", //"1", "2", "3", "4"Layout "1":
Default
layout "2" :
currentPage: { vAlign: 'bottom', hAlign: 'center' },
btnAutoplay: { hAlign: 'left' },
btnSound: { hAlign: 'left' },
btnExpand: { hAlign: 'right' },
btnZoomIn: { hAlign: 'right' },
btnZoomOut: { hAlign: 'right' },
btnSearch: { hAlign: 'left' },
btnBookmark: { hAlign: 'left' },
btnToc: { hAlign: 'left' },
btnThumbs: { hAlign: 'left' },
btnShare: { hAlign: 'right' },
btnPrint: { hAlign: 'right' },
btnDownloadPages: { hAlign: 'right' },
btnDownloadPdf: { hAlign: 'right' },
btnSelect: { hAlign: 'right' },layout "3"
menuTransparent: true,
menu2Transparent: false,
menu2OverBook: false,
menu2Padding: 5,
btnMargin: 5,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnPrint: { vAlign: 'top', hAlign: 'right' },
btnDownloadPdf: { vAlign: 'top', hAlign: 'right' },
btnDownloadPages: { vAlign: 'top', hAlign: 'right' },
btnThumbs: { vAlign: 'top', hAlign: 'left' },
btnToc: { vAlign: 'top', hAlign: 'left' },
btnBookmark: { vAlign: 'top', hAlign: 'left' },
btnSearch: { vAlign: 'top', hAlign: 'left' },
btnSelect: { vAlign: 'top', hAlign: 'right' },
btnShare: { vAlign: 'top', hAlign: 'right' },
btnAutoplay: { hAlign: 'right' },
btnExpand: { hAlign: 'right' },
btnZoomIn: { hAlign: 'right' },
btnZoomOut: { hAlign: 'right' },
btnSound: { hAlign: 'right' },
menuPadding: 5,layout "4":
menu2Transparent: false,
menu2OverBook: false,
sideMenuOverMenu2: false,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnAutoplay: { vAlign: 'top', hAlign: 'left' },
btnSound: { vAlign: 'top', hAlign: 'left' },
btnExpand: { vAlign: 'top', hAlign: 'right' },
btnZoomIn: { vAlign: 'top', hAlign: 'right' },
btnZoomOut: { vAlign: 'top', hAlign: 'right' },
btnSearch: { vAlign: 'top', hAlign: 'left' },
btnBookmark: { vAlign: 'top', hAlign: 'left' },
btnToc: { vAlign: 'top', hAlign: 'left' },
btnThumbs: { vAlign: 'top', hAlign: 'left' },
btnShare: { vAlign: 'top', hAlign: 'right' },
btnPrint: { vAlign: 'top', hAlign: 'right' },
btnDownloadPages: { vAlign: 'top', hAlign: 'right' },
btnDownloadPdf: { vAlign: 'top', hAlign: 'right' },
btnSelect: { vAlign: 'top', hAlign: 'right' },Layout is basically a set of options. Each layout is a set of options, that can be customized further. For example you have customize layout "2" to move all buttons to top like this
layout: "2",
menu2Transparent: false,
menu2OverBook: false,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnAutoplay: { vAlign: 'top'},
btnSound: { vAlign: 'top'},
btnExpand: { vAlign: 'top'},
btnZoomIn: { vAlign: 'top' },
btnZoomOut: { vAlign: 'top' },
btnSearch: { vAlign: 'top' },
btnBookmark: { vAlign: 'top' },
btnToc: { vAlign: 'top' },
btnThumbs: { vAlign: 'top' },
btnShare: { vAlign: 'top' },
btnPrint: { vAlign: 'top' },
btnDownloadPages: { vAlign: 'top' },
btnDownloadPdf: { vAlign: 'top' },
btnSelect: { vAlign: 'top' },Skins
There are 3 predefined skins
skin: "light", //"dark", "light", "gradient"Advanced Customization
There are many other options for customizing the flipbook UI.
The full list of options that you can override to customize the flipbook UI is here
Here are some of the available options
Skin Colors
skinColor: '', // Primary color.
skinBackground: '', // Secondary color.Bottom Menu
menuOverBook: false,
menuFloating: false,
menuBackground: '',
menuShadow: '',
menuMargin: 0,
menuPadding: 0,
menuTransparent: false,Top Menu
menu2OverBook: true,
menu2Floating: false,
menu2Background: '',
menu2Shadow: '',
menu2Margin: 0,
menu2Padding: 0,
menu2Transparent: true,Buttons
btnColor: '',
btnBackground: 'none',
btnSize: 14,
btnRadius: 2,
btnMargin: 2,
btnPaddingV: 10,
btnPaddingH: 10,
btnShadow: '',
btnTextShadow: '',
btnBorder: '',
btnColorHover: "",
btnBackgroundHover: '',Side Buttons (Arrows)
sideBtnColor: '#FFF',
sideBtnBackground: '#00000033',
sideBtnSize: 30,
sideBtnRadius: 0,
sideBtnMargin: 0,
sideBtnPaddingV: 5,
sideBtnPaddingH: 0,
sideBtnShadow: '',
sideBtnTextShadow: '',
sideBtnBorder: '',
sideBtnColorHover: "#FFF",
sideBtnBackgroundHover: '#00000066',Floating Buttons (Alternative button style)
floatingBtnColor: "#EEE",
floatingBtnColorHover: "",
floatingBtnBackground: "#00000044",
floatingBtnBackgroundHover: '',
floatingBtnSize: null,
floatingBtnRadius: null,
floatingBtnMargin: null,
floatingBtnPadding: null,
floatingBtnShadow: '',
floatingBtnTextShadow: '',
floatingBtnBorder: '',Customize Buttons
Each button in the toolbar can be customized. Button options look like this:
buttonName: {
enabled: true, // If displayed in the menu.
title: "Button name", // Title to display on hover.
}Buttons can also have properties
iconFA: "flipbook-icon-angle-double-left", // Font Awesome icon from custom icon font.
iconM: "flipbook-icon-first_page", // Material icon from custom icon font.
vAlign: 'top', // top or bottom
hAlign: 'left', // left, right or center
marginH: 0, // Button horizontal margin, Number.
marginV: 0, // Button vertical margin, Number.
color: '', // Button color, CSS value.
background: '' // Button background, CSS value.
hideOnMobile: false // Hide button on mobile devices.Button Defaults
currentPage: {
enabled: true,
title: "Current page",
vAlign: 'top',
hAlign: 'left',
marginH: 0,
marginV: 0,
color: '',
background: ''
},
btnFirst: {
enabled: false,
title: "First page",
iconFA: "flipbook-icon-angle-double-left",
iconM: "flipbook-icon-first_page"
},
btnPrev: {
enabled: true,
title: "Previous page",
iconFA: "flipbook-icon-angle-left",
iconM: "flipbook-icon-keyboard_arrow_left"
},
btnNext: {
enabled: true,
title: "Next page",
iconFA: "flipbook-icon-angle-right",
iconM: "flipbook-icon-keyboard_arrow_right"
},
btnLast: {
enabled: false,
title: "Last page",
iconFA: "flipbook-icon-angle-double-right",
viconM: "flipbook-icon-last_page"
},
btnZoomIn: {
enabled: true,
title: "Zoom in",
iconFA: "flipbook-icon-plus",
iconM: "flipbook-icon-add"
},
btnZoomOut: {
enabled: true,
title: "Zoom out",
iconFA: "flipbook-icon-minus",
iconM: "flipbook-icon-remove1"
},
btnRotateLeft: {
enabled: false,
title: "Rotate left",
iconFA: "flipbook-icon--undo"
},
btnRotateRight: {
enabled: false,
title: "Rotate right",
iconFA: "flipbook-icon--redo"
},
btnAutoplay: {
enabled: true,
title: "Autoplay",
iconFA: "flipbook-icon-play",
iconM: "flipbook-icon-play_arrow",
iconFA_alt: "flipbook-icon-pause",
iconM_alt: "flipbook-icon-pause1",
},
btnSearch: {
enabled: false,
title: "Search",
iconFA: "flipbook-icon-search",
iconM: "flipbook-icon-search1"
},
btnSelect: {
enabled: true,
title: "Select tool",
iconFA: "flipbook-icon-i-cursor",
iconM: "flipbook-icon-text_format"
},
btnBookmark: {
enabled: true,
title: "Bookmark",
iconFA: "flipbook-icon-bookmark",
iconM: "flipbook-icon-bookmark1"
},
btnNotes: {
enabled: false,
title: "Notes",
iconFA: "flipbook-icon-comment",
iconM: "flipbook-icon-chat_bubble"
},
btnToc: {
enabled: true,
title: "Table of Contents",
iconFA: "flipbook-icon-list-ol",
iconM: "flipbook-icon-toc"
},
btnThumbs: {
enabled: true,
vtitle: "Pages",
iconFA: "flipbook-icon-th-large",
iconM: "flipbook-icon-view_module"
},
btnShare: {
enabled: true,
title: "Share",
iconFA: "flipbook-icon-share-alt",
iconM: "flipbook-icon-share1",
hideOnMobile: true
},
btnPrint: {
enabled: true,
title: "Print",
iconFA: "flipbook-icon-print",
iconM: "flipbook-icon-local_printshop",
hideOnMobile: true
},
btnDownloadPages: {
enabled: true,
title: "Download pages",
iconFA: "flipbook-icon-download",
iconM: "flipbook-icon-file_download",
url: "images/pages.zip",
name: "allPages.zip"
},
btnDownloadPdf: {
forceDownload: false,
enabled: true,
title: "Download PDF",
iconFA: "flipbook-icon-file",
iconM: "flipbook-icon-picture_as_pdf",
url: null,
openInNewWindow: true,
name: "allPages.pdf"
},
btnSound: {
enabled: true,
title: "Volume",
iconFA: "flipbook-icon-volume-up",
iconFA_alt: "flipbook-icon-volume-off",
iconM: "flipbook-icon-volume_up",
iconM_alt: "flipbook-icon-volume_mute",
hideOnMobile: true
},
btnExpand: {
enabled: true,
title: "Toggle fullscreen",
iconFA: "flipbook-icon-expand",
iconM: "flipbook-icon-fullscreen",
iconFA_alt: "flipbook-icon-compress",
iconM_alt: "flipbook-icon-fullscreen_exit"
},
btnClose: {
title: "Close",
iconFA: "flipbook-icon-times",
iconM: "flipbook-icon-clear",
hAlign: 'right',
vAlign: 'top',
size: 20
}Last updated