Introduction

This topic covers how to customize the styles in the Viewer. Depending on your needs, you can make minor changes to the Viewer by following the guidance below. Or, if you want fine-grained control of the Viewer's look and feel, you can go to the PrizmDoc Viewer Client Assets Build Guide for detailed instructions.

Customizing the Styles

Before you begin, make sure that the included .css file is loaded in the Viewer: normalize.min.css.

Namespace

The Viewer uses the class .pccv 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

/* 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 built 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:

base - These files contain the variables and mixins used by the Viewer, as well as the overall layout. Included here are also the reusable, generic components, such as the grid and form inputs.
components - These files contain the large Viewer components, and are named in a self-explanatory way. For example, styles related to the search functionality are held in the _search.less file.

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\svg*.svg files. Any individual SVG file can be scaled up or down for use at any viewport size. Additionally, the color of any SVG file can be altered via CSS attributes for use on both light and dark backgrounds.

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

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

<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 legacy browsers 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 some legacy browsers 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.

Polyfills

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

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