Styles

Global Settings
(Style Tab)

The Styles tab on the Global Settings dialog lets you select different Styles (implemented via CSS) to apply to your entire survey. This dramatically changes the appearance of your survey, creating some unique and professional displays. Select from the styles currently shipping with the software (as shown in the Styles Library window), or develop and import your own styles through the Styles Library (accessed by clicking File | Styles Library...).

Please note that the style you select controls many aspects of the survey, including text formatting, fonts, and bolding. This has the benefit of controlling the entire look of your survey, without the need to modify the formatting for each question individually. But styles have a potential negative effect in overriding (and rendering inoperative) some desired question-specific settings for formatting provided through the SSI Web interface. However, you may still be able to override the style by inserting your own HTML within specific questions, or by including instructions in your CSS file that control the formatting for specific question names.

To use a style, highlight the style you wish to use within the Style tab of the Global Settings dialog. A sample graphic is shown to give you some idea regarding the look of the style. To apply the style to the study, click the Use Selected button. To discontinue using styles, click No Style.

How Styles Work

System Styles:

SSI Web comes with several built-in (system) styles. Each style is contained in its own folder bearing the style's name. By default, these style folders are located in:

C:\Program Files\Sawtooth Software\SSI Web\Styles

User Styles:

Styles that you create are located in a folder on your hard drive specified by the path set under File | SSI Web Settings. By default this path is:

C:\Documents and Settings\<user>\My Documents\Sawtooth Software\SSI Web\Styles Library

A style in SSI Web consists of a folder containing a CSS (Cascading Style Sheet) file, an optional preview.jpg file, and any additional graphics that are used by the style. The name of the folder as well as the CSS file inside this folder reflect the name of the style. The tangerine style, for example, exists in a folder named tangerine. The files tangerine.css, preview.jpg, arrow.gif, and topleftcorner.gif, are in the tangerine folder. The tangerine.css file contains the CSS code to change the look of the survey. The preview.jpg file (optional) is a graphic displaying a screenshot of the style (shown only to the study author). This graphic is displayed in SSI Web on the Style tab as a small preview of what the style will look like. The graphics arrow.gif and topleftcorner.gif are referred to in tangerine.css and are used in the style.

Using Styles

From the Write Questionnaire | Global Settings dialog, select the Style tab. A list of System Styles and any User Styles that you might have created are shown. User Styles are shown with a "user" icon

.

When you choose a style from the library and click Use Selected the appropriate style folder is copied to your study's graphics folder. Your study then uses this style to alter its formatting.

Modify the Look of an Existing Style

To modify an existing System Style, go to the Style Library (File | Styles Library...) and click Add. Browse to the system style folder (C:\Program Files\Sawtooth Software\SSI Web\Styles) and select the style you wish to modify. When you select the style folder and click OK, SSI Web copies this style folder into your User Styles folder.

As an example, let's say that you want to change the background color of the charcoal style to green. First, open the Style Library (File | Styles Library...) click Add, browse to the System Styles folder (C:\Program Files\Sawtooth Software\SSI Web\Styles) and select charcoal from the list. Click OK, and the charcoal style folder is copied to your User Styles folder:

C:\Documents and Settings\<user>\My Documents\Sawtooth Software\SSI Web\Styles Library

You probably will want to rename the style, to not confuse it with the original system file (though you can distinguish between the two due to the "user" icon

. To rename the new style, from Windows (outside the SSI Web system), browse to the folder and rename it, say, green. Also, open the green folder and change the name of charcoal.css to green.css. To change the background color to green, open the green.css file with a text editor (e.g. Notepad). At the top of the CSS file you will see:

/* Background setting for whole page, currently grey */

body

{

background-color: #DDDDCC;

}

You should change background-color: #DDDDCC; to background-color: green; (or you can directly specify the hex code for green rather than use the key word "green") and save the file. You can also change the contents of the comment contained between /* and */. You might also delete the preview.jpg since it no longer reflects the modified style. You could capture a screen shot of the modified style and save it (size the graphic to 345 x 197 pixels) in the green folder as preview.jpg.

Next, open your study and go to the Style tab under Global Settings | Style. Highlight the green style in your style list and click Use Selected. Now, when you preview your study you will see the green background.

Create Your Own Style (User Styles)

The best way to learn how to create your own style is by examining one of the existing system styles in the System Style Library that ships with SSI Web. These styles are located by default in:

C:\Program Files\Sawtooth Software\SSI Web\Styles

To create your own style, create a new folder within your User Styles area (C:\Documents and Settings\<user>\My Documents\Sawtooth Software\SSI Web\Styles Library) and give it the name of your new style. You will then need to create a CSS file with the same name as your style and place it inside the folder. For example, to create a style named red, create a folder also named red and place a file named red.css inside it. Place this folder in the User Styles path on your hard drive or import it into the Style Library by going to File | Style Library, clicking Add, and then by browsing to the red folder. Highlight the new style and click Use Selected to apply it to your study.

A graphics file named preview.jpg can optionally be placed in your newly created style folder. This file should contain a screenshot of the style and is used in SSI Web to give a small preview of what the style looks like. We recommend the graphic be sized to 345 x 197 pixels.

The CSS file contains the CSS (Cascading Style Sheets) instructions that define your style. CSS is an industry standard similar to HTML. A tutorial on CSS can be found at http://www.w3schools.com/css/.

More information on how CSS can be used to modify the look of an SSI Web study can be found below.

CSS "Hooks" for SSI Web Studies

The HTML created by SSI Web contains "class" and "id" attributes that establish hooks that your custom CSS can access. For example, each Header 1 within SSI Web has the following HTML surrounding it:

(Header 1 content here)

</div>

With this hook in place, CSS can be used to modify the look or style of each Header 1 throughout the whole study. For example:

.header1

{

font-size:16px;

font-weight:bold;

color: blue;

}

is the CSS required to change all the text in each Header 1 throughout the study to blue, 16 pixels, and bold.

CSS classes, for example <div class="header1">, are referenced by using a dot (.). So the instructions within the ".header1" section control the formatting of all of the content inside the <div class="header1"> area.

CSS ids, for example <div id="Q1">, are referenced by using a "#" sign. For example to place a blue border around the question "Q1" the following CSS would be used:

#Q1

{

border: 1px solid blue;

}

Documentation for our CSS "hooks" is given below.

Select Question

The Select question CSS "hooks" are as follows:

Numeric Question

Similar to Select Question with these additional style hooks:

<div class="numeric"> - Question type

Open-End Question

Similar to Select Question with these additional style hooks:

<div class="open_end"> - Question type

Text / HTML Filler

Similar to Select Question with these additional style hooks:

<div class="text"> - Question type

Grid Question

Same structure as Select Question with these additional style hooks:

<div class="grid"> - Question type

<div class="grid_header"> - Grid header

<div class="grid_footer"> - Grid footer

<div class="alt_color1"> - Alternating color 1

<div class="alt_color2"> - Alternating color 2

<div class="col_label"> - Column labels

<div class="row_label"> - Row labels

Free Format Question
Same structure as Select Question with these additional style hooks:

<div class="freeformat"> - Question type

Password Question

Similar to Select Question with these additional style hooks:

<div class="username_password"> - Question type

CBC Template

Similar to Select Question with these additional style hooks:

<div class="cbc"> - Question type

<div class="label_text"> - CBC attribute labels

<div class="level_text"> - CBC level text

<div class="alt_color1"> - Alternating color 1

<div class="alt_color2"> - Alternating color 2

ACA Template

Similar to Select Question with these additional style hooks:

<div class="acarat"> - ACARAT Question type

<div class="acaimp"> - ACAIMP Question type

<div class="acapar"> - ACAPAR Question type

<div class="acacal"> - ACACAL Question type

<div class="or_text"> - ACAPAR "or" text

<div class="scale_header"> - ACA scale header

<div class="scale_header"> - ACA anchor text

<div class="level_text"> - ACA level text

<div class="alt_color1"> - Alternating color 1

<div class="alt_color2"> - Alternating color 2

CVA Template

Similar to Select Question with these additional style hooks:

<div class="cva"> - Question type

<div class="label_text"> - CVA attribute labels

<div class="or_text"> - CVA Pair "or" text

<div class="anchor_text"> - CVA anchor text

<div class="alt_color1"> - Alternating color 1

<div class="alt_color2"> - Alternating color 2

MaxDiff Template

Similar to Select Question with these additional style hooks:

<div class="maxdiff"> - Question type

<div class="alt_color1"> - Alternating color 1

<div class="alt_color2"> - Alternating color 2

<div class="best_bgcolor"> - Best background color

<div class="worst_bgcolor"> - Worst background color

<div class="best_header"> - Best Header

<div class="worst_header"> - Worst Header

<div class="items_header"> - Items Header

Global Settings

<div class="main"> - DIV surrounding the page

<div class="global_header"> - The Global Page Header

<div class="global_footer"> - The Global Page Footer

<div id="submit_button"> - Submit button

<div class="progress_bar "> - Progress bar

<div class="progress_bar_color1"> - Color #1 of the progress bar

<div class="progress_bar_color2"> - Color #2 of the progress bar

<div class="progress_bar_bgcolor"> - Background color of the progress bar