UX ADMINISTRATION

Chapter 1. INTRODUCTION

   

 

< PREVIOUS Chapter 1 Using the Date Entry Calendar

CONTENTS INDEX

NEXT > Chapter 1 Organization of the User Guide

---

Using the Color Picker

The Color Picker lets you specify font and background colors when creating page components or widgets (see Chapter 4, Working with Pages and Widgets for more information) or when creating or modifying a theme for the user interface (see Working with Themes and Styles for more information).

To specify a color by HTML color name:

• Enter the desired color name in the Color Picker text box.
  • The swatch next to the Color Picker text box refreshes to display the specified color.

To open the Color Picker palette:

• Click the swatch next to the Color Picker text box.
  • The Color Picker palette displays.

• The Color Picker palette shows the currently selected color palette, a color swatch, a color range “slider” (upper “slider”) ” to select the color range from which you wish to choose a color, and an opacity “slider” (lower “slider”) to set the opacity (transparency level) for the color, and a menu that lets you specify a color by hex code, RGBA value, or HSLA value.

To select a color from the color palette:

• Open the Color Picker palette.
• Use the color range “slider” to select the color range from which you wish to choose a color:
  • Position the cursor on the color range “slider” bar.
  • Click and hold the left mouse button, then drag across the “slider” bar to the desired color range.
  • To select the desired color from the “gradient” box, move the cursor to the desired color, then click the left mouse button.
  • The swatch next to the “slider” refreshes to display the specified color.
• If desired, use the opacity “slider” to set the opacity (transparency level) for the color:
  • Position the cursor on the opacity “slider” bar.
  • Click and hold the left mouse button, then drag across the “slider” bar to increase or decrease the opacity of the selected color, from 1.0 (no transparency) to 0.0 (100% transparency).

    NOTE: When you adjust the opacity using the opacity “slider,” the Color Picker refreshes to show the RGBA value for the currently selected color.

  • The swatch next to the “slider” refreshes to display the currently selected color with the currently selected opacity value.

To specify a color by hex code:

• Open the Color Picker palette.
• Use the Color Picker Scroll buttons , as necessary, to scroll to the Hex field.
• Enter the hex value for the desired color in the Hex text box.
  • The swatch next to the “slider” refreshes to display the specified color.
• If desired, use the opacity “slider” to set the opacity (transparency level) for the color:
  • Position the cursor on the opacity “slider” bar.
  • Click and hold the left mouse button, then drag across the “slider” bar to increase or decrease the opacity of the selected color, from 1.0 (no transparency) to 0.0 (100% transparency).

    NOTE: When you adjust the opacity using the opacity “slider,” the Color Picker refreshes to show the RGBA value for the currently selected color.

  • The swatch next to the “slider” refreshes to display the currently selected color with the currently selected opacity value.

To specify a color by RGBA value:

• Open the Color Picker palette.
• Use the Color Picker Scroll buttons , as necessary, to scroll to the RGBA field.
• Enter the RGB value for the desired color in the R / G / B text boxes, or use the Scroll Field buttons to adjust the values in one-unit increments.
  • The swatch next to the “sliders” refreshes to display the specified color.
• Enter the desired opacity value (transparency level) for the color in the A text box, or use the Scroll Field buttons to adjust the value in 0.1-unit increments, from 1.0 (no transparency) to 0.0 (100% transparency).

To specify a color by HSLA value:

• Open the Color Picker palette.
• Use the Color Picker Scroll buttons , as necessary, to scroll to the HSLA field.
• Enter the HSL value for the desired color in the H / S / L text boxes, or use the Scroll Field buttons to adjust the values in one-unit increments.
  • The swatch next to the “sliders” refreshes to display the specified color.
• Enter the desired opacity value (transparency level) for the color in the A text box, or use the Scroll Field buttons to adjust the value in 0.1-unit increments, from 1.0 (no transparency) to 0.0 (100% transparency).

To exit the Color Picker:

• Move the cursor outside the Color Picker, then click the left mouse button.

 

 

---

< PREVIOUS Chapter 1 Using the Date Entry Calendar

CONTENTS INDEX

NEXT > Chapter 1 Organization of the User Guide