====== Questionnaire Layout ======

The final appearance of your survey depends on the chosen layout (graphic design).  In the section layout you can adjust color, font, font size, available width etc.. You can adjust the layout in the menu item **Questionnaire Layout**.

SoSci Survey contents a set of layout templates at choice. You can also create your own layout (e.g. in line with the company CI or the university homepage) -- indeed you will need some basic knowledge in web design (HTML,CSS) for this.

  * If you have created or activated multiple layouts, one will be selected as //default//. This will be used in questionnaires unless you select another one in the questionnaire's //settings//. To change the default, select the button left of the layout and click //Set selected layout as default//.
  * If using multiple layouts in the survey, select **Compose Questionnaire**, tab //Settings// to select a specific layout for this questionnaire. Mind the //OK// button.
  * You may need a different layout for a single page in the questionnaire -- to present a stimulus, for example. Use the PHP function ''[[:en:create:functions:option|option('layout', ...)]]'' for this purpose. There is a layout template "SoSci Stimulus Presenter" to present a stimulus without all the surrounding questionnaire stuff.


===== Using Layout Templates =====

In the Menu item **Questionnaire Layout** you can find some //Layout Templates//. You have to click //Activate// at the desired layout to use it. Afterwards the layout will be listed above and you are able to change it as the case may be.

===== Simple Customization =====

If you haven't created or activated a layout yet, SoSci Survey will use a plain, decent layout in blue and white with a width of 600 pixels. If you want to adapt color or width of the standard layout, you have to copy the standard layout:

  * Choose the menu item **Questionnaire Layout**
  * Click on **Create new layout** to make a copy of the standard layout.
  * Fill in the //ID// (e.g. "pink") and a //comment// (e.g. "standard layout in pink") and make the desired changes afterwards. Remember to save!
  * With the next call of **Questionnaire Layout** the new layout will appear in the list above and you will be able to choose and edit it.

To edit the default layout or an other layout you have to click on the edit button ({{:button.edit.gif?nolink|edit layout}}) in the list of active layouts (at the very top of **Questionnaire Layout**).

  * Modify the color by entering the specific 6-digit color code. You can identify this code by using the //Color Calculator// (simply click on the color) or read it out in the graphics software of your choice.
  * Modify the width by adjusting the //layout base width// of the layout.
  * If you like to change the font, please notice that only a few fonts are performing in almost all browsers (e.g. Arial, Verdana, Times New Roman und Courier New, see [[http://www.w3schools.com/cssref/css_websafe_fonts.asp|Web Safe Font Combinations]]). Therefore several fonts are mentioned here separated by commas -- and each time at last a generic declaration like (''serif'' or ''sans-serif'', see [[http://www.w3schools.com/cssref/pr_font_font-family.asp|CSS font-family Property]]).
  * For //Selected Push Button//, select a different design for the fields that are displayed for simple choice questions and multiple choices, if necessary (see also [[:en:create:layout-inputs]]).
  * Save the layout by pressing the //OK// button.
  * You're going to see the appearance of the layout below after saving.

===== Advanced Customization =====

Almost every single element of the survey can be adapted in the different tabs. Beyond colors basic knowledge of CSS ([[http://www.w3schools.com/cssref/default.asp|CSS Reference]]) could be helpful.

To access the centrally predefined colors in the CSS- style definitions the variables ''%color.1%'' to ''%color.8%'' are available. The numeration simply results from the chronological order of the colors in the color scheme tab. ''%color.2%'' for example stands for the warning color defined in the color scheme.

===== Full Customization =====

The underlying HTML code for the //layout// can be adjusted or totally regenerated in the //HTML template// tab. In this respect, the following factors should be taken into consideration:

  * The DOCTYPE should be HTML4 and so the HTML version used by SoSci Survey for questions.
  * At the beginning of the header ''<head>'' you should place the placeholder ''%head%'' -- SoSci Survey will integrate the CSS code for the layout and other necessary codes at this place. 
  * In the content of the survey ''<body>'' the placeholder ''%questionnaire%'' has to appear (the content of the respective survey page will be integrated at this place), the placeholder ''%logo%'', ''%progress%'' and ''%imprint%'' should be placed likewise in a suitable location.

The following placeholders are available for your layout:

^Placeholder^Function^
|''%questionnaire%''|Placeholder for the actually content of your survey|
|''%imprint%''|Placeholder for the imprint defined in the survey project|
|''%logo%''|Placeholder for a logo, which can be adapted in the survey project|
|''%progress%''|Placeholder for the progress bar|
|''%color.1%'' to ''%color.8%''|Colors of the color scheme|
|''%width%'', ''%width-80%''|The baseline width (pixel, ''px'') adjusted for the layout. If there is entered a plus (''+'') or minus (''-'') behind the ''width'', the placeholder represents the baseline width plus/less this value.|
|''%button.next%''|Placeholder for the ''next'' button. If this placeholder isn't used, the button will be placed at ''%button.submit%'' automatically.|
|''%button.back%''|Placeholder for the ''back'' button. If this placeholder isn't used, the button will be placed at ''%button.submit%'' automatically.|
|''%button.submit%''|Placeholder for ''next'' and ''back'' buttons. If this placeholder isn't used, the buttons will be placed below the survey automatically.|
|''%button.break%''|Button to interrupt the interview. This button has to be activated separately in the survey settings. If this placeholder isn't used, the button will be placed at ''%button.control%''.|
|''%button.leave%''|Button to cancel and delete the interview. This button has to be activated separately in the survey settings. If this placeholder isn't used, the button will be placed at ''%button.control%''.|
|''%button.language%''|Buttons to change the language settings. These buttons are only available in multilingual surveys and have to be activated separately in the survey settings. If this placeholder isn't used, the buttons will be placed at ''%button.control%''.|
|''%button.screenreader%''|Button to leave the accessible screen reader mode if it has been activated. If this placeholder isn't used, the button will be placed at ''%button.control%''.|
|''%button.control%''|Placeholder for the control buttons (see above), if this placeholder isn't used, the buttons will be placed below the survey.|