RESEARCH it logo  SHARE it logo   VERSO logo

 

UX ADMINISTRATION

Chapter 5. DESIGN OPTIONS

   

 

Working with Themes and Styles

By default, the system applies a “black and white” theme to all screens in the user interface. The Themes and Styles function lets you select a pre-defined “color theme” to be applied to all screens or create a custom color scheme.

To select a predefined color theme:

  1. From the Design Options menu, select Themes and Styles.
    • The Themes and Styles page displays.

Themes and Styles Page

Themes and Styles Page

NOTE: If no theme has been selected, the Current Theme field is not shown.

  1. Choose the desired color theme from the drop-down menu; Lavender, Light Blue, Royal Blue, Light Green, Olive Green, Orange, Pink, Red, Brown or Blue Gray.

    NOTE: Additional selections may be shown if custom color schemes were previously created.

    • The screen refreshes to display the selected color theme.
  2. Click the Save Color Theme icon Save Color Theme Icon to save your selection.
    • The message “Color Theme Updated” shows briefly at the top of the screen.
  3. Click the Back button Back Button, as needed, to return to the Settings menu.
  4. Click the X button to close the Settings menu.

To define a custom color theme:

You can create a custom color scheme “from scratch,” or you can base a new custom color scheme on the colors in an existing color scheme.

  1. From the Design Options menu, select Themes and Styles.
    • The Themes and Styles page displays.
    • The Current Theme field shows the name of the currently selected color theme.

    NOTE: If no theme has been selected, the Current Theme field is not shown.

  2. Click the New theme button.
    • The Themes & Customize Settings page displays.

Themes and Customize Settings Page

Themes and Customize Settings Page

  1. If you wish to base the new color theme on an existing color theme, click the color swatch for the theme on which you wish to base your new theme; Lavender, Light Blue, Royal Blue, Light Green, Olive Green, Orange, Pink, Red, Brown or Blue Gray.
  2. Enter a name for the color theme in the Theme Name text box.

    NOTE: BE SURE to give the color theme a unique name.

    • The Header, Footer, Body, Button, and Content Background Color field swatches refresh to show the currently selected color (and associated hexadecimal code) for each of the theme colors.
  3. Use the color picker to specify the desired colors for the Header, Footer, Body, Button, and Content Background Color fields (see Using the Color Picker for details).

    NOTE: Mouse over a question mark icon Question Mark Icon to view a list of uses (locations) for the associated color.

    • The screen refreshes as each color is selected to display your changes.
    • To save your changes and continue defining the new color theme, click the Save button.
      • The message “Theme Saved” shows briefly at the top of the screen.
  4. When all colors for the new color theme have been selected, click the Apply button to apply the new theme.
    • The message “Color Theme Updated” shows briefly at the top of the screen.
  5. Click the Back button Back Button, as needed, to return to the Settings menu.
  6. Click the X button to close the Settings menu.

To edit a custom color theme:

  1. From the Design Options menu, select Themes and Styles.
    • The Themes and Styles page displays.
    • The Current Theme field shows the name of the currently selected color theme.
  2. Select the custom color theme you wish to edit from the drop-down menu.
    • The screen refreshes to display the Edit Theme icon Edit Theme Icon and Delete Theme icon Delete Theme Icon next to the drop-down menu.
  3. Click the Edit Theme icon Edit Theme Icon to edit the selected custom color theme.
    • The Themes & Customize Settings page displays.
    • The Current Theme field shows the name of the selected color theme.
  4. Use the color picker to edit the colors for the Header, Footer, Body, Button, and Content Background Color fields (see Using the Color Picker for details).

    NOTE: Mouse over a question mark icon Question Mark Icon to view a list of uses (locations) for the associated color.

    • The screen refreshes as each color is selected to display your changes.
    • To save your changes and continue defining the new color theme, click the Save button.
      • The message “Theme Saved” shows briefly at the top of the screen.
  5. When all desired changes have been made, click the Apply button to apply the new theme.
    • The message “Color Theme Updated” shows briefly at the top of the screen.
  6. Click the Back button Back Button, as needed, to return to the Settings menu.
  7. Click the X button to close the Settings menu.

To delete a custom color theme:

  1. From the Design Options menu, select Themes and Styles.
    • The Themes and Styles page displays.
    • The Current Theme field shows the name of the currently selected color theme.
  2. Select the custom color theme you wish to delete from the drop-down menu.
    • The screen refreshes to display the Edit Theme icon Edit Theme Icon and Delete Theme icon Delete Theme Icon next to the drop-down menu.
  3. Click the Delete Theme icon Delete Theme Icon to delete the selected custom color theme.
    • The confirmation message “Are you sure?” shows at the top of the screen.
  4. Click Yes in the confirmation message to complete the deletion. (Allow the confirmation message to expire to cancel the deletion and leave the selected style unchanged.)
    • The selected style is removed from the drop-down menu.
    • The message “Theme Deleted” shows briefly at the top of the screen.
  5. Click the Back button Back Button, as needed, to return to the Settings menu.
  6. Click the X button to close the Settings menu.