Use the Styles tab to define a skin — a collection of styles — that determine the presentation of your application. You can create the major colors, fonts, and other visual elements you want to apply to your application and easily change or update them in a single location.
The Styles tab contains:
- Style Presets — reusable groups of settings that you define in a single location and then apply to multiple elements in the skin rule. Using Style Presets provides consistency throughout your UI, maximizes re-use, and minimizes maintenance. If you change a Style Preset, the change applies to all elements that reference the Style Preset.
- Elements and components (by Category) — define the presentation of elements and components using combinations of Style Presets or custom settings. An element can use one Style Preset for part of its presentation, and a different Style Preset or custom settings for the remainder of its presentation. Custom settings apply only to a single element; they cannot be reused in other elements.
Defining a Skin
On the Styles tab of Skin rule form, specify the Overall Font for your application. The font you specify here is the default font for all Style Presets.
Overall Font
- On the Styles tab, select Style Presets.
- Select the Overall Font. The font you specify here is the default font for all Style Presets.
As a best practice, use the Overall Font when defining Style Presets. This ensures a single font across your UI and enables you to change the font used in a skin in a single location.
Style Presets
- Modify existing or create new Style Presets. For help creating Style Presets, click Help (). The Style Presets that you define display in the Style Preset list.
- For each element within the General, Layouts, Components, and Reports categories on the Styles tab, use a combination of Style Presets or custom settings to define the presentation of the element. An element can use one Style Preset for part of its presentation, and a different Style Preset or custom settings for the remainder of its presentation. The list of available Style Presets is filtered — only Style Presets containing applicable style elements are displayed. Custom settings apply only to a single element; they cannot be reused in other elements.
As a best practice, use Style Presets to provide a consistent UI, maximize re-use, and minimize maintenance.
- Save the Skin rule, and then click Run () to view a full preview of the skin.
To preview a Style Preset, apply it to an element, save the Skin rule, and then click Run ().
Defining a Style Preset
You can modify existing Style Presets or create new Style Presets.
For each Style Preset, you can specify values for Text, Border, and Background. You can change the values at any time.
Modifying a Style Preset
- On the Styles tab, select Style Presets.
- In the column on the left, select the Style Preset that you want to define or modify; for example, Standard Active.
- Select the checkboxes for the style elements that you want to include in this Style Preset.
- Enable Styled Text
- Enable Styled Border
- Enable Styled Background
When you define elements in a skin, a list of only those Style Presets containing applicable style elements appears.
If you clear all of the checkboxes associated with a Style Preset, then the Style Preset is not defined; you cannot use it to style any elements in the skin.
- Define styles for the style elements that you selected, Text, Border, and Background, and then click Save. You can now apply this Preset Style to elements in the skin.
When you define elements in a skin, a list of only those Style Presets containing applicable style elements appears.
For example, when defining the style for Label text, a Style Preset that does not include a Styled Text element will not display in the list of available Style Presets. However, this Style Preset will appear in the list when configuring border or background elements. The following is an example of available Style Presets, from which you can select, when defining an element in the skin.
If an element references a Preset Style that is not defined, an error displays when you save the rule. Resolve the error and save the rule.
To create a new Style Preset
- Click Add a new preset and type a style preset name
- Define the values for The new style is immediately available in the Style Preset list.
If you upgraded a skin rule from PRPC v5.X-6.2SP2, the Standard Active, Standard Inactive, Sub Active, and Sub Inactive Style Presets are populated with the values from your Quick Create settings. When you create a new Skin rule, additional Style Presets appear.
Field | Description |
Enable Styled Text | Select to enable this Preset Style to use the text values that you specify here: - Font — Select the font family and size in pixels (px), points (pts), em (the current font size), or percentage (%). The font family defaults to (use overall), which is the font you specified in the Overall Font field.
- Color — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
- Bold — Select or clear the checkbox to determine the font-weight.
|
Enable Styled Border | Select to enable this Preset Style to use the border values that you specify here: - same for all sides — clear this checkbox if you want to specify a different border style for Top, Left, Right, and Bottom.
- Select a border type and specify the pixel width and color of the border:
none, solid, dashed, or dotted.
|
Enable Styled Background | Select to enable this Preset Style to use the background Type that you specify here: - solid — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color. Click No Fill if you want a transparent background.
- gradient (IE only) — Select the Direction in which you want to blend the colors, horizontal or vertical. Specify the Start and End colors of the gradient, as well as a Backup color for other browsers.
|
If you delete a Style Preset or clear all the checkboxes associated with a Style Preset, that Style Preset is no longer defined. If any components referenced this Style Preset, an error message displays when you save the rule.
Applying Style Presets to Elements in the Skin
When defining the presentation of elements in the skin rule, you can use combinations of Style Presets or custom settings. An element can use one Style Preset for part of its presentation, and a different Style Preset or custom settings for the remainder of its presentation. This list of available Style Presets is filtered — only Style Presets containing applicable style elements are displayed. Custom settings apply only to a single element; they cannot be reused in other elements.
To apply the Style Presets to elements in the skin:
- Access the element or component.
- Click the magnifying glass () next to Style Preset to display the list of applicable preset styles.
- Select a Style Preset from the list and click OK.
If you do not want to apply a Style Preset to an element, you can create a custom style for the selected element. As a best practice, use Style Presets to provide a consistent UI, maximize re-use, and minimize maintenance. - Save the rule and click Run () to view a full preview of the skin.
You can define the following elements in the Skin rule:
Removing a Style Preset from the Selection List
If you do not want a Style Preset to be available to elements in the skin, you can disable or delete the Style Preset. It will not display in the pop-up list of preset styles available for an element.
You can delete new Style Presets that you add, but you cannot delete standard (out-of-the-box) Style Presets. However, you can remove out-of-the-box Style Presets from the pop-up list available for elements.
Disabling an out-of-the box Style Preset
- On the Styles tab, open the Style Preset and clear the Enable Styled Text, Enable Styled Border, and Enable Styled Background checkboxes. The Style Preset is no longer defined; it does not display in the pop-up list of Style Presets available for elements. It continues to display in the Style Presets list on the Styles tab. You can enable this Style Preset at any time.
- Update elements referencing this Style Preset — you cannot save the rule until you remove all references to this Style Preset.
Deleting a new Style Preset
On the Styles tab, select the Style Preset that you want to delete and click Delete.
Disabling or deleting a Style Preset may result in errors when saving the rule if elements in the skin reference the deleted Style Preset.
Default Style Presets (for new skin rules)
The following table lists the default Style Presets for
new skin rules. The
Standard Active,
Standard Inactive,
Sub Active, and
Sub Inactive Style Presets cannot be deleted.
If you upgraded a skin rule from PRPC v5.X-6.2SP2, the Standard Active, Standard Inactive, Sub Active, and Sub Inactive Style Presets are populated with the values from your Quick Create settings. When you create a new Skin rule, additional Style Presets appear.
Default Style Preset |
Standard Active | Action Strong | StandardBold |
Standard Inactive | Focus | Standard Borders |
Sub Active | Hover | Column Header |
Sub Inactive | Error | Menu Active |
Action Standard | Selected | Menu Inactive |
About Skin rules