This KB will go over what steps need to be taken to theme the
WebDocumentViewer and WebDocumentThumbnailer using jQueryUI themes.
First, make sure you have a working project with the WebDocumentViewer and
optionally a WebDocumentThumbnailer. If you do not yet have a project with the
WebDocumentViewer, we have a sample application using it available from our
online gallery.
Second, find or generate a theme from jQueryUI. I recommend using their ThemeRoller. When you
are their download builder choose the latest Stable version.
You should end up with a zip file named something like
jquery-ui-(version).custom.zip
Now, there is a lot in that zip file, but we need relatively little of it.
Find the Atalasoft WebDocumentViewer resources in your project.
- Copy the jquery-ui-(version).custom.min.js file from the /js/ folder in to
your WebDocumentViewer resources folder.
- Copy the jquery-ui-(version).custom.min.css file and images folder from the
theme name folder in to your WebDocumentViewer resources folder. Make sure the
images folder ends up in the same folder as the .css file.
Believe it or not, we're almost done.
Find the atalaWebDocumentViewer.css, update the @import url at the top of the
file to use your new jquery-ui-(version).custom.min.css
Find in your project where you include the jquery-ui-1.8.14.custom.min.js
reference and update that to your updated jquery-ui-(version).custom.min.js.
Now, in theory that completes the jQuery UI theming. However, we do not apply
jQuery UI themes to the toolbar container, document container, or thumbnail
container. The good news is it's very simple to do for the toolbar and document
containers. Since you are defining the containers and then specify them for the
viewer you can add the class properties directly in your declaration. Try adding
class='ui-state-default' or 'ui-width-header' to the toolbar container.
The thumbnail stying is actually controlled by settings passed in to your
Atalasoft.Controls.WebDocumentThumbnailer initialization call. The four
properties controlling color are:
- backcolor - Controls the background color around the thumbnail.
- hovercolor - Controls the color when hovered.
- selectedcolor - Controls the active selection color.
- selectedhovercolor - Controls the active selection's hover color.
Example:
var _thumbs = new Atalasoft.Controls.WebDocumentThumbnailer({
parent: $('#atala-thumbs'), // parent container
serverurl: 'WebDocumentViewerHandler.ashx', // server handler url
documenturl: 'test/dummy.tif', // relative document url
annotationsurl: 'test/dummy.xmp', // annotation file
allowannotations: true, // enable annotations
viewer: _viewer, // link actions to the _viewer
backcolor: '#000',
hovercolor: '#667F9F',
selectedcolor: '#E0872D',
selectedhovercolor: '#FFC060'
});
Original Article:
Q10391 - HOWTO: Theming the WebDocumentViewer Using jQueryUI