[[Questionnaire Layout]]
You are here: start » Overview » Creating and Designing the Questionnaire » Questionnaire Layout
 
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:create:layout [16.01.2015 11:11] – [Survey layout] Update adminen:create:layout [10.03.2022 07:57] (current) – admin
Line 1: Line 1:
-====== Survey layout ======+====== Questionnaire Layout ======
  
-The final appearance of your survey depends on the chosen //survey layout//.  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**.+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. 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.
Line 10: Line 10:
  
  
-===== Using layout templates =====+===== 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. 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 =====+===== 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: 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:
Line 28: Line 28:
   * Modify the width by adjusting the //layout base width// of the layout.   * 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]]).   * 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.   * Save the layout by pressing the //OK// button.
   * You're going to see the appearance of the layout below after saving.   * You're going to see the appearance of the layout below after saving.
  
-===== Advanced customization =====+===== 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. 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.
Line 37: Line 38:
 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. 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.
  
-===== Entire customization =====+===== 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 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:
en/create/layout.1421403087.txt.gz · Last modified: 16.01.2015 11:11 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki