Theming

This guide will show you how to set up and run the Universal Viewer on your computer and create your own theme.

###Setup

Follow the 'First Time Setup' instructions in the Universal Viewer's readme:

https://github.com/UniversalViewer/universalviewer

Now, inside the UniversalViewer directory, run:

grunt serve

This will do a debug build of the viewer and open a browser window at this address:

http://localhost:8001/examples/

###Theming

You will notice at the top of the viewer there is a light grey bar with navigation controls. We will create our own theme that sets the background colour to a darker shade.

If you examine the universalviewer/src/themes/default-theme directory, you can see that this is a git submodule (https://github.com/UniversalViewer/default-theme). In your terminal, navigate into this directory cd src/themes/uv-default-theme and checkout a new branch called "tutorial":

git checkout -b tutorial

Now open src/themes/uv-default-theme/theme.less

Change

.headerPanel{
    position: relative;
    background-color: @panel-light-bg;
    height: 40px;
}

to

.headerPanel{
    position: relative;
    background-color: @panel-dark-bg;
    color: #fff;
    height: 40px;
}

We have changed the background-color to use the variable @panel-dark-bg (see variables.less), and changed the text color to #fff to make it visible.

Now run:

grunt

and when finished compiling, refresh http://localhost:8001/examples/ to see the changes.

The previous/next and settings buttons are now less prominent. Let's alter the settings button, In Photoshop, create a new 30x30px image. Draw 3 horizontal lines in a light shade of grey and save to web as a png with transparent background. Name it settings.png.

Now copy settings.png to src/themes/uv-default-theme/img/ and refresh the browser.

Any image for any module can be overridden using this method. The images contained in uv-pagingheaderpanel-module/img are just defaults. If we wanted to override uv-pagingheaderpanel-module/img/first.png we could save a new first.png to src/themes/uv-default-theme/img/ and in src/themes/uv-default-theme/header-panel.less we could set:

.headerPanel{
    .first{
        background: url('@{img-path}first.png') no-repeat;
    }
}

the @img-path variable is scoped to the main theme (see theme.less) so the image path resolves to src/themes/uv-default-theme/img/first.png.