| Info |
|---|
Surveys → Branding → Custom CSS |
...
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é.
| Table of Contents |
|---|
| minLevel | 1 |
|---|
| maxLevel | 6 |
|---|
| outline | false |
|---|
| type | list |
|---|
| printable | false |
|---|
|
...
Questions
...
Modifier la question du NPS pour qu'elle n'apparaisse qu'en une seule couleur
| Code Block |
|---|
|
.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
| Code Block |
|---|
|
#feedback-remaining { display:none;} |
...
Modifier la couleur de l'étiquette sous chaque étoile
| Code Block |
|---|
|
/*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
...
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
| Code Block |
|---|
|
.rating-tooltip {display: none !important} |
...
Modifier le nombre de Smileys à quatre options
| Code Block |
|---|
.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
| Code Block |
|---|
.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 ! 🚀”
| Code Block |
|---|
/*Ninja display last question*/
#feedback-app .feedback-layout-gamify .ninja-alert {
display: none;
|
Desigining the Progress Bar
...
La barre de progression
Changement de la couleur de la barre de progression de l'enquête (en orange)
| Code Block |
|---|
|
#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
| Code Block |
|---|
|
#feedback-app .feedback-layout-gamify .feedback-progress .progress { height: 26px !important ;} |
...
...
Modification de la mise en page
Modification de la taille du logo
| Code Block |
|---|
|
#app-header .navbar-brand img { max-width: 200px; max-height: 100px !important;} |
...
Agrandir les options de l'image
| Code Block |
|---|
|
.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
| Code Block |
|---|
|
@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
| Code Block |
|---|
|
body #confettiCanvas{display:none!important;} |
Changing the rating symbol
...
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.
| Code Block |
|---|
|
.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
| Code Block |
|---|
|
.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 :
| Code Block |
|---|
|
p{font-size:22px!important;} |
...
Modification de la taille de la police des options du tableau des classements :
| Code Block |
|---|
.font-weight-bold {font-size:16px!important;} |
...
Modification de la taille de la police des options de la question de choix :
| Code Block |
|---|
#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
| Code Block |
|---|
|
.submit-answer.btn span{display:none;}.submit-answer.btn:before{content: "\f061"; font-family: "Font Awesome 5 Pro";font-weight: bold;} |
...
| Code Block |
|---|
|
.feedier-widget__caller { background-color: #000000; color:white!important} |
...
Supprimer l'espace en bas de page :
| Code Block |
|---|
|
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 :
| Code Block |
|---|
|
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
| Code Block |
|---|
|
body .feedier-widget__popup{height: 300px !important} |
...
Vue d'ensemble du rapport
| Code Block |
|---|
|
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} |
...