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

Templates

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. NOTE: Refer to the Customizing the Viewer section for details on using the 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:

Example

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

To:

Example

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 http://underscorejs.org/#template.

Example

<!-- 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.

Example

<!-- 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:

Example

<!-- 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:

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}

CSS Polyfills

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

• Normalize (http://necolas.github.io/normalize.css/) - Normalize provides better cross-browser consistency in the default styling of HTML elements.