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:

• Gruntfile.js
• package.json

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.

2. Next, you can use this command to build the CSS files required for production:

Example	Copy Code
grunt buildprod

3. You can also build development files, which will include extra source maps helpful in debugging CSS:

Example	Copy Code
grunt builddev

4. 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:

• css/viewer.css - contains the bulk of the Viewer styles
• css/fonts.css - contains fonts necessary for printing
• css/legacy.css - contains the styles necessary for IE8

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:

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

• 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 - The files contain the large Viewer components, and are named in a self-explanatory way. For example, styles related to the search functionality are help 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*.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:

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

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

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