Home : HTML5 Web Viewing Controls : Theming the WebDocumentViewer using jQueryUI
Q10391 - HOWTO: Theming the WebDocumentViewer using jQueryUI

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' });
Related Articles
No Related Articles Available.

Article Attachments
No Attachments Available.

Related External Links
No Related Links Available.
Help us improve this article...
What did you think of this article?

poor 
1
2
3
4
5
6
7
8
9
10

 excellent
Tell us why you rated the content this way. (optional)
 
Approved Comments...
No user comments available for this article.

Powered By InstantKB.NET v1.3
Copyright © 2002, 2017. InstantASP Ltd. All Rights Reserved