Leitfaden für benutzerdefiniertes Styling

So passen Sie das Erscheinungsbild des Kommentar-Widgets an

Sie können das Styling des Kommentar-Widgets auf zwei Arten anpassen:

Option 1: Über den customCSS-Parameter

Übergeben Sie Ihr benutzerdefiniertes CSS als Zeichenfolge an den customCSS-Parameter, wenn Sie das Widget initialisieren:

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

Option 2: Über das Admin-Dashboard

1. Gehen Sie zur Widget-Anpassungsseite in Ihrem Admin-Dashboard
2. Scrollen Sie zum Abschnitt "Custom CSS" unter "Advanced"
3. Geben Sie Ihr benutzerdefiniertes CSS ein
4. Klicken Sie auf "Speichern"

Ihr benutzerdefiniertes CSS wird auf alle Kommentar-Widgets Ihrer Website angewendet.

Tipps

• Verwenden Sie !important, um bei Bedarf Standardstile zu überschreiben
• Wählen Sie gezielte Selektoren aus, um andere Bereiche Ihrer Website nicht zu beeinflussen
• Testen Sie Ihr CSS in verschiedenen Browsern auf Kompatibilität
• Das Widget verwendet Standard-CSS - es sind keine speziellen Präprozessoren erforderlich

Der Rand um das Kommentarfeld besteht aus dem eigenen Rand des Textbereichs plus einigen dünnen Linien, die das Widget darum zeichnet. Um seine Farbe oder Rundung der Ecken zu ändern, setzen Sie diese CSS-Variablen anstatt das textarea direkt zu stylen. Die Variablen gestalten den gesamten Rand auf einmal neu, sodass die Ecken und Farben immer übereinstimmen.

Fügen Sie das CSS in das Custom CSS-Feld auf der Widget Customization page hinzu oder übergeben Sie es mit der Option customCSS. Sie müssen nur die Variablen setzen, die Sie ändern möchten.

Sie können auch den Comment box border-Assistenten direkt unter dem Custom CSS-Feld verwenden, der dieses CSS für Sie erstellt.

Randfarbe ändern

Randfarbe

Copy

1

2:root {

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

4}

5

Randfarbe beim Tippen ändern

Randfarbe beim Tippen

Copy

1

2:root {

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

4}

5

Alle vier Ecken abrunden

Standardmäßig ist die obere linke Ecke quadratisch. Setzen Sie beide Radius-Variablen, um alle vier Ecken gleich abzurunden:

Alle vier Ecken abrunden

Copy

1

2:root {

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

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

5}

6

Quadratische Ecken

Quadratische Ecken

Copy

1

2:root {

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

4}

5

An Ihre Marke anpassen

Markenfarben und Ecken

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

Unterschiedliche Farben im Dark Mode

Wenn das Widget im Dark Mode ist, hat es die Klasse dark, sodass Sie für den Dark Mode andere Werte setzen können:

Randfarben im Dark Mode

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

Warum das Textfeld nicht direkt stylen?

Das Widget zeichnet einen Teil des Kommentarfeld‑Randes selbst, um den Textbereich herum. Wenn Sie border-color oder border-radius nur am textarea setzen, behalten diese Linien den Standardstil bei und der Rand wirkt nicht übereinstimmend, zum Beispiel eine quadratische Linie, die durch eine abgerundete Ecke verläuft. Die oben genannten Variablen ändern beides gleichzeitig.