Vodič za prilagođeno stilizovanje

Kako prilagoditi stilove widgeta za komentare

Stilove widgeta za komentare možete prilagoditi na dva načina:

Opcija 1: Putem parametra customCSS

Prosledite vaš prilagođeni CSS kao string u parametar customCSS prilikom inicijalizacije widgeta:

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

Opcija 2: Putem administratorskog panela

1. Idite na stranicu za prilagođavanje widgeta u vašem administratorskom panelu
2. Skrolujte do odeljka "Prilagođeni CSS" pod "Napredno"
3. Unesite vaš prilagođeni CSS
4. Kliknite "Sačuvaj"

Vaš prilagođeni CSS biće primenjen na sve widgete za komentare na vašem sajtu.

Saveti

• Koristite !important da biste po potrebi nadjačali podrazumevane stilove
• Ciljajte specifične selektore kako ne biste uticali na druge delove sajta
• Testirajte vaš CSS u različitim pregledačima radi kompatibilnosti
• Widget koristi standardni CSS - nisu potrebni posebni preprocesori

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.

Promeni boju ivice

Boja ivice

Copy

1

2:root {

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

4}

5

Promeni boju ivice dok se kuca

Boja ivice dok se kuca

Copy

1

2:root {

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

4}

5

Zaobli sve četiri uglove

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

Zaobli sve četiri uglove

Copy

1

2:root {

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

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

5}

6

Kvadratni uglovi

Kvadratni uglovi

Copy

1

2:root {

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

4}

5

Uskladi sa brendom

Boje brenda i uglovi

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

Različite boje u tamnom režimu

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

Boje ivice u tamnom režimu

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

Zašto ne stilizovati textarea direktno?

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.