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