This content has been archived and is no longer being maintained.

Table of Contents

Article

Styling UI elements based on their state

You can alter the display format of a control or component on forms in response to user actions in the browser to guide the user to the next action. For example, an input field can be highlighted when the cursor is placed inside the field to indicate that the user needs to provide input in the field.

You can style the following controls or components based on their style:

  • Text input and formatted text
  • Buttons
  • Links
  • Drop-down menus
  • Radio buttons (even when styled as segmented buttons)
  • Layout groups
  • Container headers

You can style the controls or components by using the options on the application skin form.

  1. In the Designer Studio header, click your application name, and then click Skin.
  2. On the Components tab, select the control or component that you want to style.
  3. Select the style format to view the styling options. For layout groups, the style options are on the Tab Styling tab.
  4. Under the <control> states section, select the state for which you want to style the control or component. You can select one of the following styles:
  • Auto– Select this option to apply the predefined styles for the control in this state. These predefined styles are applied according to system-defined logic and cannot be modified.
  • Default– Select this option to apply the browser-defined styles instead of the default or custom styles that are available in the application.
  • Custom – Select this option to define your own styles for the element in this state.
  • Use same styles for hover, focus and active – Select this check box to use the same style for all the states.
  1. Click Save.

Published June 5, 2017 — Updated June 30, 2017


100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.