Guide du style personnalisé

Comment personnaliser le style du widget de commentaires

Vous pouvez personnaliser le style du widget de commentaires de deux façons :

Option 1 : via le paramètre customCSS

Passez votre CSS personnalisé sous forme de chaîne au paramètre customCSS lors de l'initialisation du widget :

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

Option 2 : via le tableau de bord d'administration

1. Allez sur la page de personnalisation du widget dans votre tableau de bord d'administration
2. Faites défiler jusqu'à la section "CSS personnalisé" sous "Avancé"
3. Saisissez votre CSS personnalisé
4. Cliquez sur "Enregistrer"

Votre CSS personnalisé sera appliqué à tous les widgets de commentaires sur votre site.

Conseils

• Utilisez !important pour remplacer les styles par défaut si nécessaire
• Ciblez des sélecteurs spécifiques pour éviter d'affecter d'autres parties de votre site
• Testez votre CSS dans différents navigateurs pour vérifier la compatibilité
• Le widget utilise du CSS standard - aucun préprocesseur spécial n'est requis

La bordure autour de la boîte de commentaire est composée de la bordure propre de la zone de texte plus quelques lignes fines que le widget dessine autour. Pour changer sa couleur ou l’arrondi des coins, définissez ces variables CSS au lieu de styliser directement le textarea. Les variables re‑stylisent chaque partie de la bordure en même temps, de sorte que les coins et les couleurs restent alignés.

Ajoutez le CSS dans la zone Custom CSS sur la page de personnalisation du widget, ou transmettez-le avec l’option customCSS. Vous n’avez besoin de définir que les variables que vous souhaitez modifier.

Vous pouvez également utiliser l’assistant Comment box border juste sous la zone Custom CSS, qui génère ce CSS pour vous.

Modifier la couleur de la bordure

Couleur de la bordure

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5

Modifier la couleur de la bordure pendant la saisie

Couleur de la bordure pendant la saisie

Copy

1

2:root {

3 --fc-input-border-color-focus: #2563eb;

4}

5

Arrondir les quatre coins

Par défaut, le coin supérieur gauche est carré. Définissez les deux variables de rayon pour arrondir les quatre coins de la même façon :

Arrondir les quatre coins

Copy

1

2:root {

3 --fc-input-border-radius: 12px;

4 --fc-input-border-start-start-radius: 12px;

5}

6

Coins carrés

Coins carrés

Copy

1

2:root {

3 --fc-input-border-radius: 0;

4}

5

Correspondre à votre marque

Couleurs et coins de la marque

Copy

1

2:root {

3 --fc-input-border-color: #c7d2fe;

4 --fc-input-border-color-focus: #4f46e5;

5 --fc-input-border-radius: 8px;

6 --fc-input-border-start-start-radius: 8px;

7}

8

Couleurs différentes en mode sombre

Lorsque le widget est en mode sombre, il possède la classe dark, vous pouvez donc définir des valeurs différentes pour le mode sombre :

Couleurs de bordure en mode sombre

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5.dark {

6 --fc-input-border-color: #444;

7 --fc-input-border-color-focus: #aaa;

8}

9

Pourquoi ne pas styliser directement la zone de texte ?

Le widget dessine lui‑même une partie de la bordure de la boîte de commentaire, autour de la zone de texte. Si vous définissez border-color ou border-radius uniquement sur le textarea, ces lignes conservent le style par défaut et la bordure apparaît incohérente, par exemple une ligne carrée traversant un coin arrondi. Les variables ci‑dessus modifient les deux à la fois.