Differences

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

--- en:create:layout [11.08.2014 11:10] – 825415.uni-wuppertal
+++ en:create:layout [16.01.2015 11:11] – [Survey layout] Update admin
@@ Line 1: / Line 1: @@
 ====== Survey layout ======
-The final appearance of your survey depends on the chosen //survey layout//.  In the section layout you can adjust colour, font, font size, available width etc.. You can adjust the layout in the menu- item **survey layouts**.
+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**.
-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.
+  * 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.
-**Please note:** If you create and activate more than one layout design, the layout selected by default will be the one tagged as //standard layout//. If you want to use an other layout for a single survey, you can select this in the menu item **assemble survey** ->  //option// tab. Don’t forget to save!
 ===== Using layout templates =====
-In the Menu item **survey 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 in the section //survey layouts// 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 =====
-If you haven't created or activated a layout yet, SoSci survey will use a plain layout in blue and white with a width of 600 pixels. If you want to adapt colour 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:
-  * Choose the menu item **survey layouts**
+  * Choose the menu item **Questionnaire Layout**
   * Click on **Create new layout** to make a copy of the standard layout.
-  * Fill in the //name// (e.g. 'default') and a //description// (e.g. 'standard layout in pink') and make the desired changes afterwards. Don’t forget to save!
+  * 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 **survey layouts** the new layout will appear in the list above and you will be able to choose and edit it.
+  * 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 standard layout or an other layout you have to click on the considering layout in the schedule of active layouts (at the very top of **survey layouts**) ({{:button.edit.gif?nolink|edit layout}}.
-  * Modify the colour by entering the specific 6-digit colour code. You can identify this code by using the //colour calculator// (simply click on the colour) or read it out in the graphics software of your choice.
+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 width by adjusting the //baseline width// of the 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.
-  * 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.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|dissemination of fonts in www]]). Therefore several fonts are mentioned here separated by commas -- and each time at last an abstract declaration like (''serif'' or ''sans-serif'', see [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]).
+  * Modify the width by adjusting the //layout base width// of the layout.
-  * Save the layout pressing the //OK// button.
+  * 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]]).
+  * 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 of layout. Beyond colours basic knowledge of CSS ([[http://de.selfhtml.org/css/eigenschaften/index.htm|SelfHTML: CSS-Properties]]) 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.
-To access the centrally predefined colours in the CSS- style definitions the variables ''%color.1%'' to ''%color.8%'' are available. The numeration simply results from the chronological order of the colours in the colour scheme tab.  ''%color.2%'' for example stands for the warning colour defined in the colour 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 =====
@@ Line 40: / Line 42: @@
   * 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 for example the CSS code for the layout at this place.
+  * 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.
+  * 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:
@@ Line 50: / Line 52: @@
 |''%logo%''|Placeholder for a logo, which can be adapted in the survey project|
 |''%progress%''|Placeholder for the progress bar|
-|''%color.1%'' to ''%color.8%''|Colours of the colour scheme|
+|''%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.|