Summary

The Application Skin wizard (sometimes referred to as a "branding" wizard) enables you to quickly develop and put into production a user interface that reflects corporate or departmental standards. The wizard lets you uniformly apply color schemes, logo images, fonts, and other design attributes to layout and form elements such as headers, tabs, and controls. These elements appear in user portals, work forms, and reports.

The wizard can be used with both composite portals that comprise harness and section rules, as well as traditional portals. In many cases, the wizard eliminates the need to individually modify these elements within the rules.

Because the wizard can be re-run at any time (either updating the same rules, or updating a copy), gradual refinement and experimentation are easy to accomplish.

This article describes an example of how you use a few of the wizard's features to brand a new skin for a composite portal.

Note: This article describes V5.5 features. For V5.4, see How to use the Application Skin wizard. For V6.1, see How to use the Branding wizard to create a new application skin. For 6.3, see How to use the Skin rule to style your application user interface.

Suggested Approach

In this example, Acme Corporation has developed a manager portal for its Order Entry System application using the standard Manager composite portal rule.

The goal is to modify the skin so that some of the branding-related elements in the manager portal, work forms, and reports conform to the company standard. You will use the Application Skin wizard to make those changes.

Before you start, make an inventory of the elements that you are modifying. Compile a list of the colors, fonts, and other information you will apply.

In this example, you will change:

1. The main and accent colors from the default gray scale to light blue and beige (CSS hexadecimal values #B5C5E4 and #E6D7B8, respectively).
2. The color of the portal background to light gray (#ECF1F5).
3. The color of the left and center panel backgrounds to white (#FFFFFF). Their borders will also be light gray.
4. The colors of the active (selected) and the inactive (unselected) tabs.

Create new portal and skin rules

In this example, you will create a new portal rule and run the Application Skin wizard to create a new skin. Do the following:

1. 1. Copy the standard portal rule named Manager into your work class (in this example named OESManager). Do not change the values in the Type and Skin fields. Keep the rule form open.

1. 1. Open the Application Skin wizard by selecting Application > New > Skin. It opens on the first step Name and Location.
   2. Select create a new skin from the I would like to: drop-down list.
   3. Enter the skin rule name in the Name field.
   4. Select the RuleSet and version in the appropriate fields. In this example, the new skin is named OESManager (note that the portal and skin rules do not need to share the same name). Clear the Apply to Work User and Work Manager portals checkbox. Here is how the completed form looks:

Hint:

1. 1. As you work in the wizard, click the Help icon (

1. 1. ) for detailed information about each form.

1. 1. Click Finish to create the new skin rule and generate six CSS text files associated with it as displayed in the Completion panel.

1. 1. Click Close in the Completion panel to exit the wizard.
   2. Return to your portal rule, replace the default skin value with the new skin name (OESManager), and save the rule.

• Open your access group rule. On the Settings tab, add the new portal rule in the Secondary Portal Layouts section and save the rule.

• Select Edit > Preferences in the developer portal menu bar and select New Portal in the Run Process In field and OESManager in the pull-down menu. This enables you to review your skin modifications as they appear during runtime.

Use the Quick Create to make global branding changes

1. 1. Log off and on again to enable the new portal in your File > Open > Portal list.
   2. Select OESManager in the list to open the portal. Here is how the user portal appears using the standard skin rule.

1. 1. Here is a work form:

1. You can close the portal or leave it open as you test your wizard modifications. After you save the skin, click F5 in the browser to refresh it and display your changes.

2. 2. Open the Application Skin wizard. In the Name and Location form, select modify an existing skin and select the skin rule you created.

2. 2. Click Quick Create in the navigation panel. This form enables you to apply fonts and colors to most user interface elements in a single step. In many cases, the Quick Create settings are adequate for a basic branding deployment. Of course, you can customize specific UI elements later by using other controls in the wizard. By default, the main and accent colors are gradient grayscale.
      
      
   3. Leave the Gradient checkbox selected and click the Main box. This opens the Color Picker.

2. 2. Enter the new hex color code (#B5C5E4)in the Hex Value box. The color appears in the New Color box.
   3. Click OK. The color displays in the Main box on the Quick Create form. A complementary color (#E6D7B8) is applied to the Accent box. Variations of these colors also display in the Active and Inactive boxes for use with elements that have selected or unselected states such as tabs, accordions, and menu bars. The main and accent colors are applied to the middle boxes in the Inactive color row; a lighter-density version of the colors appear in the Active row. The first box color (white) is blended in to produce the gradient. The third box in each row denotes the text color (black).

2. 2. To see your modification applied to sample composite elements, click Preview. Here are the results:

2. 2. Click Save. This regenerates the CSS files with your updates. Do not exit the wizard.
   3. To see the updated user portal, open it by selecting File > Open > Portal >OESManager or refresh the browser (if the portal is open). Here is how your modifications look:

2. Operate the various controls on the portal to see how the skin settings are applied. Note the difference in color between elements that can be selected and unselected (menu bars, tabs, accordions, and so on).
3. Open a work item to see the color applied to the work form.

Modify the Quick Create settings

You may want to override the settings applied by Quick Create to specific elements. In this example, you will change:

• • The portal area's background color
  • The left and center panel border and background colors
  • The colors of active and inactive tabs (as shown in the example below):

Modify the portal and panel background colors

1. 1. Return to the wizard and click General in the navigation panel.
   2. In the General section, select solid in the Background Type field. Enter #ECF1F5 in the Color field as shown here:

1. 1. Expand the Portal / Left Panel and Center Panel sections on the form.
   2. Select solid in all Border and Background settings.
   3. Using the Color Picker, apply the background color (entered in Background section) to both Border settings. Select white (#FFFFFF) for both panel backgrounds.

Modify the tab settings

1. 1. Click Layouts — Tabs.
   2. In the Standard Tabs section under the Active and Inactive columns, reverse the main (blue) colors with the accent (biege) colors used in the Border and Background colors as shown here:

1. 1. Click Save . Open the portal and review the results.