Applicable to Theme Cosmos applications
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.
For example, a banking application that is designed specifically for senior citizens can
use larger default fonts, but the same overall styling as the regular application
- In the navigation pane of Dev Studio,
- Expand the User Interface category, and
then click Skin.
- Open the skin that you want to edit.
- If your skin uses inheritance, in the Base settings tab,
clear the Inherit from parent checkbox.
- Define the custom formatting for UI components:
Note: The preview on the right side of the window reflects the changes you make
to the base settings.
- In the Typeface setting section, define the font
that the application uses for UI elements whose styling is not defined
in the skin.
- In the Base heading tag styles section, define the
styling for headings in the application by clicking the
Heading arrow and selecting a mixin.
- In the Background section, define the appearance
of the background in the application by selecting a mixin or by
specifying the formatting manually.
- In the Layout section, define padding for the
- Optional: To add CSS-based formatting to UI components, perform the following
- In the Typeface setting or
Background sections, expand the
Additional styles node.
- Click Add additional styles, and then define the
CSS attribute and value pair that you want to use to format the
component.For example: To change the default font color to blue, in the Typeface
settings section, in the Attribute
field, enter color, and set the
Value field to
- Click Save.