Understanding Skins and Themes

A widget’s appearance is defined by the skin that is applied to it. Every widget has a skin, even if it’s just the Volt MX Iris default skin. Skins give you the ability to establish visual continuity in your app. For instance, you may want all buttons in your app to use the same skin. Skins can also be applied depending on the state of a widget—for instance, when it’s at rest, receives focus, or is pressed. Several visual settings comprise a skin, such as the widget background color and opacity; the widget border color, opacity, size, and shape; the widget shadow settings; and in the case of certain widgets, font type, size, color, opacity, and shadow.

You can apply and manipulate skins in many different ways to meet your design needs, including editing, duplicating, copying and pasting, and forking. And by grouping skins together, you can create a theme that you can apply to widgets across the entire application.

You interact with widgets in two primary ways: on the widget level, using the Skins tab of an individual widget, and on a global level, using the Skins tab on the Project Explorer, where the skins of all widgets are listed.

Volt MX Iris also provides a default theme that has a set of skins defined for all the widgets within an application. The skins in this theme can be applied to widgets to get a different look and feel for the widgets. Themes are accessed from the Skins tab of the Project Explorer.

The following topics describe how to work with skins and themes:

Copy and Paste a Color or Gradient

Using Themes - Applying a Collection of Skins as a Group

Use Default Skins

The default skins allow you to specify common skins for widgets in states like Normal and Focus. Normal state is the default look of the widget, and Focus state occurs when the user touches or clicks the widget in the application. With Volt MX Iris default skins, you can provide a uniform look and feel for the widgets across various platforms.

For example, if you specify btnSkinNormal as the Normal skin for Button in Themes, all the buttons in the application will use btnSkinNormal as the Normal Skin for buttons.

Though the Application themes define a common skin for a particular widget across the application, you can still specify a different skin for a widget by selecting a different skin under the widget properties.

To view the default skins navigate to Project Explorer and click the Skins tab.

Click on a widget to view the default forms.

Create a New Skin

You can create as many skins in Volt MX Iris as you want so that you can achieve the balance between continuity and flexibility that your app design needs.

To create a new skin, do the following:

On the Project Explorer, click the Skins tab.
On the Skins tab, locate the type of widget that you want to create the new skin for, such as a Button, and then click that widget type’s context menu arrow .
From the menu, click New Skin, and then click the type of new skin you want to create. Many widget types offer just the standard Skin, while others also offer a Focus Skin, or some variation.

Your new skin is created and is ready for you to configure.

Configure a New Skin

Now that you have created a new skin, you need to configure its various properties with the look that you want. Here’s what you can do:

Rename the Skin

Set the Skin Background

Set the Skin Border

Set Individual Corners in Borders

Set the Skin Shadow

Set the Skin Font

Set the Skin Font Shadow

Rename the Skin

When you create a new skin, Volt MX Iris generates a unique name for it. And while you're welcome to keep the name that Volt MX Iris generates, you might find it more useful and easily recognizable if you rename it. You can rename widgets in two primary ways: using the Skins tab of an individual widget, and using the Skins tab on the Project Explorer, where the skins of all widgets are listed.

To rename a skin using the Skins tab on the Project Explorer, do the following:

On the Project Explorer, click the Skins tab.
On the Skins tab, locate the type of widget that the skin you want to rename is categorized under. If the skins currently don't appear under the type of widget, click the widget type to open the category and display the skins.
From the list of skins, hover over the skin you want to rename and click its context menu arrow to open the skin's context menu.
From the skin's context menu, click Rename.
Type a new name for the skin, and then press Enter.

To rename a skin using the Skins tab of an individual widget, do the following:

On the Iris Canvas, locate a widget that's using the skin you want to rename, and then select it.
in the Properties Editor, click the Skins tab.
In the Name text box, type a new name for the skin, and then press Enter.

Set the Skin Background

Volt MX Iris gives you a variety of ways to configure the background of a skin, which are described in the following table.

Note: Not all background options are available for all widgets.

Background Type	Description
Single Color	Applies a uniform, single color as the background of the skin that you choose.
Two Step Gradient	Applies two equally-applied colors as the background of the skin that you choose.
Image	Applies an image of your choosing as the background of the skin. The image stretches to fill the dimensions of whatever widget the skin is applied to.
Multi Step Gradient	Applies two or more colors as the background of the skin that you choose. A color can take up whatever percentage of the background you want. You can also adjust the opacity of each color, and you can change the orientation of the colors on a 360 degree axis.

To set the skin background, do the following:

On the Iris Canvas, locate a widget that's using the skin you want to change the background for, and then select it.
On the Properties pane of the widget, click the Skins tab.

Click the state that you want the background to apply to, as follows:

State	Description
Normal	Refers to the state the widget is in when it is at rest and not being engaged by the user.
Focus	Refers to the state of the widget in instances when it is tabbed to or hovered over. This state is not available for all widgets.
Blocked UI	Refers to the state of the widget when it is still visible to the user but is inactive. Designers customarily give a faded background to a Blocked UI to indicate to the user that it isn't currently available, such as a Sign In button being faded because the User Name and Password fields are empty. This state is not available for all widgets.
Pressed	Refers to the state of the widget when it is being pressed. For example, changing the background as a button widget is being pressed provides visual feedback to the user that the button is working and that they successfully pressed the button. This state is not available for all widgets.

In the Background section of the Skins tab, click the Type drop-down list and select the type of background you want. Instructions for how to configure each type are found in the following sub procedures.

Single Color

Click the square color icon to open the Color Palette window.
To select a particular hue, on the vertical color bar drag the two opposing arrows to the hue you want, and then change the hue’s lightness, darkness, and saturation by dragging to the desired location on the large color square. You can also assign a color by changing the RGB values, the HSB values, or pasting a hexadecimal value from another program into the # text box. To close the Color Palette window, click anywhere outside of it.
By default, the opacity is set to 100, making the background completely opaque with no transparency. However, if you want the background to have a degree of transparency, you can decrease its opacity. To do so, type a value between 0 and 100 in the Opacity text box, or drag the opacity slider to the degree of opacity that you want.

Two Step Gradient

Click the color preview bar to open the Two-Step Gradient Editor.
Click the left gradient icon.
Click the square of color next to Color to open the Color Palette window.
To select a particular hue, on the vertical color bar drag the two opposing arrows to the hue you want, and then change the hue’s lightness, darkness, and saturation by dragging to the desired location on the large color square. You can also assign a color by changing the RGB values, the HSB values, or pasting a hexadecimal value from another program into the # text box. To close the Color Palette window, click anywhere outside of it.
By default, the opacity is set to 100, making the background completely opaque with no transparency. However, if you want the background to have a degree of transparency, you can decrease its opacity. To do so, type a value between 0 and 100 in the Opacity text box, or click the arrow just to the right of the text box to display the opacity slider, and then drag the opacity slider to the degree of opacity that you want.
Click the right gradient icon, and then repeat steps 3 through 5 for the right gradient step.
When you have completed configuring the colors and their opacity, click Apply.

Image

Copy the images you want to use to the following path in your workspace:
<Workspace Name>\<App Name>\resources\common
On the Project Explorer, click the Assets tab, and then click the Refresh button to bind any newly added images to the project.
On the Skins tab of the widget you are changing the background for, in the Background section, click the Type drop-down list and select Image.
Click Choose Image. The Background Image dialog box displays.
From the Background Image dialog box, select the platforms you want to use the background image for. The image you select for the Default platform option is used if you don't specify a custom image for a specific platform.
For each platform option you selected, click its corresponding Value field. Doing so brings up the Select Image dialog box. Click the image you want to use, and then click OK, and then click OK again.

The image you selected displays as the background, and stretches to fill the dimensions of whatever widget the skin is applied to. The file name of the image is also listed as the image being used in the Background section of the Skin tab in the Properties Editor.

Multi-Step Gradient

Click the color preview bar to open the Multi-Step Gradient Editor.
Click one of the gradient step icons .
Click the square of color next to Color to open the Color Palette window.
To select a particular hue, on the vertical color bar drag the two opposing arrows to the hue you want, and then change the hue’s lightness, darkness, and saturation by dragging to the desired location on the large color square. You can also assign a color by changing the RGB values, the HSB values, or pasting a hexadecimal value from another program into the # text box. To close the Color Palette window, click anywhere outside of it.
By default, the opacity is set to 100, making the background completely opaque with no transparency. However, if you want the background to have a degree of transparency, you can decrease its opacity. To do so, type a value between 0 and 100 in the Opacity text box, or click the arrow just to the right of the text box to display the opacity slider, and then drag the opacity slider to the degree of opacity that you want.
Repeat steps 3 through 5 for the other gradient steps.
Add additional gradient steps by clicking anywhere just below the color bar, and you can delete a step by selecting it and then clicking Delete.
Change the portion of the background that the gradient color affects by dragging its gradient step icon to a different position on the color bar.
Change the orientation of the colors by trying out the Angle options, and then press Enter to apply the change. The available orientations are as follows:

Angle	Description
To top ↑	Orients the bottom color to be the topmost color.
To right →	Orients the bottom color to be the rightmost color.
To bottom ↓	Orients the bottom color to be the bottommost color.
To left ←	Orients the bottom color to be the leftmost color.
Custom	Orients the bottom color to the degree you specify in the numeric field that appears, along a 360 degree axis. For example, 225 orients the bottom color half way between the bottom angle (180), and the left angle (270).

When you have completed configuring the colors and their opacity, click Apply.

Set the Skin Border

The Border properties on the Skins tab become activated when the border width is greater than 0. Upon setting the border size to 1 or greater, the other border properties become editable. For the border color you can pick a single color or a multi-step gradient. And you can change its opacity.

Configuring the skin border for an SPA environment is slightly different. For more information, see SPA Borders.

To configure the skin border, do the following:

In the Border section of the Skins tab, set the Size property to at least 1 pixel by either entering a number in the Px text box, or by moving the Size slider to the desired position.
In the Border section of the Skins tab, click the Type drop-down list and select the type of border you want, either Single Color or Multi Step Gradient. Instructions for how to configure each type are as follows:

Single Color
1. Click the square color icon to open the Color Palette window.
2. To select a particular hue, on the vertical color bar drag the two opposing arrows to the hue you want, and then change the hue’s lightness, darkness, and saturation by dragging to the desired location on the large color square. You can also assign a color by changing the RGB values, the HSB values, or pasting a hexadecimal value from another program into the # text box. To close the Color Palette window, click anywhere outside of it.
3. By default, the opacity is set to 100, making the background completely opaque with no transparency. However, if you want the background to have a degree of transparency, you can decrease its opacity. To do so, type a value between 0 and 100 in the Opacity text box, or drag the opacity slider to the degree of opacity that you want.
Multi Step Gradient
1. Click the color preview bar to open the Multi-Step Gradient Editor.
2. Click one of the gradient step icons .
3. Click the square of color next to Color to open the Color Palette window.
4. To select a particular hue, on the vertical color bar drag the two opposing arrows to the hue you want, and then change the hue’s lightness, darkness, and saturation by dragging to the desired location on the large color square. You can also assign a color by changing the RGB values, the HSB values, or pasting a hexadecimal value from another program into the # text box. To close the Color Palette window, click anywhere outside of it.
5. By default, the opacity is set to 100, making the border completely opaque with no transparency. However, if you want the border to have a degree of transparency, you can decrease its opacity. To do so, type a value between 0 and 100 in the Opacity text box, or click the arrow just to the right of the text box to display the opacity slider, and then drag the opacity slider to the degree of opacity that you want.
6. Repeat steps 3 through 5 for the other gradient steps.
7. Add additional gradient steps by clicking anywhere just below the color bar, and you can delete a step by selecting it and then clicking Delete.
8. Change the portion of the border that the gradient color affects by dragging its gradient step icon to a different position on the color bar.
9. Change the orientation of the colors by trying out the Angle options, and then press Enter to apply the change. The available orientations are as follows: