Vodič po meri oblikovanja

Kako prilagoditi sloge pripomočka za komentarje

Slog pripomočka za komentarje lahko prilagodite na dva načina:

Možnost 1: prek parametra customCSS

Posredujte svojo prilagojeno CSS kot niz parametru customCSS med inicializacijo pripomočka:

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

Možnost 2: prek skrbniške nadzorne plošče

1. Pojdite na stran Prilagajanje pripomočka v vaši skrbniški nadzorni plošči
2. Pomaknite se do razdelka "Prilagojen CSS" pod "Napredno"
3. Vnesite svojo prilagojeno CSS
4. Kliknite "Shrani"

Vaša prilagojena CSS bo uporabljena za vse pripomočke za komentarje na vaši spletni strani.

Nasveti

• Uporabite !important za preglasitev privzetih stilov, če je potrebno
• Ciljajte na določene selektorje, da ne boste vplivali na druge dele vaše strani
• Preizkusite svojo CSS v različnih brskalnikih za združljivost
• Pripomoček uporablja standardni CSS - niso potrebni posebni predprocesorji

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.

Spremeni barvo obrobe

Barva obrobe

Copy

1

2:root {

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

4}

5

Spremeni barvo obrobe med tipkanjem

Barva obrobe med tipkanjem

Copy

1

2:root {

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

4}

5

Zaobli vse štiri kote

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

Zaobli vse štiri kote

Copy

1

2:root {

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

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

5}

6

Kvadratni koti

Kvadratni koti

Copy

1

2:root {

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

4}

5

Uskladite z vašo blagovno znamko

Barve blagovne znamke in koti

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čne barve v temnem načinu

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

Barve obrobe v temnem načinu

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

Zakaj ne stilizirati besedilnega polja neposredno?

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.