ENDesigning with CSS

Surveys → Branding → Custom CSS

Our surveys allow for customisation to fill the majority of use case needs. If you feel you need further adjustments to the survey, you can do so by adding custom CSS.

Desigining Questions

Changing the NPS question to show as one colour only

.feedback-question__input-wrap.is-nps .feedback-stars-background .feedback-stars-rating a {  background: #0240AC !important;  border-color: #0240AC !important;  box-shadow: 0 1.5px 0 rgba(0,0,0,.1) !important;

Removing the questions count in the top right corner

#feedback-remaining {    display:none;}

Change the color of the label under each star

/*Tooltips*/#feedback-question-0000000 .fd.fd-star:hover:after {opacity:1;display:block;}.fd.fd-star.is-1:after {    content: "test";    position: absolute;    display: block;    bottom: -50px;    left: -40px;    z-index: 10;    opacity: 0;    display:none;    width: 120px;    background: #000000;    font-size: 1rem;    color: #FFFFFF;    padding: 0.4rem;    border-radius: 0.4rem;    text-indent: 0;    font-size:0.8rem;}

content and color fields must be adjusted, the code must be added for each star

Remove the labels on hover of each rating

.rating-tooltip {display: none !important}

Change the number of Smileys to four options

.feedback-question__input-wrap--slider-type .feedback-stars-smiley ul li:nth-child(4) {    display: none;}

Changing the stars in the ratings to numbers

.feedback-question__input-wrap--slider-type .feedback-stars-rating a {
    background: none;
    text-indent: 0;
    font-size: 1.5rem;
    height: auto;
}

Removing the “Almost, last question! 🚀”

/*Ninja display last question*/
#feedback-app .feedback-layout-gamify .ninja-alert {
    display: none;

Desigining the Progress Bar

Changing the colour of the survey progress bar (to orange)

#feedback-app .feedback-layout-gamify .feedback-progress .progress-bar-striped{background-color: #f26a21!important;}

Changing the size of the survey progress bar

#feedback-app .feedback-layout-gamify .feedback-progress .progress {  height: 26px !important ;}

Changing the Page Layout

Editing the logo size

#app-header .navbar-brand img {    max-width: 200px;    max-height: 100px !important;}

Making the image options larger

.feedback-question-form ul.image-select-type li {       flex: 0 0 200px;       max-width: 200px;}.feedback-question-form ul.image-select-type li a {      height: 100px;}

Changing the font of your survey

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap);html body { font-family: Inter,sans-serif;}

Removing Confetti at the end of your survey

body #confettiCanvas{display:none!important;}

Changing the rating symbol

Go to our database of symbols: https://fontawesome.com/v5/search &replace the f111 with the symbol code you desire.

.feedback-stars-rating a span {display:none;}.feedback-stars-rating a.fd.fd-star {background: none !important;}.feedback-stars-rating a.fd.fd-star::before {  content: “\f111”;  font-family: “Font Awesome 5 Pro”;  text-indent: 0 !important;  display: block;  line-height: 1;}

Change the size of the description text

 .feedback-question__name__label__desc p {  display: block;  font-size: 1.6rem !important;  color: #272727;  margin-bottom: 0 !important;}

Changing the question font size:

p{font-size:22px!important;}

Changing the ratings table options font size:

.font-weight-bold {font-size:16px!important;}

Changing the choice question options font size:

#feedback-app .feedback-layout-gamify .btn,#feedback-app .feedback-layout-gamify .editr--toolbar .dashboard form button,.editr--toolbar .dashboard form #feedback-app .feedback-layout-gamify button {font-size:16px!important;}

Designing the Widget

Changing the next button on the widget to an arrow

.submit-answer.btn span{display:none;}.submit-answer.btn:before{content: "\f061"; font-family: "Font Awesome 5 Pro";font-weight: bold;}

Change Widget Button Color:

.feedier-widget__caller { background-color: #000000; color:white!important}

Remove space at the bottom:

body #feedback-app .feedback-layout-gamify.feedback-widget .feedback-card .feedback-question__input-wrap{padding-bottom:0}

Hide "start"/"next" button if answer is required:

body #feedback-app .feedback-layout-gamify.feedback-widget .feedback-card .submit-answer.disabled {display:none !important;}

Change Widget pop-up size

body .feedier-widget__popup{height: 300px !important}

Clean PDF View

div.report-widget__content.p-3.col-md-12 > div > div.col-md-4 > div > div > div:nth-child(2) {visibility: hidden; display: none;}.benchmarking-select-report .col-md-1, .benchmarking-select-report .col-md-3{display:none!important;}.benchmarking-graph {max-width: 100% !important;flex: 0 0 100% !important;}.benchmarking-select-report .col-md-12.pl-5{display:none !important}

eg.

{"chartArea": {"left": "40%"}, "colors": ["#cc0200", "#ff3333", "#fe999a"], "width": 800, "hAxis": { "baselineColor": "transparent", "gridlines": { "color": "transparent"}}}