The appearance of a portal or form is controlled by the style settings in a skin rule. This rule defines the presentation of the content layer, including typography, borders, backgrounds, layouts, and user interface placement and alignment. In most cases, the autogenerated Cascading Style Sheets (CSS) styles set in the skin can meet your design requirements. In situations where you want to present a look and feel that would be difficult to configure by using component styles and mixins, you can add your own CSS files for customization.

You define custom style sheets in text file records that contain your CSS. Like a skin’s CSS styles, the system applies style sheets to the entire content layer.

Adding a style sheet to the skin

Assume that you want to apply a visual filter progid: DXImageTransform.Microsoft.Alpha(Opacity=60)to disabled buttons. You must create a text file record that contains your custom CSS and add it to your application skin rule.

1. Click the Included styles tab on your application skin rule.
2. In the Additional style sheets area, click the Add style sheets link to create a row and enter the name of the new style sheet. In this example, the name is disabled_button.
   
    Style sheet name added to the Additional style sheets area on the skin rule

3. Click the magnifying glass icon at the end of the row to open the Create Text File form.

4. Keep the default values App Name webwb and File Type CSS, and create the record.

   
   The Create Text File form for the new style sheet

5. On the Main tab of the text file form, click Upload File to open the Upload File modal dialog box.

6. Browse for the CSS file that you created for disabled buttons.​

   
   CSS file in the Upload File modal dialog box

7. Click Upload File on the modal dialog box. The CSS is shown in the File source area:

   
   CSS in the File Source area on the text file record

8. Save the text file and the skin rule.

Test your custom style

To see how the new style looks in the interface, do the following steps:

1. Open the user form and locate a button control with the Live UI tool.
   
   Sample button control selected for testing the style sheet
2. Click the Gear to open the properties panel for the button.
3. Select Always in the Disable list.
   
   Button disabled to test style sheet
4. Refresh the screen. The button is displayed in the style that you added.
   
   Sample button control after the style sheet has been applied