# 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](/jquery/default-options.md)

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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://real3dflipbook.gitbook.io/jquery/customizing-flipbook/ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.