| Both sides previous revisionPrevious revision | Next revisionBoth sides next revision |
| en:create:layout [11.08.2014 11:10] – 825415.uni-wuppertal | en:create:layout [11.08.2014 11:48] – Minor optimization admin |
|---|
| ====== Survey layout ====== | ====== 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. |
| |
| **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! | **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 questionnaire, you can select this in the menu item **Compose Questionnaire** -> //Settings// tab. Remember to save! |
| |
| ===== Using layout templates ===== | ===== 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 ===== | ===== 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. | * 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}}. | 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 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. | * 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. |
| * Modify the width by adjusting the //baseline 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.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]]). | * Save the layout by pressing the //OK// button. |
| * Save the layout 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 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 ===== | ===== Entire customization ===== |
| |
| * The DOCTYPE should be HTML4 and so the HTML version used by SoSci Survey for questions. | * 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: | The following placeholders are available for your layout: |
| |''%logo%''|Placeholder for a logo, which can be adapted in the survey project| | |''%logo%''|Placeholder for a logo, which can be adapted in the survey project| |
| |''%progress%''|Placeholder for the progress bar| | |''%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.| | |''%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.next%''|Placeholder for the ''next'' button. If this placeholder isn't used, the button will be placed at ''%button.submit%'' automatically.| |
