Przewodnik po niestandardowym stylowaniu

Jak dostosować style widżetu komentarzy

Możesz dostosować styl widżetu komentarzy na dwa sposoby:

Opcja 1: Za pomocą parametru customCSS

Przekaż swój niestandardowy CSS jako łańcuch do parametru customCSS podczas inicjalizacji widżetu:

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

Opcja 2: Za pomocą panelu administracyjnego

1. Przejdź do strony personalizacji widżetu w panelu administracyjnym
2. Przewiń do sekcji "Niestandardowy CSS" w sekcji "Zaawansowane"
3. Wprowadź swój niestandardowy CSS
4. Kliknij "Zapisz"

Twój niestandardowy CSS zostanie zastosowany do wszystkich widżetów komentarzy na Twojej stronie.

Wskazówki

• Użyj !important, aby w razie potrzeby nadpisać domyślne style
• Celuj w konkretne selektory, aby nie wpływać na inne części witryny
• Testuj swój CSS w różnych przeglądarkach pod kątem zgodności
• Widżet używa standardowego CSS - nie są wymagane żadne specjalne preprocesory

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.

Zmiana koloru obramowania

Kolor obramowania

Copy

1

2:root {

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

4}

5

Zmiana koloru obramowania podczas pisania

Kolor obramowania podczas pisania

Copy

1

2:root {

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

4}

5

Zaokrąglenie wszystkich czterech narożników

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

Zaokrąglenie wszystkich czterech narożników

Copy

1

2:root {

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

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

5}

6

Kwadratowe narożniki

Kwadratowe narożniki

Copy

1

2:root {

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

4}

5

Dopasuj do swojej marki

Kolory i narożniki marki

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

Różne kolory w trybie ciemnym

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

Kolory obramowania w trybie ciemnym

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

Dlaczego nie stylizować pola tekstowego bezpośrednio?

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.