This tutorial will show you how to use the Page Enhancer, a special UI Enhancer designed to apply to an entire page. This tutorial assumes that:
Tutorial - Full Page Preferences Editor
Tutorial - Full Page Preferences Editor (with Preview)
Tutorial - User Interface Options
Working With A Preferences Editor On Your Site
UI Options Instructional Demos
You're putting together a website that you know will have a diverse audience. You'd like to allow your visitors to customize the presentation of the site to their individual needs, such as enlarging the text, or increasing the visual contrast. This tutorial will show you how to add the UI Enhancer to the pages of your site, so that they will be adjusted according to preferences set using the UI Options component.
These are the basic steps to add the UI Enhancer to your application:
The rest of this tutorial will explain each of these steps in detail.
Step 1: Add dependencies to the pages
UI Enhancer depends upon Fluid Skinning System (FSS) and the Infusion Framework, so you will need to add to your pages dependencies for
In the header of the file, link to the CSS files with
Note that the
But remember that all of these individual files are not necessary to make it work - the
Step 2: Prepare your pages for theming
Some of the transformations that your site visitors might want require the UI Enhancer to apply a theme to your site (for example, a high-contrast theme that will make your site easier to read for people with certain visual impairments). For this to work properly, you need to scope your site's default colour-related styles to a theme, so that the UI Enhancer can properly "swap" colour themes.
Scoping your styles to a theme is easy:
For this demo, we'll use the theme name "uio-demo-theme." All of the selectors for our styles will be scoped to this name, for example:
Finally, we apply this class name to the body of our pages:
To switch themes, the UI Enhancer will replace your theme name with the user's choice of theme, and will restore your theme name if the preference is reset.
Step 3: Prepare your pages for a Table of Contents
One of the transformations your site visitors may request is the addition of a Table of Contents for the page. To prepare your pages for this, you need to add a single identifiable empty
The easiest way to identifying the Table of Contents
You may choose a different classname or an ID, but you will need to specify this in your script.
Step 4: Write the script to add the UI Enhancer
Now that your pages are ready, the final step is to actually add the UI Enhancer to the page. The simplest way to do this is using a <script> tag near the top of the page. We suggest placing it right after the markup added in Step 3.
We'll create the UI Enhancer component using the
Of course, unless your visitors are able to specify what their preferences are, the UI Enhancer has nothing to do, so your next task is to provide your visitors with the UI Options interface. There are three versions to choose from.You can find demonstrations of these three versions in the demo Portal on our build site .
Pick the tutorial that goes with your choice: