Exemples de CSS personnalisés qui peuvent être utilisés directement dans les enquêtes Feedier à l'intérieur de l'option Paramètres avancés > CSS personnalisés :


Questions

Modifier la question NPS pour qu'elle ne s'affiche 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;
}

Passez à 4 le nombre de Smileys

.feedback-question__input-wrap--slider-type .feedback-stars-smiley ul li:nth-child(4) {
    display: none;
}

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;}

Modification de la taille de la barre de progression de l'enquête

#feedback-app .feedback-layout-gamify .feedback-progress .progress {  height: 26px !important ;}

 


Mise en page

Transformer le bouton "Suivant" du widget en flèche

.submit-answer.btn span{display:none;}
.submit-answer.btn:before{content: "\f061"; font-family: "Font Awesome 5 Pro";font-weight: bold;}

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 votre enquête

body #confettiCanvas{display:none!important;} 

Changer le symbole d'évaluation

Allez dans notre base de données de symboles : https://fontawesome.com/v5/search & 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;
}

Suppression des pop-ups au survol de chaque classement

.rating-tooltip {display: none !important}

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;
}