Водич за прилагођено стилизовање

Како прилагодити стилове виџета за коментаре

Можете прилагодити стилове виџета за коментаре на два начина:

Опција 1: Преко параметра customCSS

Пошаљите ваш прилагођени CSS као низ (string) у параметар customCSS приликом иницијализације виџета:

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

Опција 2: Преко административног панела

1. Идите на страницу за прилагођавање виџета у вашем админ панелу
2. Скролујте до одељка "Прилагођени CSS" у оквиру "Напредно"
3. Унесите ваш прилагођени CSS
4. Кликните "Сачувај"

Ваш прилагођени CSS ће бити примењен на све виџете коментара на вашем сајту.

Савети

• Користите !important да бисте надјачали подразумеване стилове ако је потребно
• Циљајте специфичне селекторе како бисте избегли утицај на друге делове вашег сајта
• Тестирајте ваш CSS у различитим прегледачима ради компатибилности
• Виџет користи стандардни CSS - нису потребни посебни препроцесори

Ивица око поља за коментар састоји се од сопствене ивице текстуалног поља и неколико танких линија које виџет црта око њега. Да бисте променили њену боју или заобљеност углова, поставите ове CSS променљиве уместо да директно стилизујете textarea. Променљиве истовремено рестилизују сваки део ивице, тако да се углови и боје увек поклапају.

Додајте CSS у поље Прилагођени CSS на страници за прилагођавање виџета, или га проследите путем опције customCSS. Потребно је само да поставите променљиве које желите да промените.

Такође можете користити помоћник Ивица поља за коментар одмах испод поља за прилагођени CSS, који овај CSS пише уместо вас.

Промена боје ивице

Боја ивице

Copy

1

2:root {

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

4}

5

Промена боје ивице током куцања

Боја ивице током куцања

Copy

1

2:root {

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

4}

5

Заобљавање сва четири угла

Подразумевано је горњи леви угао квадратан. Поставите обе променљиве полупречника да бисте заобљили сва четири угла на исти начин:

Заобљавање сва четири угла

Copy

1

2:root {

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

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

5}

6

Квадратни углови

Квадратни углови

Copy

1

2:root {

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

4}

5

Усклађивање са вашим брендом

Боје и углови бренда

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

Различите боје у тамном режиму

Када је виџет у тамном режиму, има класу dark, тако да можете поставити различите вредности за тамни режим:

Боје ивице у тамном режиму

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

Зашто не стилизувати текстуално поље директно?

Виџет сам црта део ивице поља за коментар, око текстуалног поља. Ако поставите border-color или border-radius само на textarea, те линије задржавају подразумевани стил и ивица изгледа неусклађено, на пример квадратна линија која пролази кроз заобљени угао. Горње променљиве мењају обоје одједном.