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

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

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

Опција 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 - нису потребни посебни препроцесори

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 страница за прилагођавање виџета, 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.

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

Боја оквира

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

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

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

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

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

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

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

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

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

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

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.