Custom CSS

CSS (Cascading Style Sheets) is a computer language used to adjust the presentation of a HTML or XML document. Adding Custom CSS allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab. 

---

---

This guide will teach you:

1. Add custom CSS file
2. Notes about CSS
3. Examples of CSS

1. Add custom CSS file

Make a CSS or Text-file with the changes you want, and upload it by clicking Add custom CSS file which you'll find in the Design tab of your questionnaire.

2. Notes about CSS

Here are some notes to remember when writing a CSS file:

• Always start with the right element, and always open and close your CSS with brackets.

body {...}

• Always put a semicolon (;) after a CSS code.

• You can find the right elements (HTML) by opening a web inspector in your web browser.

• You can give an element different CSS codes, i.e., editing font, color, and style of a text. 

      p { font-family: ‘arial’;  
      color: ‘blue’;
      font-style: ‘italic’; 
      }

• Font size often use ‘em’ while other CSS mostly use pixels (px) or percent (%)

font-size: 0.8em; 
width: 60px; or 15%;

• In HTML, when an element is named with a class, you start your CSS element with a point.

.input {...}

• In HTML, when an element is named with an ID, you start your CSS element with a hashtag.

#content2 {...}

• Need help with fonts? Click here.

• Need help with colors? Click here.

3. Examples of CSS

Here are examples to illustrate how CSS changes the format of different elements. Use this list to jump to the example that you're looking for:

• Make answer text larger
• Make button text larger
• Resize images
• Resize videos
• Resize logo
• Resize outcome image
• Define font sizes
• Define font
• Remove line between questions on the same slide
• Adjust space under the question
• Color the border around answers
• Change text color and background of the selected answer
• Change the color of the slider
• Change the color of the star/smiley rating
• Change the color of the border around the quiz score hand indicator

Make answer text larger

.answer-content {font-size:130%;}

Make button text larger

.button { font-size:180%;}

Resize Images

#question-1 .imagequestion {width:65%; max height: none;}

Resize videos

#question-1 .media-container { width:60%; max-height: none; margin: 0 auto; }

Resize logo

.card-logo img { width: 35%; max-height: none; }

Resize outcome image

.slide-type-final .media-container img
{width: 75%; max-height: none; margin: 0 auto; 0

Define font sizes

.theme-font-size-xsmall {font-size: 0.6em;}
.theme-font-size-small {font-size: 1.3em;}
.theme-font-size-large {font-size: 1.8em;}
.theme-font-size-xlarge {font-size: 4.5em;}

Define font

p {font-family: "Comic Sans MS";}

Remove line between questions on the same slide

hr {display:none;}
.card-content-item {padding:5%;}

Adjust space under the question

body.design-version-3 .text-container, body.theme-template-light
.text-container, body.theme-template-dark .text-container
{margin-bottom: 50px;}

Color the border around answers

.answer-content, .checkbox, .input, .radio, .select, 
.ui-state-default .answer-content, .ui-state-disabled 
.answer-content {border-color: black;}

Change text color and background of the selected answer

.form .checkbox:checked+.answer-content, .ranked.column-multi 
.column-sortable-2 .answer-content, .ranked.column-single-click 
.checkbox:checked+.answer-content, .text-choice 
.checkbox:checked+.answer-content, .text-choice .radio:checked+.answer-content 
{background-color: #00741c;color: #ff7418;}

Change the color of the slider

.rangeslider:after, 
.rangeslider__fill ,.rangeslider-markers .marker {background-color: #51eb46;}
#js-rangeslider-0.rangeslider.rsNoDrag.rangeslider--horizontal{ background-color: #b3f6aa;}

Change the color of the star/smiley rating

.star-rating-widget,
.smiley-rating-widget{color: #51eb46;}

Change the color of the border around the quiz score hand indicator

.gauge-assessment.opened .active .title,
.gauge .hand,
.gauge-assessment .hand {
color: #51eb46;}

Pointerpro is not only available for desktop or laptop, it’s also available on many other platforms and devices! Because of this, layouts with custom CSS can differ on other screens.

To make the survey adjustable to multiple screens, it is advised to use @media-query.

What's next?

• Add a Custom Button with HTML: Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice.
• PDF design settings using CSS: CSS allows you to change other elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab. You can make use of the HTML view to preview your changes. 
• The text editor allows you to make your text more interesting by changing the font, color, size, adding emoticons and variables to personalize questions. It also allows you adjust your content with HTML. What you adjust in the survey tool is what you will see in the survey itself.