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

The border around the comment box is made of the text area's own border plus a few thin lines the widget draws around it. To change its color or corner roundness, set these CSS variables instead of styling the textarea directly. The variables restyle every part of the border at once, so the corners and colors always line up.

Add the CSS to the Custom CSS box on the Widget Customization page, or pass it with the customCSS option. You only need to set the variables you want to change.

You can also use the Comment box border helper right under the Custom CSS box, which writes this CSS for you.

Skift kantfarven

Kantfarve

Copy

1

2:root {

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

4}

5

Skift kantfarve under indtastning

Kantfarve under indtastning

Copy

1

2:root {

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

4}

5

Rund alle fire hjørner

By default the top-left corner is square. Set both radius variables to round all four corners the same:

Rund 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

Tilpas til 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

When the widget is in dark mode it has the dark class, so you can set different values for dark mode:

Mørk tilstand kantfarver

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?

The widget draws part of the comment box border itself, around the text area. If you set border-color or border-radius only on the textarea, those lines keep the default style and the border looks mismatched, for example a square line running through a rounded corner. The variables above change both at once.