Introduction

This topic covers how to install and customize the Book Reader Viewer. This sample is not available with the Docker image.

Installing the Book Reader Viewer

Be sure to run the "Client Installer" for Windows. Once complete, the Book Reader Viewer files can be found in the folder C:\Prizm\Samples\jsp\Sample\public_html\book-reader-sample.

Working with the Less preprocessor

The Book Reader Viewer uses Less to pre-process the CSS for the Book Reader Viewer. In order to facilitate using this pre-processor in a development environment, the following files are included in the book-reader-sample/viewer-assets folder:

Gruntfile.js
package.json
In order to use these files, you will need to install Node.JS in your development environment. Open your command line interface in the book-reader-sample/viewer-assets folder. Then, you can run the following commands from a command line or terminal:

Example
```
npm install -g grunt-cli
npm install
```
Next, you can use this command to build the CSS files required for production:

Example
```
grunt buildprod
```
You can also build development files, which will include extra source maps helpful in debugging CSS:

Example
```
grunt builddev
```
Finally, while developing, you may choose to run the task in such a way that it will automatically run whenever any of the Less files change, as such:

Example
```
grunt dev
```

The Less preprocessor will generate the following file(s):

css/style.css - contains the Viewer styles
css/style.css.map - (optional) only present when using one of the dev options

Customizing the Styles

The styles should be loaded in the Book Reader Viewer in the following order:

viewercontrol.css
style.css

Namespace

The Book Reader Viewer uses the class .pccv in order to namespace the styles it uses. In order to override any selector used in the Book Reader Viewer, your selector must begin with the class .pccv:

Example

/* Set the navigation tab bar to dark red */
 .pccv .pcc-nav-tabset,
 .pccv .pcc-nav-tabset .pcc-tab-item,
 .pccv .pcc-status-bar { background: #5b100d; }

Organization

All Less files are in the less folder. These individual files are split out based on functionality and are named in a self-explanatory way. For example, styles related to the search functionality are held in the less/components/search.less file.

Variables

There are many variables contained in less/components/variables.less, which control things like the color scheme and icon sizing. These variables can be modified in order to propagate changes throughout the Book Reader Viewer.

Grid System

The Viewer uses a basic grid system to assist with the UI layout. Through a series of rows and columns the layout can scale dynamically. Rows are used to create horizontal groups of columns. Columns are created by defining the number of twelve columns you will span. For example, three columns would use three divs with a class of .pcc-col-4:

Example

<div class="pcc-row">
     <div class="pcc-col-4">Left</div>
     <div class="pcc-col-4">Center</div>
     <div class="pcc-col-4">Right</div>
</div>

viewercontrol.css

This file contains the styles required for using ViewerControl. This file should not be changed, but rather, should have any necessary rules overridden by your own CSS. If choosing not to use any of our viewers, and instead embedding ViewerControl directly in a custom integration, this CSS file is still required.