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

Obramowanie wokół pola komentarza składa się z własnej ramki elementu textarea oraz kilku cienkich linii rysowanych przez widżet wokół niego. Aby zmienić jego kolor lub zaokrąglenie narożników, ustaw te zmienne CSS zamiast stylować textarea bezpośrednio. Zmienne restylizują całe obramowanie naraz, dzięki czemu narożniki i kolory zawsze się zgadzają.

Dodaj CSS do pola Custom CSS na stronie dostosowywania widżetu lub przekaż go za pomocą opcji customCSS. Musisz ustawić tylko te zmienne, które chcesz zmienić.

Możesz również użyć pomocnika Comment box border znajdującego się tuż pod polem Custom CSS, który wygeneruje ten CSS za Ciebie.

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

Domyślnie lewy górny narożnik jest kwadratowy. Ustaw obie zmienne promienia, aby zaokrąglić wszystkie cztery narożniki tak samo:

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

Dopasowanie do marki

Kolory marki i narożniki

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

Gdy widżet jest w trybie ciemnym, ma klasę dark, więc możesz ustawić różne wartości dla trybu ciemnego:

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 stylować pola tekstowego bezpośrednio?

Widżet rysuje część obramowania pola komentarza samodzielnie, wokół pola tekstowego. Jeśli ustawisz border-color lub border-radius tylko na textarea, te linie zachowają styl domyślny i obramowanie będzie wyglądać niespójnie, na przykład kwadratowa linia przechodząca przez zaokrąglony narożnik. Powyższe zmienne zmieniają oba elementy naraz.