Designing 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, 0.1) !important;
}
Changing the color of the icon when hovering over it
.feedback-question__input-wrap.is-nps .feedback-stars-background .feedback-stars-rating a:hover {
background: #0240AC!important;
border-color: #0240AC!important;
box-shadow: 0 1.5px 0 rgba(0,0,0,.1) !important;
}Changing the color of the selected NPS icon
.feedback-question__input-wrap.is-nps .feedback-stars-background .feedback-stars-rating a.selected {
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;
bottom: -50px;
left: -40px;
z-index: 10;
opacity: 0;
display: none;
width: 120px;
background: #000000;
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 order of the smileys
.feedback-stars-smiley {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
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;
}
Designing 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: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome & 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;}
.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 Report 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;
}
{"chartArea": {"left": "40%"}, "colors": ["#cc0200", "#ff3333", "#fe999a"], "width": 800, "hAxis": { "baselineColor": "transparent", "gridlines": { "color": "transparent"}}}
