Avant de poursuivre, nous vous recommandons de consulter au préalable les articles dédiés à la personnalisation graphique, qui vous permettront de comprendre comment adapter l'aspect de vos campagnes.
Comment modifier le design de l'ensemble de mes questionnaires ?
Comment personnaliser le design d'une diffusion spécifique ?

Si toutefois l'ensemble des possibilités offertes ne vous suffisaient pas, vous disposez en supplément d'un outil de personnalisation graphique avancée.

>> Avertissement

Nous vous conseillons de contacter un membre de votre équipe technique avant toute manipulation. Nous avons optimisé les différents thèmes pour offrir la meilleure expérience possible à vos répondants. La personnalisation graphique avancée peut engendrer certaines erreurs d'affichage et avoir dans certains cas un impact défavorable sur l'expérience vécue par vos répondants. MyFeelBack ne peut être tenu responsable des personnalisations effectuées par ses clients.

__________________________________________________________________

Où trouver l'outil de personnalisation avancée ?

Dans l'édition de votre thème, vous trouverez sur votre droite le volet de Personnalisation CSS avancée.
Pour l'ouvrir cliquez sur le pictogramme :

Le panneau apparaît :


Vous pouvez directement saisir votre code CSS dans le champ de saisie dédié.


__________________________________________________________________

Précautions d'emploi

  • Pour limiter la portée des règles CSS et éviter certaines erreurs d'affichage, veillez à commencer le sélecteur CSS par :

"& "


  • Pour que votre règle prenne le dessus sur des règles existantes vous pouvez ajouter à la fin des déclarations le mot clé suivant (plus d'info ici) :

!important


  • La clause CSS avancé doit commencer par :

{

  • Et doit se terminer par :

}


  • Veillez à respecter scrupuleusement le langage CSS, l'outil de personnalisation avancée ne disposant pas de moyen de validation des éléments que vous saisissez. Exemples de ressources pour comprendre le langage CSS : https://www.w3schools.com/css/ ou encore https://openclassrooms.com/

__________________________________________________________________

Exemple de personnalisation avancée

Vous souhaitez modifier la couleur des étoiles d'un élément CSat, au survol de ces dernières, lorsque le répondant est sur le point de faire son choix de notation.

Admettons que vous possédez cette base graphique :

Rendez-vous dans le panneau de Personnalisation CSS avancée.

__________________________________________________________________

Insérez par exemple ce type de code de personnalisation (ne pas copier celui-ci) :

{
& .mfb-widget-scalerating .scale-rating .rating-value

{

&.rating-value-hover:nth-child(1):after{

color: #ff6300;

}

&.rating-value-hover:nth-child(2):after{

color: #ffba03;

}

&.rating-value-hover:nth-child(3):after{

color: #ffff07;

}

&.rating-value-hover:nth-child(4):after{

color: #92d14f;

}

&.rating-value-hover:nth-child(5):after{

color: #00ad4f;

}

}

}

__________________________________________________________________

Puis cliquez sur Enregistrer.

La couleur de chaque étoile a bien été modifiée.

Ce qui donnera ce type de résultat au survol des étoiles de notation :

N'hésitez pas à solliciter votre équipe technique pour vous aider à personnaliser au mieux vos questionnaires.

Avez-vous trouvé votre réponse?