Topic: Survey setup

CSS Editor


The CSS editor enables further optimizations to the survey layout. It allows to customize every element even more individually.

Info
All settings in the CSS editor will replace the normal settings. Our layout templates has already special settings by the CSS editor. So also partly the colors of the buttons. If you change the button color in the color choice, it will not change, because the CSS editor has a higher authority than the normal layout settings.

Here are a few examples to change settings via the CSS editor:
 

Background color of the header
 
header { background-color: #FFFFFF; }
(Copy the code and paste it in the CSS Editor.)

To change the background color of the header, the hexadecimal value (#FFFFFF) must be replaced by another.
 

Background color and height of the header
 
header { background-color: #FFFFFF; height: 100px; }
(Copy the code and paste it in the CSS Editor.)

To change the height of the header, the height (100px) must be replaced by a different numerical value.
 

Background color, height and distance of the header
 
header { background-color: #FFFFFF; height: 100px; margin: 30px 0px 0px 0px; }
(Copy the code and paste it in the CSS Editor.)

For the distances the 'margin' is responsible. The first value for the top, the second for the right, the third for the bottom and the fourth for the left. The value is numerically followed by px. In this example, the header is offset downward 30px.
 

Put logo down
 
header .pull-left { margin: 20px 0px 0px 0px; }
(Copy the code and paste it in the CSS Editor.)

The following command addressed only the logo and put it 20px down. To put the logo in a different direction, choose other values. Negative values are also allowed.
 

Move Satus bar
 
header .pull-right { margin: 50px 20px 0px 0px; }
(Copy the code and paste it in the CSS Editor.)

With this command, the status bar will be moved by 50px down and 20px to the left.
 



Custom CSS adjustments for different screen resolutions
With the automatic adjustment on smaller screens (tablet & smartphone), the survey layout automatically adjusts to each size. If you make adjustments on the CSS editor now, these affect the optimized presentation for small screens and can lead to unwanted results.
To prevent this, you can set specific CSS commands only for specific screen resolutions.

Example:
In the normal (desktop) view you want to move the status bar 50px down. On a tablet only 10px down and on a smartphone the status bar does not move the position.

In this case, the CSS code looks like this:
 
header .pull-right { margin: 50px 0px 0px 0px; }

@media (max-width:767px) {
    header . pull-right { margin: 10px 0px 0px 0px; }
}

@media (max-width:360px) {
header . pull-right { margin: 0px 0px 0px 0px; }
}
(Copy the code and paste it in the CSS Editor.)

With this commands the Status bar moves in a normal desktop view 50px down, by a screen size under 768px only 10px down, and by a screen size under 361px it moves 0px.

The command:
@media (max-width:XXXpx) {

}

define the screen size by whom the settings work. All commands between the curly brackets are only working for this screen size.


Note
Each input can lead to errors for which we assume no liability. Seek advice or help from an expert.