LinkedIn
Copied!

Table of Contents

Creating skins

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

Build a vivid interface that matches the branding requirements of your business with less effort. By keeping all presentation settings in the skin, you can define a single source of styling information for your application, and ensure a consistent interface that is convenient to update and maintain.

  1. In the header of Dev Studio, click Create User Interface Skin .

  2. In the Label field, enter a meaningful name for the skin.

  3. Define the skin's inheritance:

    • To inherit settings from a different skin, select the Inherit component formats and mixins from an existing skin check box, and then enter the skin name.
    • To prevent the skin from inheriting settings, clear the Inherit component formats and mixins from an existing skin check box.
  4. Specify the context for the skin record.

  5. Click Create and open.

  6. On the Base settings tab, in the Overall font field, define the default font for the application.

  7. Define the general formatting for the application:

    • If your skin uses inheritance and you want to import general styles from the parent skin, ensure that the Inherit from parent check box is selected.
    • If your skin does not use inheritance or if you want to override the parent formatting, configure the styles manually.

      For more information, see Configuring skin base settings manually.

  8. On the Included styles tab, select the check boxes representing the UI components whose formatting you want to define in the skin.

    You can also us the Support presets field to select one of the standard sets of components.
  9. Click Save.

Define style formats and mixins for your skin. For more information, see Component style formats and Mixins.
  • Configuring skin base settings manually

    Use custom skin settings to quickly define the general appearance of your application, including font formats, backgrounds, and padding. You can configure settings that are entirely custom, or if your skin uses inheritance, import some settings from the parent, but override others.

  • Optimizing skins

    Improve the performance of your application in browsers by optimizing skin rules. Skin rules create the CSS for your application, and when you reduce their size and complexity, the application can download and process the CSS file more efficiently.

Did you find this content helpful?

Have a question? Get answers now.

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