Guida allo Stile Personalizzato

Come personalizzare gli stili del widget dei commenti

Puoi personalizzare lo stile del widget dei commenti in due modi:

Opzione 1: Tramite il parametro customCSS

Passa il tuo CSS personalizzato come stringa al parametro customCSS durante l'inizializzazione del widget:

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

Opzione 2: Tramite la Dashboard di amministrazione

1. Vai alla pagina di personalizzazione del widget nella tua dashboard di amministrazione
2. Scorri fino alla sezione "CSS personalizzato" sotto "Avanzate"
3. Inserisci il tuo CSS personalizzato
4. Fai clic su "Salva"

Il tuo CSS personalizzato verrà applicato a tutti i widget dei commenti sul tuo sito.

Suggerimenti

• Usa !important per sovrascrivere gli stili predefiniti, se necessario
• Usa selettori specifici per evitare di influenzare altre parti del tuo sito
• Testa il tuo CSS in diversi browser per verificarne la compatibilità
• Il widget usa CSS standard - non sono necessari preprocessori speciali

La bordatura intorno alla casella dei commenti è composta dal bordo dell'area di testo stessa più alcune linee sottili che il widget disegna attorno. Per cambiare il colore o la rotondità degli angoli, imposta queste variabili CSS invece di stilizzare direttamente il textarea. Le variabili ridisegnano ogni parte del bordo in una volta, così gli angoli e i colori sono sempre allineati.

Aggiungi il CSS nella casella Custom CSS nella pagina di personalizzazione del widget, oppure passalo con l'opzione customCSS. È necessario impostare solo le variabili che desideri modificare.

Puoi anche utilizzare l'assistente Comment box border subito sotto la casella Custom CSS, che genera questo CSS per te.

Cambia il colore del bordo

Colore del bordo

Copy

1

2:root {

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

4}

5

Cambia il colore del bordo durante la digitazione

Colore del bordo durante la digitazione

Copy

1

2:root {

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

4}

5

Arrotonda tutti e quattro gli angoli

Di default l'angolo in alto a sinistra è quadrato. Imposta entrambe le variabili di raggio per arrotondare tutti e quattro gli angoli allo stesso modo:

Arrotonda tutti e quattro gli angoli

Copy

1

2:root {

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

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

5}

6

Angoli quadrati

Angoli quadrati

Copy

1

2:root {

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

4}

5

Abbina al tuo brand

Colori e angoli del brand

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

Colori diversi in modalità scura

Quando il widget è in modalità scura ha la classe dark, quindi puoi impostare valori diversi per la modalità scura:

Colori del bordo in modalità scura

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

Perché non stilizzare direttamente l'area di testo?

Il widget disegna parte del bordo della casella dei commenti da solo, attorno all'area di testo. Se imposti border-color o border-radius solo sul textarea, quelle linee mantengono lo stile predefinito e il bordo appare non corrispondente, ad esempio una linea quadrata che attraversa un angolo arrotondato. Le variabili sopra cambiano entrambi contemporaneamente.