# UI

### Removing buttons

Each button can be removed from the toolbar, with `enabled: false`, for example to remove buttons Print and Download pages

```javascript
btnPrint: {enabled: false}, 
btnDownloadPages: {enabled: false}
```

### Layout

There are 4 predefined layouts that you can choose from, with option 

```javascript
layout: "1", //"1", "2", "3", "4"
```

#### Layout "1":

Default

#### layout "2" :

```javascript
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"

```javascript
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":

```javascript
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 

<pre class="language-javascript"><code class="lang-javascript">layout: "2",
menu2Transparent: false,
menu2OverBook: false,
<strong>currentPage: { vAlign: 'top', hAlign: 'center' },
</strong>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' },
</code></pre>

### Skins

There are 3 predefined skins&#x20;

```javascript
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](https://real3dflipbook.gitbook.io/jquery/default-options)

Here are some of the available options

#### Skin Colors

```javascript
skinColor: '', // Primary color.
skinBackground: '', // Secondary color.
```

#### Bottom Menu&#x20;

```javascript
menuOverBook: false,
menuFloating: false,
menuBackground: '',
menuShadow: '',
menuMargin: 0,
menuPadding: 0,
menuTransparent: false,
```

#### Top Menu

```javascript
menu2OverBook: true,
menu2Floating: false,
menu2Background: '',
menu2Shadow: '',
menu2Margin: 0,
menu2Padding: 0,
menu2Transparent: true,
```

#### Buttons

```javascript
btnColor: '',
btnBackground: 'none',
btnSize: 14,
btnRadius: 2,
btnMargin: 2,
btnPaddingV: 10,
btnPaddingH: 10,
btnShadow: '',
btnTextShadow: '',
btnBorder: '',
btnColorHover: "",
btnBackgroundHover: '',
```

#### Side Buttons  (Arrows)

```javascript
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)

```javascript
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:

```javascript
buttonName: {
    enabled: true, // If displayed in the menu.
    title: "Button name", // Title to display on hover.
}
```

Buttons can also have properties

```javascript
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&#x20;

<pre class="language-javascript"><code class="lang-javascript">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",
<strong>    viconM: "flipbook-icon-last_page"
</strong>},

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,
<strong>    vtitle: "Pages",
</strong>    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
}
</code></pre>