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

Okvir oko polja za komentar čine sami okvir tekstualnog područja plus nekoliko tankih linija koje vidžet iscrtava oko njega. Da biste promenili boju ili zaobljenost uglova, postavite ove CSS promenljive umesto da stilizujete textarea direktno. Promenljive restilizuju sve delove okvira odjednom, tako da se uglovi i boje uvek poklapaju.

Dodajte CSS u polje Custom CSS na stranici za prilagođavanje vidžeta, ili ga prosledite kroz opciju customCSS. Potrebno je da postavite samo promenljive koje želite da promenite.

Takođe možete koristiti pomoćnik Comment box border odmah ispod polja Custom CSS, koji ovaj CSS napiše umesto vas.

Promena boje okvira

Boja okvira

Copy

1

2:root {

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

4}

5

Promena boje okvira dok kucate

Boja okvira dok kucate

Copy

1

2:root {

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

4}

5

Zaobljavanje sva četiri ugla

Podrazumevano je gornji levi ugao kvadratan. Postavite obe promenljive za poluprečnik da biste zaoblili sva četiri ugla isto:

Zaobljavanje sva četiri ugla

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

Usklađivanje sa brendom

Boje i uglovi brenda

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

Kada je vidžet u tamnom režimu, ima dark klasu, tako da možete postaviti različite vrednosti za tamni režim:

Boje okvira 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 tekstualno područje direktno?

Vidžet sam iscrtava deo okvira polja za komentar, oko tekstualnog područja. Ako postavite border-color ili border-radius samo na textarea, te linije zadržavaju podrazumevani stil i okvir deluje neusklađeno, na primer kvadratna linija koja prolazi kroz zaobljeni ugao. Gore navedene promenljive menjaju oba odjednom.