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.

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

  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Skin.
  3. Open the skin that you want to edit.
  4. If your skin uses inheritance, in the Base settings tab, clear the Inherit from parent check box.
  5. 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.
    1. In the Typeface setting section, define the font that the application uses for UI elements whose styling is not defined in the skin.
    2. In the Base heading tag styles section, define the styling for headings in the application by clicking the Heading arrow and selecting a mixin.
    3. In the Background section, define the appearance of the background in the application by selecting a mixin or by specifying the formatting manually.
    4. In the Layout section, define padding for the application.
  6. Optional: To add CSS-based formatting to UI components, perform the following actions:
    1. In the Typeface setting or Background sections, expand the Additional styles node.
    2. 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 blue.
  7. Click Save.