Component styles tab of the Skin rule form

Use the Component styles tab to define the presentation of components such as dynamic layouts, controls, buttons, or links.

Before you create a custom style format

If your application has many style formats of the same type, such as inline or stacked formats, and these formats vary only slightly, you might benefit from using CSS helper classes instead of creating custom style formats. Applying a CSS helper class to a layout or cell saves development time, reduces maintenance (by limiting the number of customized skin formats), and improves user interface consistency. By avoiding the introduction of unnecessary static content, you also improve the initial loading time of the application.

For more information, see CSS helper classes.

Style formats

You can define various style formats for each component, for example, a button style format. Define style formats on the Component styles tab and reference the formats on property panels in sections, harnesses, and controls.

Inherited formats are displayed with default formats listed first, followed by all custom formats of that type, in alphabetical order.

Formats that are excluded from the CSS file are not displayed on this tab. You include or exclude formats on the Included styles tab. For more information, see Excluding unused components from the CSS file.

Screen layouts and disabled formats

To reduce the size of the Cascading Style Sheet (CSS) file and improve page rendering load time, you can disable some screen layout formats. These formats are displayed with a Disabled indicator. You can override the disabled screen layout inherited formats if you want to use them in your application. For more information, see Overriding disabled inherited screen layout formats.

Define or customize style formats

You can define or customize style formats for the following components:

Using mixins to create style formats for components

You can define style formats for components by using mixins. A mixin is a reusable style pattern. It defines a reusable typography, border, or background style — or a style that is a combination of typography, border, and background styles. Mixins enable you to create incremental styling changes which provide a natural cascading of styles. You can reuse mixins in other mixins and within component style formats. A mixin can inherit styles from other mixins.

Components can also inherit styles from mixins. You can reference one or multiple mixins to define the appearance of UI components, such as buttons or links. A component can use one mixin for part of its presentation and a different mixin or custom settings for the remainder of its presentation.

A component style format can inherit the majority of styles from a mixin and override individual style elements as necessary.

The list of mixins available to a style elements within a component format is filtered—only mixins containing applicable style elements are displayed. Mixins are displayed with default formats listed first, followed by all custom mixins of that type, in alphabetical order.

The alternative to using mixins to define component style formats is to specify custom settings for elements within the style format. Custom settings apply only to a single element within the component style format; they cannot be reused in other elements or components.

Defining style formats for components

You can define style formats for each component by modifying the existing style formats or creating new style formats. A preview of the selected format displays on the right.

The following is an overview of defining a style format for a component. For details specific to the component, click the Help button beside the component name.

  1. Select the component that you want to style.
  2. Select the format that you want to modify or add a new format, if applicable.
  3. Define each style element in the component. See the component-specific help for details. A preview displays on the right, as you define the style. Save your changes and preview the skin by running it in a process, a portal, a harness, the UI Gallery, or the full skin preview.

Deleting style formats

  1. In the Style formats list, select the format that you want to delete.
  2. Click Remove from skin.
  3. In the Mark format for deletion dialog box, click Delete.