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.

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 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.

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.

To define a style for a component:

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

To delete a style format:

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

About Skin rules

Open topic with navigation