PrizmDoc Viewer v13.13 Release - Updated
Developer Guide / Viewer / How to Customize the Viewer / Customize the Styles
In This Topic
    Customize the Styles
    In This Topic

    Customizing the Styles

    Working with the LESS preprocessor

    The Viewer uses LESS to pre-process the CSS for the Viewer. In order to facilitate using this pre-processor in a development environment, the following files are included in the viewer-assets folder:

    1. In order to use these files, you will need to install Node.JS in your development environment. Then, you can run the following commands from a command line or terminal:
    Example
    Copy Code
    npm install -g grunt-cli
    npm install
    
    Point the command line interface to the viewer-assets folder in order to execute these commands.
    1. Next, you can use this command to build the CSS files required for production:
    Example
    Copy Code
    grunt buildprod
    
    1. You can also build development files, which will include extra source maps helpful in debugging CSS:
    Example
    Copy Code
    grunt builddev
    
    1. 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
    Copy Code
    grunt dev
    

    The Less preprocessor will generate the following files:

    Customizing the Styles

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

    1. normalize.min.css
    2. viewercontrol.css
    3. viewer.css
    4. legacy.css (in IE8 only)

    Namespace

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

    Example
    Copy Code
    /* 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 resulting CSS files have a Less counterpart in the root of the less folder. These are the only files that can be build on their own. File names beginning with an underscore ( _ ) are partial style files, and are included as modules in the root files. These individual components are split out into the following structure:

    Variables

    There are many variables contained in less/base/_variables.less, which control things like the image resources, color scheme, and toolbar sizing. These variables can be modified in order to propagate changes throughout the Viewer.

    Icons

    A number of icons are used throughout the Viewer for different UI elements. These icons are stored in the icons*.png files. The icons sprite image has a dark version for use on light backgrounds and a white version for use on dark backgrounds. There is a larger @2x version, to account for HD/Retina displays, and a regular sized version for legacy support. Since modern browsers support the background-size property, we use the @2x images for all icons and degrade to the regular sized icons for Internet Explorer 8.

    Media Queries

    The Viewer utilizes CSS3 Media Queries with expressions using min-width and max-width to adjust the layout of navigation and dialogs. The Media Query Breakpoints are set according to the Viewer layout. On smaller viewports the tab navigation collapses into a menu and some tools are hidden. On larger viewports the dialogs transform from horizontal to a vertical layout to utilize screen real estate.

    The breakpoints are located in the less/base/_breakpoints.less file, and are used throughout the less files as detached rulesets. The breakpoints are as follows:

    Example
    Copy Code
    /* Target modern browsers that support media queries */
    .modernView(@rules) {
        @media (min-width: 0) { @rules(); }
    }
    
    /* Mobile & Tablet Sizes, collapse navigation tabs into menu */
    .mobileView(@rules) {
        @media (max-width: 767px) { @rules(); }
    }
    
    /* Desktop Sizes */
    .desktopView(@rules) {
        @media (min-width: 768px) { @rules(); }
    }
    

    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
    Copy Code
    <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>
    

    Legacy CSS support

    The legacy CSS necessary for IE8 is held in the less/legacy.less file. Here we address unsupported or troublesome CSS features like drop shadows, opacity or background alpha transparency. In addition, because Media Queries are not supported in Internet Explorer 8 and no Media Query polyfills are used in this regard, we add additional styles here that are accounted for in Media Queries in modern browsers.

    viewercontrol.css

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

    Polyfills

    There are a few polyfills used to provide support for modern browser features: