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