Rules Inspector — Working with the Style Discovery tool

Icon

Purpose

Select and slowly drag the grab area to move the Style Inspector toolbar to another location within the portal. Drop the toolbar in a location away from the work object form elements of interest.

Smart Info

(no icon)

Place and hold the mouse pointer over any element of the form to see a pop-up SmartInfo window identifying the HTML tag and all CSS properties of that tag, including a style name (if any) and CSS properties.

To temporarily override a CSS property setting, type a new value in the Value column and click Apply. This feature allows you to experiment with changes; you are not altering any rules. For example, you can change the color attribute value from #0c3879 to #0000FF (blue).

To see the enclosing tag and its styles, click the Up icon (). To return to a previously displayed enclosed tag after using the Up icon, click the Down icon ( )

If the selected element does not directly have a style, your change is applied only to the single selected element, as a <SPAN STYLE= ..."> element. If the selected element has a style, your change temporarily supplements the current (permanent) style definition.

Because the net effect of styles are cascaded from multiple style definitions, clearing or changing a CSS property value may in some cases have no visible effect, as a higher-level CSS definition defines the same appearance.

Click to open a pop-up window that starts the Style Explorer. The window lists all style sheets currently in force for your session, in cascading order; the last CSS to be applied appears at the bottom of the list.

In some cases, multiple individual CSS files may be bundled into one longer file, to reduce network traffic between the Process Commander server and your browser. Click Unbundle if to see the CSS files listed individually.

You can temporarily supplement the current CSS files that apply to the current work object form by selecting a Text File rule (from those with a File Type of CSS) and clicking the Add button. The added CSS appears at the bottom of the list and is applied last.

Click the Include check boxes to alter which styles are in force. (If the CSS files are bundled, all styles in the bundle are applied.)

Click Change to refresh the work object form or report display with the updated style sheets.

pop-up toggle

Click to disable SmartInfo display of CSS styles and properties. Click again to enable the display.

Search tool

Click to open a pop-up window that support searching for styles using text matching. You can search through the selectors (style "names") or through the style definitions. Enter a text string in the Search Styles input box; then check the By Selector box or the By Definition box (or both). Click Search.

For example, if a CSS text file rule contains the following definition:

.yui_button { display:inline-block ... }

then this style is found if you search for By Selector values containing "utton", and is also found if you search for By Definition values containing "inline-block".

Search examines all styles in (unbundled) CSS files listed by the Style Explorer.

Each search hit is presented as a link. Click a link to open the corresponding style definition. You can edit the style definition directly; such changes are only temporary.

Click to list the styles that you have temporarily altered or redefine with this tool. If you have altered a style more than once, it appears multiple times in the list, with the latest change appearing last.

To remember these changes, click the Copy all link on this form to copy this page to your Windows clipboard. You can save this (using NotePad) as a local text file, and refer to it when you create or update a CSS text file rule.