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

Obroba okoli polja za komentar je sestavljena iz lastne obrobe besedilnega polja in nekaj tankih črt, ki jih vtičnik nariše okoli njega. Če želite spremeniti njeno barvo ali zaobljenost kotov, nastavite te CSS spremenljivke namesto da oblikujete textarea neposredno. Spremenljivke hkrati preoblikujejo celotno obrobo, zato se koti in barve vedno ujemajo.

CSS dodajte v polje Custom CSS na strani za prilagoditev vtičnika, ali ga posredujte z možnostjo customCSS. Nastaviti morate le spremenljivke, ki jih želite spremeniti.

Prav tako lahko uporabite pomočnik Comment box border tik pod poljem Custom CSS, ki ta CSS zapiše namesto vas.

Sprememba barve obrobe

Barva obrobe

Copy

1

2:root {

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

4}

5

Sprememba barve obrobe med tipkanjem

Barva obrobe med tipkanjem

Copy

1

2:root {

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

4}

5

Zaobljenje vseh štirih kotov

Privzeto je zgornji levi kot kvadraten. Nastavite obe spremenljivki za polmer, da zaoblite vse štiri kote enako:

Zaobljenje vseh štirih kotov

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

Prilagoditev vaši blagovni znamki

Barve in koti blagovne znamke

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

Ko je vtičnik v temnem načinu, ima razred dark, zato lahko za temni način nastavite različne vrednosti:

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 oblikovati besedilnega polja neposredno?

Vtičnik del obrobe polja za komentar nariše sam, okoli besedilnega polja. Če nastavite border-color ali border-radius le na textarea, te črte obdržijo privzeti slog in obroba izgleda neusklajeno, na primer kvadratna črta, ki teče skozi zaobljeni kot. Zgornje spremenljivke spremenijo oboje hkrati.