Vodič za prilagođeni stil

Kako prilagoditi stilove widgeta komentara

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

Opcija 1: Putem parametra customCSS

Proslijedite svoj prilagođeni CSS kao string u parametar customCSS pri inicijalizaciji 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 administratorske nadzorne ploče

1. Idite na stranicu za prilagodbu widgeta u svojoj administratorskoj nadzornoj ploči
2. Pomaknite se do odjeljka "Custom CSS" pod "Advanced"
3. Unesite svoj prilagođeni CSS
4. Kliknite "Save"

Vaš prilagođeni CSS primijenit će se na sve widgete za komentare na vašoj web-lokaciji.

Savjeti

• Koristite !important za nadjačavanje zadanim stilovima ako je potrebno
• Ciljajte specifične selektore kako biste izbjegli utjecaj na druge dijelove vaše web-lokacije
• Testirajte svoj CSS u različitim preglednicima radi kompatibilnosti
• Widget koristi standardni CSS - nisu potrebni posebni preprocessori

Rub oko okvira za komentar sastoji se od vlastitog ruba tekstualnog područja plus nekoliko tankih linija koje widget crta oko njega. Za promjenu njegove boje ili zaobljenosti kutova, postavite ove CSS varijable umjesto da stilizirate textarea izravno. Varijable ponovno stiliziraju svaki dio ruba odjednom, tako da se kutovi i boje uvijek podudaraju.

Dodajte CSS u okvir Custom CSS na Widget Customization page, ili ga proslijedite putem opcije customCSS. Trebate postaviti samo varijable koje želite promijeniti.

Također možete koristiti pomoćnik Comment box border odmah ispod okvira Custom CSS, koji za vas generira ovaj CSS.

Promijeni boju ruba

Boja okvira

Copy

1

2:root {

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

4}

5

Promijeni boju ruba tijekom tipkanja

Boja okvira tijekom tipkanja

Copy

1

2:root {

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

4}

5

Zaobli sva četiri kuta

Prema zadanim postavkama gornji lijevi kut je kvadrat. Postavite obje varijable radijusa da zaokružite sva četiri kuta jednako:

Zaobli sva četiri kuta

Copy

1

2:root {

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

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

5}

6

Kvadratni kutovi

Kvadratni kutovi

Copy

1

2:root {

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

4}

5

Uskladite s vašim brendom

Boje brenda i kutovi

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 načinu

Kada je widget u tamnom načinu, ima klasu dark, pa možete postaviti različite vrijednosti za tamni način:

Boje rubova tamnog načina

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 stilizirati tekstualno područje izravno?

Widget crta dio ruba okvira za komentar sam, oko tekstualnog područja. Ako postavite border-color ili border-radius samo na textarea, te linije zadržavaju zadani stil i rub izgleda neusklađeno, na primjer kvadratna linija koja prolazi kroz zaobljeni kut. Varijable iznad mijenjaju oba odjednom.