Summary

The Skin rule enables you to brand your application easily, auto-generating the CSS style parameters that define the appearance and behavior of user forms, reports, and portals. It is is designed to enable reuse and cascading change throughout your application Skin.

You can define styles for standard formats in the Skin rule, such as headers, or create custom formats for grids, tabs, smartlayouts, buttons, and links. See How to add custom tab formats to your application skin. You can also create custom styles in the skin rule and attach additional style sheets, if necessary.

The best practice is to define Style Presets, a group of settings that form a style, and then reference one or multiple Style Presets to define the appearance of elements and components within the skin. Using Style Presets helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance. A change to a Style Preset cascades throughout all elements in the Skin rule that reference the Style Preset.

This article describes how to create a new skin rule and define Style Presets. For information on working with an existing skin rule, see How to use the Skin rule to modify the appearance of your application.

Note: The Skin rule, available in PRPC 6.3, replaces the Branding wizard. Existing skins created using the Branding wizard are automatically upgraded to use the Skin rule.

Suggested Approach

Create a new skin rule, define Style Presets, and then run your application in the skin.

Create a new skin rule

1. In the Application Explorer, select User Interface, right-click Skin, and select New.
   
   You can also save an existing skin as a new skin rule. This is useful if you are making minor adjustments to an existing skin.
2. Type the Skin Name and click Create.
   
3. The new skin appears, with a number of pre-defined Style Presets.
   
   
   If you saved an existing skin originally created with the Branding wizard, the following four Style Presets appear. These Style Presets correlate to Quick Create settings defined in the Branding wizard.
   
4. Save the skin rule. The skin name appears in the tab and the Run button is now available.
   
5. To view a full preview of the skin, click in the toolbar.
   

Set the Overall Font

On the Styles tab of the Skin rule form, set the Overall Font for the application skin. Font choice is important — the font impacts the readability, usability, and effectiveness of your application.

The font that you select as the Overall Font is the default font for all Style Presets. A Style Preset is a reusable setting or group of settings that you define in the Skin rule and then apply to multiple elements or components in the Skin.

Since the Overall Font is the default font for all Style Presets, and Style Presets determine the presentation of UI elements, a change in the Overall Font cascades throughout the application skin. This is extremely powerful.

As a best practice, when defining Style Presets and styles for elements and components, use the Overall Font.

You can define the font size, color, and weight in Style Presets. Capturing the font size and color within Style Presets provides consistency and ease of maintenance, enabling a single change in the Overall Font to cascade throughout all elements using that font. You may want to define multiple Style Presets that define the Overall Font with a different height, weight, or color, for use in headers, labels, and error messages.

The following example demonstrates Arial as the Overall Font.

Using Style Presets that reference the Overall Font throughout your application skin help to ensure a single font across your UI and enable you to change the font in a skin in a single location. Elements that use custom styles may not be affected by this cascading behavior.

About Style Presets

When you create a new skin, a number of Style Presets are already defined. Style Presets are reusable groups of settings that describe style and presentation. For each Style Preset, you can specify values for any or all of the following: Text, Border, and Background. You can change the values at any time.

The best practice is to use Style Presets throughout your application skin.

You can use combinations of Style Presets to define the presentation of elements and components, such as headers and tabs, in the application skin. An element, such as a header, can use one Style Preset for part of its presentation and a different Style Preset or custom settings for the remainder of its presentation. For example, header text may reference Style Preset A and Header background, Style Preset B. Custom settings apply only to a single element; they cannot be reused in other elements.

Style Presets are powerful — a change to a Style Preset cascades throughout all elements in the skin that reference the Style Preset. For example, the Basic Style Preset may define a black text color and beige background. If a component, such as a set of tabs, references the Basic Style Preset, then the tabs appear with black text color and a beige background. A change to the Basic Style Preset changes the way the set of tabs appears, as well as the way all elements that reference the Basic Style Preset appear.

Define Style Presets

You can define a Style Preset in your skin by modifying an existing Style Preset or creating a new Style Preset.

If you are making broad changes, such as changing the background color or application font, begin by modifying shipped Style Presets. Multiple elements within new skin rules reference shipped Style Presets, such as the Standard Active Style Preset. Changes that you make to these Style Presets cascade throughout the application skin. For more information about modifying existing Style Presets, see How to use the Skin rule to modify the appearance of your application.

The following example demonstrates how to change the background color of the Standard Active Style Preset. Defining the color scheme for an application skin in Style Presets ensures consistency throughout the user interface and enables you to change the color scheme easily, if desired.

To change the background color of the Standard Active Style Preset:

1. On the Styles tab, select Style Presets, and then select the Standard Active Style Preset.
   
2. In the Enable Styled Background area, click the box beside the hexadecimal color value to choose a new background color.
   
3. Select the background color. It displays in the New Color field and the Hex Value updates to reflect your selection.
   
4. Click OK.
   
5. Save the updated skin rule and click to view a preview of the skin. Notice that the background of both the Page and Tab headers is now beige. These elements use the Standard Active Style Preset to present the background.
   
6. Run the application in the updated skin. To do this, in the Profile menu, select Preferences.
   
7. In General Preferences, select the skin in which you want to run the process, in this case, OurCompanySkin, and then click Save.
   
8. Run your application. To do this, click the Run icon in the Quick Access Bar, select Run Process, and then select the process name, in this case, StartEquipmentRequest.
   
9. The Page background is beige. Since the Details and Additional Information sub-tabs also reference the Standard Active Style Preset, they appear with a beige background as well.
   
10. Notice that the background of the header, Enter New Hire Details, is unchanged. The Standard Active Style Preset does not determine its appearance.
    

For more information on modifying existing Style Presets in the Skin rule, see How to use skin rules to modify the appearance of your application.

Create a New Style Preset

You can also change the background in your application by creating a new Style Preset and applying it to one or multiple elements in the Skin rule.

Using a Style Preset to set the background color, rather than a custom setting, is the best practice. Unlike Style Presets, custom settings apply only to a single element; they cannot be reused in other elements.

To create a new Style Preset:

1. In the Skin rule, select the Styles tab, and then select Style Presets.
2. Click and type a name for the Style Preset: Basic.
3. Select the checkboxes for the style elements that you want to include in this Style Preset, in this case, Enable Styled Background. Select solid as the Type and set the Color to light blue.
   
4. You can now apply this Style Preset to elements in the Skin rule.

Apply a Style Preset to an Element

To apply a Style Preset to an element:

1. On the Styles tab, select the element, for example, Page.
2. If the element is using a custom setting to present the background, clear the Use Custom Background checkbox. The most-recently used Style Preset for this element appears.
3. Click the magnifying glass to view a list of applicable Style Presets. The list of available Style Presets is filtered — only Style Presets containing applicable style elements are displayed. In this case, select Basic.
   
4. Save the skin and then run the process, StartEquipmentRequest.The Page background, presented by the new Basic Style Preset, is blue.
   
   The background color of the tabs does not change because the background color of the tabs is set by the Standard Active Style Preset. To present the tabs with a blue background, update the tab elements to reference the Basic Style Preset. For more information, see How to use skin rules to modify the appearance of your application.

Using the Skin rule, you can easily define and update the presentation of your application user interface.

Additional Information

How to add custom tab formats to your application skin

How to use skin rules to modify the appearance of your application