Skin form — Completing the Component Styles tab

Use the Components tab to define the presentation of components.

A component is an element that you can style within the skin, for example, a layout, such as dynamic layouts, or a control, such as a button or link.

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

You can define style formats for the following components:

Using mixins to create style formats for components

As a best practice, 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 then use the Skin Run Menu to 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