HAD Customization: Theming

Build a new theme

HAD is based on jQuery and jQueryUI. This allows you to build and replace the default theme that HAD uses. You can build a custom theme using the jQueryUI themeroller

In order to build your custom theme, you can start from scratch, or start from an existing theme. To start from an existing theme, choose "Gallery", choose one of the predefined themes, and use "Edit". Then, you can tweak your theme, below "Roll your own".

When it is to your taste, click "Download theme".

You have to choose a few options:

1. Take the latest release (1.10.4) at the time of writing
2. Then you can leave everything checked, or check only what is required;
   • Core
   • Widget
   • Mouse
   • Accordion
   • Button
   • Slider
   • Spinner
   • Tabs

Leave the rest as is, and proceed with the Download.

Tip: If you want later on to modify your theme, just make a copy of the URL before proceeding with the download. That will allow you to continue your modifications.

Install a new theme

Extract the zip file, and copy the following files over to replace the existing HAD files:

• Copy js\jquery-ui-9.9.9.custom.min.js over jqueryui.js
• Copy js\jquery-9.9.9.js over jquery.js (Optionnal: That will upgrade your jQuery version)
• Copy css\custom-theme\jquery-ui-9.9.9.custom.min.css over jqueryui.css

Note about the jQueryUI images

The image file names are long names and are therefore not supported on ISY. ISY file names are limited to 8 characters, with an extension of 3 characters. However, you could use jQueryUI images if you host your web application on another web server. By default, had.css overrides jQueryUI classes so that the jQueryUI images are not loaded.

If you want to use jQueryUI images, you need to:

1. Copy the files over from css\custom-theme\images\* to images\*
2. Modify had.css to allow jQueryui to access the images. The override is located at the end of the file.