Creating skins
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.
In the header of Dev Studio, click
.In the Label field, enter a meaningful name for the skin.
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.
Specify the context for the skin record.
Click Create and open.
On the Base settings tab, in the Overall font field, define the default font for the application.
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.
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.Click Save.
- 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.
Previous topic Best practices for styling your application Next topic Configuring skin base settings manually