Gids voor aangepaste styling

Hoe de stijlen van de commentaarwidget aan te passen

Je kunt de opmaak van de commentaarwidget op twee manieren aanpassen:

Optie 1: Via customCSS-parameter

Geef je aangepaste CSS als een string door aan de customCSS-parameter bij het initialiseren van de widget:

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

Optie 2: Via Admin-dashboard

1. Ga naar de Pagina 'Widget aanpassen' in je admin-dashboard
2. Scrol naar de "Aangepaste CSS"-sectie onder "Geavanceerd"
3. Voer je aangepaste CSS in
4. Klik op "Opslaan"

Je aangepaste CSS wordt toegepast op alle commentaarwidgets op je site.

Tips

• Gebruik !important om standaardstijlen te overschrijven indien nodig
• Richt je op specifieke selectors om te voorkomen dat andere delen van je site worden beïnvloed
• Test je CSS in verschillende browsers voor compatibiliteit
• De widget gebruikt standaard CSS - geen speciale preprocessors vereist

De rand rond het reactie‑vak bestaat uit de eigen rand van het tekstgebied plus een paar dunne lijnen die de widget eromheen tekent. Om de kleur of de afronding van de hoeken te wijzigen, stel je deze CSS‑variabelen in plaats van het textarea direct te stylen. De variabelen stylen elk deel van de rand in één keer opnieuw, zodat de hoeken en kleuren altijd op elkaar afgestemd zijn.

Voeg de CSS toe aan het Custom CSS‑vak op de Widget Customization page, of geef het door met de customCSS‑optie. Je hoeft alleen de variabelen in te stellen die je wilt wijzigen.

Je kunt ook de Comment box border‑helper direct onder het Custom CSS‑vak gebruiken, die deze CSS voor je genereert.

Randkleur wijzigen

Randkleur

Copy

1

2:root {

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

4}

5

Randkleur wijzigen tijdens typen

Randkleur tijdens typen

Copy

1

2:root {

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

4}

5

Alle vier hoeken afronden

Standaard is de linkerbovenhoek vierkant. Stel beide radius‑variabelen in om alle vier hoeken evenredig af te ronden:

Alle vier hoeken afronden

Copy

1

2:root {

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

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

5}

6

Vierkante hoeken

Vierkante hoeken

Copy

1

2:root {

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

4}

5

Pas aan op je merk

Merkkleuren en hoeken

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

Verschillende kleuren in donkere modus

Wanneer de widget in donkere modus staat, heeft hij de dark‑klasse, zodat je verschillende waarden voor donkere modus kunt instellen:

Randkleuren in donkere modus

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

Waarom de tekstvak niet direct stylen?

De widget tekent zelf een deel van de rand van het reactie‑vak, rond het tekstgebied. Als je alleen border-color of border-radius op het textarea instelt, behouden die lijnen de standaardstijl en ziet de rand er niet bij elkaar passend uit, bijvoorbeeld een vierkante lijn die door een afgeronde hoek loopt. De bovenstaande variabelen wijzigen beide tegelijk.