Custom CSS

Essential
Professional 
Enterprise 
ReportR

Custom CSS allows you to change many elements of your design (eg. make answers larger, make buttons out of links, etc.) which are not included in the Design tab.


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.


Custom CSS button


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 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 element in CSS with a point.

.input {...}

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

#content2 {...}



Examples of CSS

Here are examples to illustrate how CSS changes the format of different elements.


CSS larger text


CSS larger button size


Custom CSS resize image


Custom CSS resize videos


Custom CSS resize logo


Custom CSS resize outcome image


Custom CSS font sizes


Custom CSS define font


Custom CSS remove line spacing


Custom CSS add spacing


Custom CSS edit font and colors


Custom CSS - hide answer border


Custom CSS - color border


Custom CSS change color of chosen answer


Custom CSS change slider color


Custom CSS - change color rating icons


Custom CSS change gauge pointer color


Survey Anyplace 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.


V
Vincent 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.