Skin designer

The skin designer allows you to create or edit "skins", which define the appearance of the interviewing screen. At present, skins affect the look and feel of response items (including the appearance of radio buttons and check boxes).

To open the skin designer settings, in the options menu select skin designer.

skin_designer

The left-hand pane displays a list of available skins. Click a skin to view or edit its details in the right-hand pane. The preview on the right displays the appearance of the screen items, according to the settings you have selected. The items in the preview respond to mouse movement and clicks, so you can view what happens when the mouse is used in conjuction with the screen items.

You can edit the following details for a skin:

Skin name

The skin name (this helps you identify the skin when selecting it in the Internet Options dialog.

Single

Sets the appearance of response items in single-coded questions. You can customize a response item's appearance for each of its various states:

  • ON - the appearance of the item when it is selected by the respondent or agent

  • OFF - the appearance of the item when it has not been selected by the respondent or agent

  • OVER - the appearance of the item when the mouse pointer is over it (but the mouse button is not currently pressed)

  • PRESS - the appearance of the item when it is being clicked

For each state, you can specify an image: select the check-box, then click select a picture and specify the image file you want to use. You can also edit the CSS code associate with the item to further change its appearance. To do so, click edit CSS style. This allows you to edit the font face, size and style, the text color, text background color, and mouse cursor when the pointer moves over the item. You can also set whether the text is drawn right-to-left for right-to-left languages.

Multi coded

Sets the appearance of response items in multi-coded questions. You can customize a response item's appearance for each of its various states:

  • ON - the appearance of the item when it is selected by the respondent or agent

  • OFF - the appearance of the item when it has not been selected by the respondent or agent

  • OVER - the appearance of the item when the mouse pointer is over it (but the mouse button is not currently pressed)

  • PRESS - the appearance of the item when it is being clicked

For each state, you can specify an image: select the check-box, then click select a picture and specify the image file you want to use. You can also edit the CSS code associate with the item to further change its appearance. To do so, click edit CSS style. This allows you to edit the font face, size and style, the text color, text background color, and mouse cursor when the pointer moves over the item. You can also set whether the text is drawn right-to-left for right-to-left languages.

 

 

 

 

The following buttons are available:

skin_add

Create a new skin.

skin_delet

Delete the selected skin.

Note: If the option backup skin before deletion (see below) is set to true, the skin will be backed up as a zip file in the skins directory.

skin_settings

Open the settings dialog. See below for a description of the available options.

 

Settings

The settings dialog allows you to change the following options.

Path of 'scripts' folder

Determines the path of the 'scripts' folder, where skins are located.

Backup skin before deletion

If this option is set to true, any skins you delete will be backed up automatically, as zip files, in the skins directory.

Same CSS for single and multi-coded

If this option is set to true, the same CSS classes will be used for single and multi-coded questions (i.e. the appearance of the two question types will be the same).

 

Note: to apply the skin to one of your surveys, in the options menu select Internet Options, click the Javascript tab, and select the skin in skin name.

To use a skin on Webprod too, you must copy the folder created for the skin (usually in C:Program FilesAskiaScriptsSKINS, but it depends on the settings in the skin designer - see above) to the SKIN folder of the Webprod.
Create your own Knowledge Base