LinkedIn
Copied!

Table of Contents

Component styles (custom style formats)

Version:

Only available versions of this content are shown in the dropdown

Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.

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 work (by limiting the number of customized skin formats), and improves the consistency of your application's look and feel. By avoiding the introduction of unnecessary static content, you also improve your application's initial loading time. For more information, see CSShelper classes.

Style formats

You can define style formats for the following components:

General Layouts Controls Reports
Skin form — Components tab — General — Page Skin form — Components tab — Layouts — Containers Skin form — Components tab — Controls — Labels Skin form — Components tab — Reports — List view
Skin form — Components tab — Layouts — Screen layouts tabs Skin form — Components tab — Controls — Text inputs & Formatted text Skin form — Components tab — Reports — Column filter
Skin form — Components tab — General — Panel Set custom button formats Skin form — Components tab — Controls — Dropdowns Skin form — Components tab — Reports — Paging bar
Skin form — Components tab — General — Action area Skin form — Components tab — Layouts — Layout Groups Skin form — Components tab — Controls — Radio buttons  
Skin form — Components tab — General — Button area Skin form — Components tab — Layouts — Dynamic layouts Skin form — Components tab — Controls — Check boxes  
Skin form — Components tab — General — Modal dialogs Skin form: column layouts Skin form — Components tab — Controls — Autocomplete  
Skin form — Components tab — General — Overlays grids links  
Skin form — Components tab — General — Wizard Skin form — Components tab — Repeat-row/columns buttons  
Skin form Components tab General Errors Skin form — Components tab — Layouts — Legacy layouts Skin form — Components tab — Controls — Smart tip and Smart info  
Skin rule Custom   Skin form — Components tab — Controls — Menus  
    Skin form — Components tab — Controls — Split/menu button  
    Skin form — Components tab — Controls — Rich Text Editor  
    Skin form — Components tab — Controls — Charts  
Skin form — Components tab — Controls — Multi Select

  • General components styles

    Learn about the presentation of general components in custom style formats.

  • Component styles for layouts

    Learn about the presentation of layouts in custom style formats.

  • Component styles for controls

    Learn about the presentation of controls in custom style formats.

  • Component styles for reports

    Learn about the presentation of reports in custom style formats.

  • Skin rules

    Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentati

  • Creating a skin

    Create a skin to specify the presentation aspects of your application.

  • Accessing a skin

    Skin rules are part of the User Inteface category. A skin rule is an instance of the Rule-PortalSkin Rule- classes Rule-PortalSkin rule type.

  • Specifying a skin for your application

    The best practice is to associate a single skin with your application.

  • Upgrading a pre-7.1 skin

    You can upgrade a pre-7.1 skin.

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.