Conception des questions
Modification de la question NPS pour qu'elle s'affiche en une seule couleur
.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 ;
}
Changement de la couleur de l'icône au survol de celle-ci
.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 ;
}Changement de la couleur de l'icône NPS sélectionnée
.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 ;
}Suppression du nombre de questions dans le coin supérieur droit
#feedback-remaining { display:none;}Changer la couleur de l'étiquette sous chaque étoile
/* 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 ;
}
Les champs de contenu et de couleur doivent être ajustés, le code doit être ajouté pour chaque étoile.
Supprimez les étiquettes au survol de chaque évaluation
.rating-tooltip {display : none !important}Modifier le nombre de Smileys à quatre options
.feedback-question__input-wrap--slider-type
.feedback-stars-smiley ul li:nth-child(4) {
display : none ;
}
Modification de l'ordre des 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) ;
}Remplacer les étoiles des évaluations par des nombres
.feedback-question__input-wrap--slider-type .feedback-stars-rating a {
background : none ;
text-indent : 0 ;
font-size : 1.5rem ;
height : auto ;
}Suppression de la mention "Presque, dernière question ! 🚀"
/*Ninja affiche la dernière question*/
#feedback-app .feedback-layout-gamify .ninja-alert {
display : none ;
}
Conception de la barre de progression
Changer la couleur de la barre de progression de l'enquête (en orange)
#feedback-app .feedback-layout-gamify .feedback-progress .progress-bar-striped {
background-color : #f26a21 !important ;
}Modification de la taille de la barre de progression de l'enquête
#feedback-app .feedback-layout-gamify .feedback-progress .progress { height : 26px !important ;}
Modifier la mise en page
Modifier la taille du logo
#app-header .navbar-brand img { max-width : 200px ; max-height : 100px !important;}Agrandir les options de l'image
.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;}Changer la police de votre enquête
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap);html body { font-family : Inter,sans-serif;}Suppression des confettis à la fin de l'enquête
body #confettiCanvas{display:none!important;}
Changer le symbole d'évaluation
Accédez à notre base de données de symboles : Trouvez l'icône parfaite pour votre projet dans Font Awesome 5 | Font Awesome et remplacez le f111 par le code du symbole que vous souhaitez.
.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 ;
}
Modifier la taille du texte de description
.feedback-question__name__label__desc p {
display : block ;
font-size : 1.6rem !important ;
color : #272727 ;
margin-bottom : 0 !important ;
}
Modification de la taille de la police de la question :
p{font-size:22px!important;}Modification de la taille de la police des options du tableau des classements : p{font-size:22px!important;}
.font-weight-bold {font-size:16px!important;}Modification des options de la question de choix taille de la police :
#feedback-app .feedback-layout-gamify .btn,
#feedback-app .feedback-layout-gamify .editr-oolbar .dashboard form button,
.editr-oolbar .dashboard form #feedback-app .feedback-layout-gamify button {
font-size : 16px !important ;
}
Conception du widget
Remplacer le bouton suivant du widget par une flèche
.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 ;
}
Changez la couleur du bouton du widget :
.feedier-widget__caller { background-color : #000000 ; color:white!important}Supprimez l'espace en bas :
body #feedback-app .feedback-layout-gamify.feedback-widget .feedback-card .feedback-question__input-wrap{padding-bottom:0}Cache le bouton "start"/"next" si la réponse est requise :
body #feedback-app .feedback-layout-gamify.feedback-widget .feedback-card .submit-answer.disabled {display:none !important;}Modifier la taille de la fenêtre contextuelle du widget
body .feedier-widget__popup{height : 300px !important}
Nettoyer l'affichage du rapport
div.report-widget__content.p-3.col-md-12 > div > div.col-md-4 > 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"}}}