Customize the Interview Appearance

HotDocs Server (including HotDocs Cloud Services) uses a combination of HTML, CSS, JavaScript and (optionally) Microsoft Silverlight to deliver interviews to the browser. Much of the interview’s look and feel is controlled by a small set of interview “theme” files; these can be customized to change fonts, colors, and other aspects of interview appearance. You can also change the images used in the interview. Such customizations allow you to fully integrate HotDocs interviews with the look and feel of your host application.

This customization is best accomplished by creating your own interview “theme” files and then specifying which theme to use when your host application requests an interview. This section explains how you can create an interview theme for use in your host application.

Interview Theme Files

An interview theme is made up of four separate files:

  • A cascading stylesheet (.CSS) file that dictates the look & feel for HTML interview components
  • An Extensible Application Markup Language (.XAML) file for use with Silverlight interviews
  • An image (.PNG) file that contains all of the normal (non-disabled) user interface images
  • An image (.PNG) file that contains all of the disabled user interface images (Usually this is the same as the normal image file, but with some kind of shading applied to indicate the disabled state.)

The CSS and PNG files are used by all HotDocs interviews; the XAML file is used only by Silverlight interviews. All browser interviews also rely on a fifth file, hdssystem.css, which must be located in the same directory (at the same URL and path) as the others, but which should not be customized.

When you create a new interview theme, you must create each of these four files. The base file name will be your theme name. For example, if you want to create a “mycompany” theme, you would need to create the following four files:

  • mycompany.css
  • mycompany.xaml
  • mycompany-normal.png
  • mycompany-disabled.png

To get started quickly, begin with a copy of the hdsuser theme files found in the HotDocs Server program files folder (e.g., C:\Program Files (x86)\HotDocs Server\HDServerFiles\stylesheets). Duplicate the four hdsuser files, give them a new name based on your theme, and save them in the same folder as the original.

It is most convenient to place all theme files in the same directory, since all themes rely on a common style sheet – hdssystem.css – which must exist in the same folder (at the same base URL and path) as any theme file. If you choose to locate themes in a different directory, you must copy hdssystem.css to that location as well.

To learn about cascading style sheets and how you can modify the styles described in this section, please visit the World Wide Web Consortium (W3C) CSS Web site at http://www.w3.org/Style/CSS/.