Help: Branding Wizard — Quick Create

Apply fonts and colors to most UI elements in a single step.

Complete the Initialization Method field. Choose:

• none — To build a skin by supplying all elements. No initialization is performed and all options on the panel disappear. Click Next>> to advance to the next wizard step.
• quick create — To build a skin by supplying a font name, an image for the portal title bar logo, and the main and accent colors.

Using Quick Create

If you are in modify or copy skin mode (Name and Location — Step 1) and select quick create, updates to settings on this panel overwrite colors and fonts you may have customized in later steps. If you want to keep the current look of the skin, select none.

Pick font

Select a font for your skin. This font is applied generally to all text elements.

Pick colorsv6.1 proj-242 grp-2027

Use the color selection area to automatically apply colors to many of the backgrounds and borders used by interface components.

Depending upon the component, a main or accent color is applied. By default, the main and accent colors are gradient grayscale. The text color (third column) is black. The main and accent colors also display in the Active and Inactive boxes for use with elements that have active and inactive states (selected or unselected) such as tabs, accordions, and menu bars. The main color is applied to the Inactive color; a lighter-density version of the color appears in the Active box. You can modify any of the colors individually.

To modify the default colors:

1. Clear the Use Background Gradients (IE Only) checkbox if you want to use flat colors (or grayscale) in Internet Explorer browsers. Firefox browsers do not display gradients. If you do not use gradients, the gradient color boxes (middle column) in the Active and Inactive rows are hidden.
2. To change the main color, click the Main box to access a pop-up color picker and select a color. When you select a color, the complementary color is applied to the Accent box. The main and accent colors appear in the Active and Inactive boxes.
3. Optionally, you can change the default accent color by doing either of the following:

• Click the complementary magnifying glass icon ( ) to open a pop-up color wheel. Pick an analogous or grayscale accent color (the complementary color is 180 degrees away on the color wheel. For example, green is analogous to red; blue is complementary to orange).
• Select the Accent box and use the color picker.

Use the Preview button to see which elements are affected.

4. Use the Active and Inactive color boxes to individually modify the colors specified in the Main and Accent boxes.

If you are using gradients, three boxes are displayed. Use the first and second boxes to blend colors for a horizontal two-tone effect. The third box is for text. The left box is the upper color, the right for the lower. For example, yellow and red are blended as shown here:

You can swap colors (upper and lower) by clicking the arrows ( ) between the boxes.

If you are using flat colors (the Use Background Gradients (IE Only) checkbox was cleared), there is no color box for blending a gradient. In this example, the background is brown and the text is yellow:

5. Proceed through the wizard if you want to individually modify the colors and fonts in various panel, layout, work form, and report elements that were applied generally by Quick Create.

Commands

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

Click Next>> to advance to Smart Layouts, Step 3.

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.

About the Branding wizard