Previous  Top  Next

Styles

The Styles sidebar (screenshot below) enables CSS styles to be defined locally for SPS components selected in the Design View.

The Styles sidebar is divided into two broad parts:

•

The Property Definitions column, in which CSS properties are defined for the component type/s selected in the Styles For column. The Property Definitions column can be displayed in three views (see below). For the details of how to set local property definitions, see Setting CSS Property Values. The XPath icon toggles on and off the application of XPath expressions as the source of property values. With a property selected, if the XPath icon is toggled on, then an XPath expression can be entered for this property and the return value of the XPath expression is used as the value of that property. In this way, the value of a node in an XML document can be returned, at runtime, as the value of a property. When the XPath icon is toggled off, a static value can be entered as the value of the property.

Three views of Property Definitions

The Property Definitions column shows the properties of the component selected in Design View. The display is available in three views (listed below) and can be switched between each other by clicking the respective buttons in the toolbar of the Entry Helper:

•

Grouped : The properties are organized into groups. In this view, the Property Definitions column is divided into three columns: Group, Attribute, and Value. All the available property groups are displayed in the Group column. When a group is selected, the properties of that group are displayed in the Attribute column. If a value for a property is defined, the value appears in the Value column.

•	List All : All properties of all groups are listed in a single alphabetically ordered list. The Attribute column is listed first, followed by the Group column and then the Value column.

•

List Non-Empty : Only properties that have values defined are listed. The columns are ordered, from left to right, as follows: Attribute, Group, and Value. In this view, it will not be possible to define a value for a new property—because no undefined property is listed. However, this is a quick way to see all the defined properties for the selected component type, and the displayed properties can be edited.

Views can also be changed by right-clicking any item in the Property Definitions column, selecting View Mode, and then the required view.

Toggle Important and Reset toolbar icons

Clicking the Toggle Important icon sets the CSS value !important on or off for the selected CSS rule. Clicking the Reset icon resets the value of the selected property.

See also:

Working with CSS Styles, for a complete description of how to work with CSS styles and how to use the Styles sidebar to define CSS styles locally on components

Style Repository, for information about working with external CSS stylesheets and global styles.

Predefined Formats, for a description of how to use predefined HTML formats in the SPS.