Guide til tilpasset styling

Sådan tilpasser du kommentar-widgetens stil

Du kan tilpasse kommentarboksens styling på to måder:

Mulighed 1: Via customCSS-parameteren

Send dit brugerdefinerede CSS som en streng til customCSS-parameteren, når du initialiserer widgeten:

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

Mulighed 2: Via Admin-dashboard

1. Gå til Widget-tilpasningssiden i dit admin-dashboard
2. Rul ned til sektionen "Brugerdefineret CSS" under "Avanceret"
3. Indtast dit brugerdefinerede CSS
4. Klik på "Gem"

Dit brugerdefinerede CSS vil blive anvendt på alle kommentar-widgets på dit websted.

Tips

• Brug !important for at tilsidesætte standardstilarter, hvis det er nødvendigt
• Målret specifikke selektorer for at undgå at påvirke andre dele af dit websted
• Test dit CSS i forskellige browsere for kompatibilitet
• Widgeten bruger standard CSS - ingen særlige preprocessorer er nødvendige

Kanten omkring kommentarboksen består af tekstområdets egen kant plus et par tynde linjer, som widgeten tegner omkring den. For at ændre dens farve eller hjørnerundhed skal du angive disse CSS-variabler i stedet for at style textarea direkte. Variablerne restyler alle dele af kanten på én gang, så hjørner og farver altid passer sammen.

Tilføj CSS'en i boksen Custom CSS på Widget Customization-siden, eller send den med customCSS-indstillingen. Du behøver kun at angive de variabler, du vil ændre.

Du kan også bruge hjælpefunktionen Comment box border lige under Custom CSS-boksen, som skriver denne CSS for dig.

Ændr kantfarven

Kantfarve

Copy

1

2:root {

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

4}

5

Ændr kantfarven mens der skrives

Kantfarve mens der skrives

Copy

1

2:root {

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

4}

5

Afrund alle fire hjørner

Som standard er hjørnet øverst til venstre firkantet. Angiv begge radius-variabler for at afrunde alle fire hjørner ens:

Afrund alle fire hjørner

Copy

1

2:root {

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

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

5}

6

Firkantede hjørner

Firkantede hjørner

Copy

1

2:root {

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

4}

5

Match dit brand

Brandfarver og hjørner

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

Forskellige farver i mørk tilstand

Når widgeten er i mørk tilstand, har den dark-klassen, så du kan angive forskellige værdier for mørk tilstand:

Kantfarver i mørk tilstand

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

Hvorfor ikke style tekstområdet direkte?

Widgeten tegner selv en del af kommentarboksens kant, omkring tekstområdet. Hvis du kun angiver border-color eller border-radius på textarea, beholder disse linjer standardstilen, og kanten ser upassende ud, for eksempel en firkantet linje, der løber gennem et afrundet hjørne. Variablerne ovenfor ændrer begge på én gang.