Examples of custom CSS that can be used directly in Feedier surveys inside the Advanced Settings > Custom CSS option:

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 to 4 the number of Smileys

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

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 ;}

Page Layout

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;}


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;
}

Remove the pop-ups on hover of each rating

.rating-tooltip {display: none !important}

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;
}

Widget: 

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 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"}}}