PrizmDoc Viewer v13.18 Release - Updated
Developer Guide / Viewer / Legacy Viewers / Customize the Book Reader Viewer
In This Topic
    Customize the Book Reader Viewer
    In This Topic

    Introduction

    This topic covers how to install and customize the Book Reader Viewer.

    Installing the Book Reader Viewer

    Be sure to run the appropriate "Client Installer" for your OS, Windows or Linux. Once complete, the Book Reader Viewer files can be found in the following location:

    • For Windows: C:\Prizm\Samples\jsp\Sample\public_html\book-reader-sample
    • For Linux: /usr/share/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:

    1. viewercontrol.css
    2. 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.