Comment personnaliser le design de votre sondage à l'aide de CSS

Dans ce guide, vous découvrirez comment vous pouvez styliser votre sondage en utilisant du CSS personnalisé. Vous pouvez également en savoir plus sur les paramètres spécifiques que vous pouvez modifier pour vous assurer que votre sondage s'aligne avec le design de votre site web.

• Comment trouver les paramètres de personnalisation CSS
• Liste des sélecteurs CSS personnalisables pour les sondages
• Liste des propriétés CSS avec leurs valeurs possibles

Comment trouver les paramètres de personnalisation CSS

1. Ouvrez un sondage existant et cliquez sur Modifier (ou créer un nouveau sondage).

2. Accédez à l'onglet Apparence.

3. Ajoutez votre code personnalisé dans la section CSS personnalisé.

• Consultez les sections ci-dessous pour en savoir plus sur les éléments de sondage personnalisables, les propriétés CSS et leurs valeurs possibles.
• Vous pouvez copier-coller les exemples de CSS personnalisé fournis dans les sections ci-dessous et les ajuster en utilisant les paramètres disponibles pour mieux s'aligner avec le design de votre site web.

Retour en haut

Liste des sélecteurs CSS personnalisables pour les sondages

Vous pouvez utiliser les sélecteurs CSS suivants pour cibler des éléments HTML spécifiques du sondage à des fins de stylisation. Dans la section Liste des propriétés CSS avec leurs valeurs possibles ci-dessous, vous pouvez en savoir plus sur les propriétés CSS que vous pouvez personnaliser pour chaque sélecteur et leurs valeurs possibles.

Pour ajuster un élément spécifique, copiez l'exemple de CSS personnalisé correspondant et ajustez ses propriétés pour styliser votre sondage selon vos préférences.

sondage-bouton

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#survey-button {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

titre-question

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#question-title {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

description-question

Ce sélecteur correspond à l'élément de sondage suivant :

[???]

Exemple de CSS personnalisé :

#question-description {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

corps-réponse

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

étiquette-score

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#étiquette-score {
    police: 'Roboto';
    taille-de-police: 14px;
    poids-de-police: 400;
    style-de-police: normal;
    décoration-de-texte: none;
}

bouton

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#bouton {
    police: 'Roboto';
    taille-de-police: 14px;
    poids-de-police: 500;
    style-de-police: normal;
    décoration-de-texte: none;
}

bouton-sauter

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#bouton-sauter {
    police: 'Roboto';
    taille-de-police: 14px;
    poids-de-police: 400;
    style-de-police: normal;
    décoration-de-texte: underline;
}

bouton-désactivé

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#bouton-désactivé {
    police: 'Roboto';
    taille-de-police: 14px;
    poids-de-police: 500;
    style-de-police: normal;
    décoration-de-texte: none;
}

Retour en haut

Liste des propriétés CSS avec leurs valeurs possibles

Pour tous les sélecteurs listés ci-dessus, vous pouvez ajuster les propriétés CSS suivantes.

police

Exemple de CSS personnalisé :

#bouton-sondage {
   police: 'Ambit';
}

style-de-police

Exemple de CSS personnalisé :

#bouton-sondage {
    style-de-police: italic;
}

poids-de-police

Exemple de CSS personnalisé :

#bouton-sondage {
    poids-de-police: Gras;
}

taille-de-police

Exemple de CSS personnalisé :

#bouton-sondage {
    taille-de-police: 16px;
}

décoration-de-texte

Exemple de CSS personnalisé :

#survey-button {
    text-decoration: none;
}

Retour en haut