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. 


   Essential         
    Professional         
   Enterprise         
   ReportR  

note
NOTE


Advantages of using custom CSS

  • It helps brand recall as it allows  you to recreate your company's branding entirely to make the survey match and will therefore enable customers to immediately link the survey with your company.
  • Greater flexibility to tweak the design – check out the examples below to see how many things you can change using CSS. If there are a few things bothering you about the way the survey appears, CSS enables you to tailor the survey design in all details.



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.

Custom CSS- add custom css file

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 {...}

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

Custom CSS- make the answer text larger

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

Make button text larger

Custom CSS- make button text larger

.button { font-size:180%;}

Resize Images

Custom CSS- resize images

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

Resize videos

Custom CSS- resize videos

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

Custom CSS- resize logo

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

Resize outcome image

Custom CSS- resize outcome image

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

Define font sizes

Custom CSS- 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

Custom CSS- define font

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

Remove line between questions on the same slide

Custom CSS- remove line between questions

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

Adjust space under the question

Custom CSS- 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

Custom CSS- color the border around the 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

Custom CSS- change the text and background color

.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

Custom CSS- 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

Custom CSS- change the color of the star rating question

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

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

Custom CSS- change the color around the quiz score guage

.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.
S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.