Sources → Enquêtes → Logo et couleur → CSS personalisé
Nos enquêtes peuvent être personnalisées pour répondre à la majorité des besoins. Si vous estimez qu'il est nécessaire d'apporter des ajustements supplémentaires à l'enquête, vous pouvez le faire en ajoutant du CSS personnalisé.
Questions
Modifier la question du NPS pour qu'elle n'apparaisse qu'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,.1) !important;
Suppression du décompte des questions dans le coin supérieur droit
#feedback-remaining { display:none;}
Modifier 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; 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;}
les champs de contenu et de couleur doivent être ajustés, le code doit être ajouté pour chaque étoile
Supprimer les étiquettes au survol de chaque note
.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;}
Remplacer les étoiles par des chiffres dans les classements
.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 display last question*/
#feedback-app .feedback-layout-gamify .ninja-alert {
display: none;
La barre de progression
Changement de 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;}
Modifier la taille de la barre de progression de l'enquête
#feedback-app .feedback-layout-gamify .feedback-progress .progress { height: 26px !important ;}
Modification de la mise en page
Modification de 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;}
Retirer les confettis à la fin de l'enquête
body #confettiCanvas{display:none!important;}
Modifier le symbole d'etoile de satisfaction
Accédez à notre base de données de symboles : Find the Perfect Icon for Your Project in Font Awesome & replacez le f111 avec le code du symbole que vous désirez.
.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 la 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 :
.font-weight-bold {font-size:16px!important;}
Modification de la taille de la police des options de la question de choix :
#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;}
Le 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;}
Modifier la couleur du bouton du widget :
.feedier-widget__caller { background-color: #000000; color:white!important}
Supprimer l'espace en bas de page :
body #feedback-app .feedback-layout-gamify.feedback-widget .feedback-card .feedback-question__input-wrap{padding-bottom:0}
Masquer le bouton "démarrer"/"suivant" 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}
Vue d'ensemble du rapport
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"}}}
0 Comments