Survey Settings (Style)

Survey Settings (Style)
(Style Tab)

The Survey Settings dialog (accessed by clicking

or by clicking Compose | Survey Settings...) lets you specify settings that apply to all questions within your questionnaire. It has eight tabs:

   Style
   General Format
   Page Format
   Headers and Footers
   Progress Bar
   Browser Settings
   Error Messages
   Server Settings
   Advanced

The Style tab on the Survey Settings dialog lets you select different Styles (implemented using Cascading Style Sheets, or 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.

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. If you want to modify an aspect of the style that applies to all questions in the survey, you can do so on the Page Format tab via the Paintbrush

icons. If you want to modify an aspect of the style just for a specific question, you can do that by editing the question and using the Paintbrush

icons.

To use a style, highlight the style you wish to use within the Style tab of the Survey 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, select the desired style and then click the Use Selected button. To discontinue using styles, click No Style.

Using Styles

From the Compose | Survey 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 toward the bottom of the list. Duplicate style names are not allowed.

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.

How Styles Work

Overview
CSS Basics
SSI Web HTML "Hooks" for CSS
Modify an Existing Style
Create Your Own Style

Overview
By default, the style settings throughout SSI Web are empty. For instance if you create a new question and click the Paintbrush icon

for Header 1 there is no font size specified. If no font size is specified at the question level, the font size specified at a higher level is used.

SSI Web uses CSS (Cascading Style Sheets) to control the style in surveys. CSS features cascading levels of priority. A font size can be specified for all text in a survey or for a particular question. A font size defined for a particular question overrides the font size defined at the study level.

The diagram below helps illustrate how CSS is used in SSI Web, demonstrating the different levels of Style priority. Styles defined at the question level in SSI Web override styles defined in the survey style. Styles defined in the survey style override styles defined in the base style sheet ssi_style.css.

CSS Basics

CSS stands for Cascading Style Sheets. CSS allows you to modify the style (background color, font style, spacing, etc.) of the HTML for web pages. CSS allows you to separate the style from the structure of a web page.

CSS can be defined within the HTML elements. For example:

Please answer the questions below.

</p>

The CSS "color: green;" changes the text color within the <p> tag to green. This style can be separated from the <p> tag. The following instructions:

{

color: green;

}

</style>

<p>

Please answer the questions below.

</p>

change all of the text within <p> tags on page to green.

Suppose that you have multiple web pages and you want the text inside all <p> tags for all pages to be green. You can create a separate text file named "mystyle.css" that includes the following CSS:

{

color: green;

}

At the top of each web page inside of the <head> tag you would then include:

This controls the style for all web pages from one file. To change the color from green to blue you would simply edit mystyle.css. Using CSS in this way makes changing the style across your web pages much easier than defining the style on each individual page. Styles defined in an external file have lower priority than styles defined within a <style> tag on the web page. Styles defined within the HTML inside of a "style" attribute have a higher priority than styles defined within the <style> tag.

CSS consists of various style "rules" that define how to modify the appearance of the HTML. In the CSS rule below the "p" is the selector and the "color: green" is the declaration.

{

color: green;

}

The selector identifies which part of the HTML will be affected by the declaration. The declaration consists of a property and a value separated by a colon. Multiple declarations are separated by semicolons. For example:

{

color: green;

font-size: 18px;

padding: 10px;

}

The selector can be the name of any HTML element. For example: p, div, span, table, tr, td, etc. Multiple elements can be added to the rule separated by commas. For example:

div, p, td

{

color: green;

}

The CSS above changes text within <div>, <p>, and <td> tags to green. You can also specify that only <p> tags within <div> tags should be selected:

div p

{

color: green; /*Turn the text green*/

}

Notice that there is a space separating "div" from "p". This indicates that only <p> tags within <div> tags are affected. Also notice the comment "Turn the text green." CSS comments are contained between /* and */. Any text between /* and */ will not affect the CSS.

A Class Selector is a way that you can identify specific HTML elements. Suppose you have the following HTML:

How old are you?

</div>

The <div> above has an attribute named "class" with a value of "header1". You identify a class in CSS by placing a "." in front of its name. For example

.header1

{

color: green;

}

The CSS above makes the text within tags with the "header1" class be green. SSI Web uses class selectors heavily. Classes are designed to identify one or more elements on the web page. If there is a unique element identified with an "id" then a "#" sign is used instead of a ".". For example:

How old are you?

</div>

The following CSS could be used to select this <div>:

#Q1_div

{

color: green;

}

SSI Web includes many classes and IDs within the HTML that it creates to help you identify specific areas of the page. You can then use these "class" and "id" names within your CSS.

More information on CSS can be found at http://www.w3schools.com/css.

SSI Web HTML "Hooks" for CSS

SSI Web generates the HTML for your survey based on the different question types and settings you configure in the software. The HTML contains "class" and "id" attributes in many of its tags. For example the HTML for Header 1 looks like this:

<div class="header1"> Header 1 Text </div>

The "class" attribute in the <div> tag above identifies Header 1. The following CSS can then be used to change the Header 1 text color throughout the whole survey:

.header1

{

color: green;

}

The diagram below shows some of the main classes present in SSI Web's HTML.

csshooks

Additional classes and ids can be examined by viewing SSI Web's HTML. This can be done using "View Source" in your web browser.

Some HTML elements in SSI Web contain multiple classes and an id. Various ways have been provided to allow the CSS to manipulate the presentation or style of the survey. The HTML for a select question named "Q1" looks like this:

...

</div>

Notice that two classes "question" and "select" have been assigned to this <div> tag.

The following CSS changes the Header 1 style for Q1. No other questions are affected.

#Q1_div .header1

{

color: blue;

}

The # sign above identifies the HTML tag with the "Q1_div" id. After "#Q1_div" there is a space and then ".header1". This CSS rule changes the text for Header 1 to blue inside question Q1. The following draws a black border around all questions:

.question

{

border: 1px solid black;

}

The following changes the border only for Select questions to green:

.select

{

border: 1px solid green;

}

Modify the Look of an Existing Style

To modify an existing System Style, from the Style tab click the

icon. 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 and asks you to rename it (so that there aren't duplicate names for styles).

As an example, let's say that you want to change the background color of the charcoal style to green. First, from the Style tab, click the

icon and browse to the System Styles folder (C:\Program Files\Sawtooth Software\SSI Web\Styles) and select charcoal from the list. Click OK, and you are prompted to change the name so that there aren't duplicate style names. Specify greencharcoal as the new style, and SSI Web renames the style and copies it into your User Styles folder:

C:\Users\<user>\Documents\Sawtooth Software\SSI Web\Styles

Next, you modify the contents of the greencharcoal.css file to modify the style. To change the background color to green, open the greencharcoal.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 a maximum of 500 x 375 pixels) in the greencharcoal folder as preview.jpg.

Next, highlight the greencharcoal style in your style list and click Use Selected. The greencharcoal style folder with its .css file are copied into your study folder, within the graphics directory. Now, when you preview your study you will see the green background.

If you need to continue to make modifications to your customized .css file, you should recognize that when you click Use Selected, the .css file being used is now within your study folder. You should continue to make changes there if you want to see the changes reflected in the current study. If you want to use your modified style in the future for other studies, you should copy the .css file from your study directory back into your User Styles folder.

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 the Style tab and Style Library, clicking the

icon 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 500 x 375 pixels.