Define Custom Draw Styles

You can define a number of custom draw styles for a theme. Their purpose is to provide draw style options which are not provided by the basic theme. That is, they are additional draw styles to those automatically provided. When designing a component's UI, you will apply these custom draw styles to specific visual controls.

You should give each custom draw style a name which suggests its possible use. Remember that a number of draw styles already exist for a basic theme. Your custom draw styles could replace these with a new definition, for example: Title, Heading1, Heading2, Strong, Emphasis, Highlight, LightTitle and DarkTitle or they can be new custom draw styles with other names.

To illustrate how custom draw styles are defined, the following steps create a custom draw style called SpecialError. (It will not be needed in the generated mobile web application).

1.   Select the Draw Styles tab:

2.   To define a draw style, click New Draw Style. The name will change to DrawStyle1:

3.     Click the text DrawStyle1 and replace it with SpecialError:

4.     Click the SpecialError draw style to select it. On the Style ribbon, change font units to % and enter 150 into font size. Select a font weight of Bold:

 

5.   Hover the cursor over the SpecialError draw style and click the edit icon .

        You will now see the Details tab and the Source tab :

        Note: When you define the characteristics for each draw style, such as FontSize, a style is defined with the next available name, in the form Style1, Style2, Style3 etc. We recommend you rename these styles appropriately, making future maintenance much easier.

6.     In the components dropdown on the Details tab, select Style1.

 

7.     Change the Name to SpecialErrorStyle:

8.     On the Theme ribbon, click Text color, expand the dropdown and select Theme colors. Click MediumError to set the text color for SpecialError.

9.     On the Theme ribbon, click Fill color, expand the dropdown, select Theme and click Light Error to set the background color for SpecialError.

        Your design should look like the following:

10.   Hover the cursor over the SpecialError image and click the Hand icon to open the Source tab and Details tab:

        You have defined Brush1 for foreground color and Brush2 for background color. These extend the definition of Style SpecialErrorStyle.

11.   On the Details tab select Brush1 and change the Name to SpecialErrorForeground and change Brush2 Name to SpecialErrorBackground.