PrizmDoc Viewer v13.23 - Updated
Developer Guide / Viewer / How to Customize the Viewer / Reorganize Menus
In This Topic
    Reorganize Menus
    In This Topic

    All of the menus and navigation in the Viewer are customizable.


    You can change the markup of the Viewer UI components by editing the templates. The templates are HTML files ending in *.Template.html. The primary navigation tabs and menus are located in viewerTemplate.html.

    Adding/Removing Template Files

    If you wish to create your own version of the Viewer template, you will need to update the template name where it is being loaded in viewer.js. For instance, if you copy viewerTemplate.html to a new file called customTemplate.html you would change:


    element.html(renderTemplate(options.template.viewer, ...



    element.html(renderTemplate(options.template.custom, ...

    Currently in the samples, "Template" is removed from the name of the template property in the template object (e.g., viewerTemplate.html becomes template.viewer).

    Template Syntax

    The templates are consumed using the Underscore.js Template utility function. Variables and JavaScript conditions can be used within the templates using ERB syntax. For more information, see the Underscore documentation at


    <!-- An example of a variable -->
    <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"
        title="<%= data.rotate %>"></button>

    Removing Elements

    To remove buttons from the menu, you can remove the markup, comment out the markup, or add a CSS class to the element.


    <!-- This button is no longer visible
        <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button>
    <!-- This element is hidden because of a pcc-hide class -->
    <div data-pcc-rotate class="customClass pcc-hide"></div>

    Data Attributes

    Throughout the templates, on many elements, there are data attributes starting with data-pcc-. These are used to identify elements and bind them to functionality defined in viewer.js:


    <!-- This button will rotate the current page when clicked -->
    <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button>
    <!-- Other elements can perform the same function -->
    <div data-pcc-rotate class="customClass"></div>

    Customizing CSS

    It is recommended to create your own CSS file and add it to the bottom of the cascade. This would be after normalize.min.css, viewer.css, viewercontrol.css, and legacy.css. All selectors in viewer.css have a parent of .pccv, in order to override the .pccv parent should be in the selector:


    /* 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}

    CSS Polyfills

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