Back Forward Using the Style Viewer

  Show all 

C-2330 Use the Style Viewer to preview the runtime HTML rendering of CSS styles defined in text file rules. The Style Viewer presents the name and a sample rendering of each style in a set of CSS files, organized for review and access.

  Basics

The Style Viewer display allows you to identify the style elements used in skin rules and other rules that collectively control the fonts, colors, layout, and images of browser displays and forms.

The Style Viewer helps you identify any gaps in a style sheet that is intended to override a standard style sheet. Because CSS styles use a cascading or inheritance feature, a standard style applies for any elements not explicitly defined in your style sheet.

To enable the Style Viewer to operate with a style sheet, create your styles sheet with the Branding wizard. (If you define styles directly in a text file rule, follow the naming guidelines presented in More about Skin rules.)

NoteFor work object forms, the Style Discovery tool allows you to both learn the names of styles and to experiment with changes. However, unlike the Style Viewer, the Style Discovery tool does not support portal or report styles.

  Operating the Style Viewer

  1. Select Pega Button> User Interface > Tools > Style Viewer to BYRNB 2/22/10 start the Style Viewer.
  2. Complete these fields to preview the effects of styles defined in a CSS file:

Field

Description
Baseline Style

SmartPromptSelect a baseline style group:

Developer  Establishes a foundation of styles from the final text file rule named webwb.desktopbase.css. These support the standard portal rule named Developer
User Establishes a foundation of styles from the final text file rule webwb.desktopbaseuser.css. These support the standard portal rules named WorkUser and WorkManager, introduced with Version 4.2SP5.
Classic For CSS styles associated with portal rules introduced with Version 4.2SP4.
Right-to-Left?

Check to restrict the scope of the drop-down lists to those style sheets with names that end in the suffix _rtl, indicating that they are designed to support text in right-to-left languages such as Hebrew and Arabic.
Style Type

SmartPromptSelect a type to control which text file rules appear in the Style Name field:

Desktop To list text file rules named webwb.desktop_zzzzz.css, where _zzzzz is an arbitrary suffix. By convention, rules with these names each define styles for the portal workspaces and navigation panel.
Work To list text file rules named webwb.work_zzzzz.css, where _zzzzz is an arbitrary suffix. By convention, rules with these names each define styles for work object forms, defined by harness and section rules.
Reports To list text file rules named webwb.report_zzzzz.css, where _zzzzz is an arbitrary suffix. By convention, rules with these names each define styles for the display of list view rules and summary view rules. (These text files rules can also be referenced on the Format tab of a list view rule.)
Rule To list text file rules named webwb.ruleform_zzzzz.css, where _zzzzz is an arbitrary suffix. By convention, rules with these names each define styles for rule and data forms, created with the Form Builder tool.
Style Name

SmartPromptSelect a text file rule from the list. The list shows rules that match the Style Type filter criteria and that belong to RuleSet versions you can access.
Local Style Name

SmartPromptAvailable for a Style Type of Work. Optionally, select a text file rule that supplements style definitions in the text file rule you identified in the Style Name field.

  Results

The resulting display presents the names of style names on the left, with an example of each to the right of the name. More complex examples, showing how styles combine to produce an overall appearance, appear at the right.

Related styles are grouped together.

Hold the mouse pointer over a group name to access, in a SmartInfo pop-up window, the detailed list of style elements that apply to members of the group.

  Preferences

You can control whether the Style Viewer opens in a new window or in the lower half of the Designer Studio workspace. C-2268

  1. Select Preferences from your profile menu. KOWAL 03/03/10
  2. Select or clear the Style Viewer box in the Tools group as appropriate.
  3. Click  Save  .

  Tips and troubleshooting

NoteThe Style Viewer display promptly reflects the most recent changes to CSS styles in text file rules you have changed. You do not need to delete Internet Explorer's Temporary Internet Files cache after changes. However, when testing style changes to see their effects on portals, work object forms, and reports, clear this cache often.

NoteYou can reference styles in many rule forms, and the order in which they appear in final output is significant. When one single style is defined in multiple CSS files, the innermost (last) style definition overrides the others. To simplify debugging and maintenance of styles in your application, minimize the number of text file rules you create with CSS styles and follow the naming conventions.

NoteTo determine the source of styles in for a work object form, use the Style Discovery tool. For reports, rule forms, or portals:

  1. Display the portal, rule form, or report when logged in with the access group or groups that are appropriate for the user.
  2. Right-click the Internet Explorer display and chose View > Source from the context menu. The HTML source code appears in Notepad or another text edit.
  3. Search the source code for CSS to find the <HEAD> elements, similar to:

    <link href="css/workform.css" rel="stylesheet" type="text/css">

  4. Note carefully the order that these CSS files appear.
Definitions skin rules, Style Discovery tool
Related topics Understanding CSS styles
About Text File rules
About Skin rules

Up Tools, Accelerators, Gadgets, and Wizards