CSS kodovi služe za “ulepšavanje” WP sajta ili za ubacivanje dodatnih opcija koje nisu moguće u blok editoru.

CSS – Cascading Style Sheets – Kaskadni Listovi Stilova

Za ubacivanje CSS kodova u WP sajt ne treba da znaš programiranje i kodiranje. Sve je po sistemu Copy – Paste.

Treba “samo” da nađeš na internetu CSS kod koji ti treba, da ga kopiraš i da ga nalepiš u svoj WordPress sajt.

Jedan od izvora za nalaženje CSS kodova je i moj sajt.

Evo kako se radi ubacivanje CSS kodova u WordPress sajt.

Ubacivanje CSS kodova u WordPress sajt za početnike

Pomoću CSS kodova možeš da uradiš razne stvari na WP sajtu, koje nisu moguće u WP blok editoru (Gutenberg).

Na sajt možeš da ubaciš više CSS kodova.

Klikni ispod i pogledaj video. Detaljno objasnio ubacivanje CSS kodova u WordPress sajt, za početnike, sa konkretnim primerima.

• Kako ubaciti CSS kodove na WP sajt

Stavi kursor miša na TooltipOvo je Tooltip. Može imati Link pa čak i sliku 
kao i uređivanje izgleda. da vidiš kako izgleda. Ako gledaš na telefonu onda klikni.

2 bitne stvari za ubacivanje CSS kodova u WP sajt

Dve bitne stvari vezane za ubacivanje CSS kodova na sajt.

Ubacivanje CSS kodova u klasične WordPress teme

CSS kodovi se u klasične WordPress teme ubacuju preko opcije Appearance / Customize. Klikni na sliku da je uvećaš.

Ubacivanje CSS kodova u blok WordPress teme

CSS kodovi se u blok WordPress teme ubacuju preko opcije Appearance / Editor. Klikni na sliku da je uvećaš.

CSS kodovi bez CSS klase

Kada CSS kod služi za uređivanje samo jednog konkretnog elementa, onda nema CSS klasu.

Kada na sajt uneseš CSS kod bez CSS klase promena se automatski primenjuje na tom konkretnom elementu.

• Kako dodati senke na WordPress blokove

U videu na početku dao sam primer uređivanja forme za komentar na dnu blog posta. Čim uneseš odgovarajući CSS kod na sajt promena se automatski primenjuje na toj formi.

Taj CSS kod nema CSS klasu jer se odnosi na konkretan element, a to je forma za komentar na dnu blog posta.

CSS kodovi sa CSS klasom

Kada CSS kod služi za uređivanje više elemenata, onda ima i CSS klasu. CSS klasa je “naziv” tog CSS koda.

Kada na sajt uneseš CSS kod sa CSS klasom, ne dešava se nikakva promena. Da bi se desila promena treba da uneseš CSS klasu u pojedinačni element koji želiš menjati.

CSS klasa “aktivira” CSS kod koji je unet na sajt. Tada se CSS kod koji je unet primenjuje samo na taj konkretan element.

• Kako ubaciti dugme u meni WP sajta

Evo primera. Na sajt sam uneo CSS kod sa CSS klasom, koji pravi okvir oko bilo kog teksta. On se ne primenjuje automatski, jer bi onda svaki tekst imao okvir.

Na početku tog CSS koda je naziv text-border. To je CSS klasa tog konkretnog CSS koda za unos okvira oko teksta.

Kada želim okvir oko teksta onda tom konkretnom tekstu dodam CSS klasu text-border. I samo taj tekst ima okvir.

Ovo je tekst bez CSS klase i zato nema nikakav okvir.

Na ovaj tekst sam ubacio CSS klasu text-border koja “aktivira” CSS kod za okvir. Zato tekst ima okvir.

Dodavanje CSS klase

CSS klasa se dodaje tako što na stranici koju edituješ klikneš na element koji želiš, da ga selektuješ. Zatim u desnoj traci otvoriš Advanced opciju i na dnu uneseš CSS klasu.

Na dnu piše da možeš da ubaciš i više CSS klasa za isti element. Samo treba da ih odvojiš razmakom (space na tastaturi).

Na sajt sam ubacio CSS kod koji pravi okvir oko teksta.
Taj CSS kod ima CSS klasu text-border.

Na sajt sam ubacio CSS kod za Typewriter Effect za tekst.
Taj CSS kod ima CSS klasu typewriter.

Slede PRIMERI istog teksta.

• Bez CSS klase.

Typewriter Effect

• Sa jednom CSS klasom: text-border

• Sa 2 CSS klase istovremeno: text-border typewriter

Editovanje CSS kodova

Vrlo bitna stvar koju treba da znaš. Kad na internetu nađeš CSS kod koji želiš i kada ga ubaciš u svoj WordPres sajt, onda možeš dodatno da edituješ CSS kod unet na sajt.

CSS kod za ubacivanje okvira oko teksta

Ovaj CSS kod možeš da selektuješ, kopiraš i ubaciš
u svoj WP sajt. Onda možeš da ga edituješ kako želiš.

Može da se poveća debljina okvira. Gde piše border-width: 1px; selektuješ samo broj 1 i ukucaš broj 2 ili 3.

Može da se promeni boja okvira. Tamo gde piše border-color: #A8B8CD; selektuješ samo ovu šifru iza znaka # i ukucaš šifru boje koju želiš. Šifra za crnu boju je 000000.

Može se promeniti zaobljenost okvira. Gde piše border-radius: 0px; selektuješ samo nulu i ukucaš broj 5.

Može se promeniti pozadina teksta. Gde piše background-color: transparent; selektuješ reč transparent i ukucaš šifru boje koju želiš. Na primer #F7F8F9 (svetlo siva boja).

Dupliranje CSS kodova

Na WordPress sajtu možeš da imaš više različitih CSS kodova, za razne opcije koje želiš da postigneš.

Gore imaš CSS kod za okvir teksta u kome piše background-color: #FFFFFF; što znači da je pozadina teksta bela.

Možeš da dupliraš taj CSS kod, ostaviš sve ostale opcije iste i promeniš pozadinu. Umesto #FFFFFF staviš drugu boju.

U tom dupliranom CSS kodu na početku umesto text-border staviš text-border-1. Tako dobijaš novu CSS klasu.

Na 1 tekst ubaciš CSS klasu text-border i dobiješ ovo.

Na 2. tekst ubaciš CSS klasu text-border-1 i imaš ovo.

Čuvanje CSS kodova

Svaki put kada promeniš WordPress temu na svom sajtu izgubiće se svi CSS kodovi ubačeni u tu WP temu.

Zato je bitno da sve CSS kodove imaš sačuvane u kompjuteru i na Google disku, u jednom običnom Word dokumentu.

Tako da uvek možeš da ih kopiraš iz tog Word dokumenta i da ih ubaciš u novu WordPress temu na tvom sajtu.

Zaključak

Ubacivanjem CSS kodova u WordPress sajt možeš postići razne opcije i efekte. Za to ne treba da znaš kodiranje.

Treba na netu da nađeš CSS kod koji želiš, da ga kopiraš i nalepiš u svoj WP sajt. Ako treba, dodaš CSS klasu tog CSS koda na element na koji želiš da primeniš efekat tog koda.

Klikom na dugme iznad dokument će automatski biti preuzet u tvoj kompjuter.

Jedan od izvora za nalaženje CSS kodova je i moj sajt. Vidi kategoriju blog postova – CSS kodovi za WordPress sajt.

Preporučeni video

• Kako ubaciti dugme u meni sajta

Prijavi se (subscribe) na moj YouTube kanal i klikni na zvonce za obaveštenje kad objavim video.