Ръководство за персонализирано стилизиране

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

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

Опция 1: Чрез параметъра customCSS

Подайте вашия персонализиран CSS като низ на параметъра 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 - не са необходими специални препроцесори

Рамката около полето за коментар се състои от собствения border на textarea плюс няколко тънки линии, които уиджетът изчертава около него. За да промените цвета ѝ или заоблеността на ъглите, задайте тези CSS променливи вместо да стилизирате textarea директно. Променливите преоформят всички части на рамката наведнъж, така че ъглите и цветовете винаги съвпадат.

Добавете CSS в полето Custom CSS на страницата за персонализиране на уиджета, или го подайте чрез опцията customCSS. Трябва да зададете само променливите, които искате да промените.

Можете също да използвате помощника Comment box border точно под полето Custom 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

Защо не да стилизирате textarea директно?

Уиджетът изчертава част от рамката на полето за коментар сам, около текстовата област. Ако зададете border-color или border-radius само на textarea, тези линии запазват стила по подразбиране и рамката изглежда несъгласувана — например квадратна линия, минаваща през закръглен ъгъл. Горните променливи променят двете наведнъж.