Help: Branding Wizard — General

Define basic characteristics for work object forms defined through harness, section, and flow action rules in your application, including the font and background colors.

The settings in this category can be refined with increasing levels of granularity in the other categories. For example, the settings in the General section are applied, where appropriate, to the Panel Set element in the Layouts category. If you set the general background color to yellow and leave the panel backgrounds transparent, yellow is applied to all. However, if you apply another color (green, for example) in the Top panel, green is applied.

Page

Keep the default background setting none if you do not want to modify the background (no fill). Otherwise, do the following:

1. Select a font.
2. Select a background type. If you specify a solid, image, or gradient (IE only) background, appropriate fields are displayed for the type.
3. If you select solid, you can use the pop-up color picker by clicking the box to the right of the field.
4. If you select gradient (IE only), you can use the Direction field to blend the colors horizontally or vertically. For example, if you use the horizontal setting with these colors:
   
   The background looks like this:
   
   If you use the vertical setting, it looks like this:

   

5. Enter a Backup Color for Firefox browsers. Internet Explorer users will see the gradient, not the backup color.
6. If you select image, do the following:

• Select a background color (fill). Enter the CSS hexadecimal value (such as #F0B9C7), or click the box next to the field to open the color picker. Leave the default value transparent if you do not want color.
• Enter the file name including the relative path such as images/AlphaCorpLogo.gif file name in the Location field. To search for an image, click the magnifying glass button () to open the Image Catalog. Enter any portion of a File Name key part (relative path, file name, or extension) in the Search box, or a file name followed by a period and file type, such as plus.gif. Click the Find button to locate images that contain matching text within the key. Select the image you want and click OK. (If you can’t find the image, make sure it is in the webwb directory).
• Use the Position and Tile controls to arrange the image on the background. Set Tile to None if you want to use a single image; set to Horizontal if you want a single row of images across the background. The starting image is positioned according to the horizontal and vertical position controls. Here are some examples:

In this example, the position of the single logo (no tile) is top left:

In this example, the tile array is based upon the first logo at the top left position:

In this example, the array of icons is based upon the first logo in both center positions:

7. Enter padding values (in pixels) for the overall outside window that appears in forms and headers (does not appear in preview mode).

Links

Enter the typeface configuration used for links

Labels

Enter the typeface and justification settings for:

• Labels, such as text values used to label controls in layouts.
• Field labels, such as label text used in field values rules. V6.2 GRP-24335 pashm

Commands

Click Preview to open in a new window a rendering of the UI elements as configured so far. To view the rendering on the traditional Pega portal, click the Preview Traditional Portal button in the preview window.

Click Next>> to advance to the next wizard step and specify additional characteristics.

Click <<Back to return to the previous step.

Click Save to save your updates to the skin rule.

Click Cancel to discard your updates and exit the wizard.

Click Finish to save your updates and exit the wizard. This action opens a panel containing an array of rules comprising the skin and its associated portal and text rules. Click the edit button () to open a rule.

Click Reopen Skin to return to the first step, or click Cancel to exit the wizard.

Styles and Formats Help Topics

About the Branding wizard