Help: Branding wizard — Layouts

Select a layout element you want to update from the drop-down list in the Element settings field. COLLAPSE CANDIDATE

Panel Set

Override the General settings in these Element settings or the colors selected in Quick Create.

1. Specify the expanded and collapsed header font typeface and colors. Select the Use the same formatting for Expanded and Collapsed headers checkbox if you want your settings to apply to both. Doing so displays a single column of settings.
2. Specify a border color. Clear the same for all sides checkbox if you want to use different colors for the left, right, bottom, and top borders.
3. Specify the height of the panel heading bar by entering a value (pixels) in the Height field.

Panel sections

Individually customize the border, text padding, and font for each of the panels used in a composite portal as well as for the container for all panels. These settings control the branding of the panels in a panel set in the General section.

Header

Standard — Specify the fonts, border colors, background colors, and height of the Standard bar. The Main color entered in Quick Create is the default. You can individually configure the fonts, border, and background colors for an Expanded and a Collapsed bar using the option boxes displayed in the left and right columns, respectively.

Use the Body section to configure the colors and text padding used in the content area beneath the bar.

If you select Image as a body background you can use tile patterns in arrays that are horizontal, vertical, or both (covering the entire area).

In the example below, the tile pattern is based upon a logo positioned in the center (horizontal and vertical positions set to Center) of the background:

Here is an example of a vertical tile using positions bottom and left. The array is based on a logo in the bottom left corner:

Sub, A, B, C, and D — Use these sections to configure the sub bars and their bodies. By default, sub bars use the Accent color entered in Quick Create. Use the Outline section to define the border and background colors surrounding the header and body.

Accordion

Modify the colors and fonts applied to accordions and sub-accordions. The Quick Create Main color is the default.

Repeating

Select the repeating format you want to edit from the Format field drop-down list.

Row/Column

The settings in this format are rendered in repeating row or column layouts . See Adding a Row Repeat layout and Adding a ColumnRepeat layout.

Apply colors and fonts to columns and to odd and even rows. Here is an example:

The results look like this:

The field values in the preview are examples only and do not represent wizard selections.

Spreadsheet, Transparent, and DefaultV6.1 sp2 pashm

These three formats are rendered in the repeating and action areas of the Grid, Tree Grid, and Tree layouts. See Adding a Grid layout, Adding a Tree Grid layout, and Adding a Tree layout. During development, you can preview in the section rule your layout formats by selecting one from the Style field in the Layout Cell Properties panel.

All formats apply to the same layout elements but differ in their default settings. The Default format uses new skin defaults or settings applied by Quick Create. Spreadsheet and Transparent formats start with their own default values and are not affected by Quick Create. You can modify any of the formats in this panel to suit your requirements. If you update the skin using Quick Create, your changes overwrite the Default format but not the others.

In the wizard Preview mode, use the Style drop-down list to see your updates as they apply to each format. For instance, if you are editing a Default format, select Default from the list.

Use the following sections in this panel to configure the colors and images used in these elements:

• Headers — Text, border, and background of the cells in the repeating area header row and grid row handles (left column). Border colors apply to each side of a header cell.
• Rows — Text and background of the odd,even, and selected rows. Use the Image Catalog to change the expand (default: plus sign default), collapse (default: minus sign), and row handle tree icons (defaults: solid and empty bullets) that appear in the Tree and Tree Grid header and layout hierarchy cells.
• Action Layouts — Colors and spacing applied to the top and bottom action areas in the layout. Border colors apply to each side of the action area cell. Spacing applies to the a margin around the outside of the entire action bar. Your settings are not visible in the wizard Preview mode.
• Advanced — Styles for the following indicators:

– Ascending sort and Descending sort— Indicate to the user the current sort state of the column. In Preview mode, hover and click your mouse on the column header to display the icon. The user sees these icons only if sorting is enabled (Sorting checkbox selected) in the layout's repeating area Cell Properties panel.

– Column Panel — Indicates to the user that the column can be filtered. V6.2 GRP-22524 pashm

– Column Panel Filtered — Indicates to the user that a filter is applied to the column.

• Common Drag Drop Types — Color of the row beneath which a child row will be dropped; icons indicating whether the dropped row will be a sibling or child of the selected node in a tree or tree grid.

Body

Standard Hidden — Use this section to configure a layout that does not have a header. Use the Indent option to move the panel to the right by a specified number of pixels.

Sub Hidden — Use this section to configure a layout without a header.

Complete this step to modify the colors and fonts applied to tabs and sub tabs. The Quick Create Main color is the Standard Tab default. The Accent color is the Sub Tab default.

Action Header

An expanded header only (single column for fonts, borders, and background colors). The Main color is the default.

Outline Header

Provides no header area, but a border around the contents of the layout with a single text label.

Custom Header

Configure a body area for a custom configuration (an HTML field in an HTML rule defines the content and appearance). This UI element does not appear in preview mode.

Tab

Modify the colors and fonts applied to Standard (harness and section), Sub, and Page Repeat tabs. The Quick Create Main color is the Standard tab default. The Accent color is the Sub tab default.

In the example below, the standard tab background is gradient green (dark for active). The font is Arial in a larger size than the non-active tab. The body beneath the tabs is tan. The sub-tabs use dark and light blues to denote active or inactive states, respectively, and use a Times New Roman font.

How to modify tab images

Three types of tabs appear in applications: standard tabs in a harness, standard tabs in a section, and sub-tabs. Default background images are used to render them. You can override images by selecting the image option for a background and entering a custom image. Expanding the width beyond the width of the image creates a space between it and the adjoining image. Reducing the pixel size cuts off the image at runtime.

Each tab comprises a left, middle, and right image. Variations of these images are used to differentiate a tab that is selected (active) or not selected (inactive).

By default, the middle images (active or inactive) are tiled across the tab and automatically sized to span the left and right images to equal a total width of 110 pixels. Use the Auto setting so that the width expands as text is entered in the tab.

Combinations of the tab images comprise a tab rendering based upon the position and focus of the tab. The three positions are:

• The left-most tab in the array.
• The middle tab between the left-most and right-most tabs.
• The right-most tab in the array.

The examples below show the settings used for each tab position and its focus:

Left-most tab active

Middle tab active

Right-most tab active

To achieve an overlap effect, use an overlap image in the Left on Right Collapse and Right on Left. You can use the Image Viewer to search for standard overlap images (for instance, search on the word "overlap". Here is an example of a Left on Right Collapse overlap:

Section tabs and sub-tabs

Use the Dual Left and Dual Right settings. There are no overlaps. These images show the active and inactive states in the same image and must be the same height. Here is an example of the default settings:

Because there is no middle image, the right image must be as wide as any text you put into the tabs. Use the Auto setting to allow the width to expand with the text entered.

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 Custom, Step 5.

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