5 coduri CSS super simple pentru a vă ajuta să vă personalizați site-ul WordPress
CSS este greu!
Sună ca ceva ce ai putea spune? Nu ați fi singurul. CSS (sau Cascading Style Sheet) este un limbaj de codare care poate fi un bebeluș greu de manevrat.
Cu toate acestea, a spune că CSS este greu este un pic cam dur. La fel ca orice alt limbaj, CSS poate fi puțin complicat de înțeles la început, dar odată ce înțelegeți elementele de bază, lucrurile încep să se așeze la locul lor.
Cel mai bun mod de a învăța CSS este să înțelegeți ce este și cum funcționează. Apoi, puteți învăța câteva fragmente de cod de bază pentru a vă ajuta să înțelegeți puțin mai bine această înțelegere inițială și veți începe să proiectați în cel mai scurt timp!
Postul nostru va face exact acest lucru.
Ce este CSS?
Sigur, CSS înseamnă Cascading Style Sheet, dar toată lumea vă va spune asta. Cu toate acestea, asta nu prea ajută, nu-i așa?
Există o modalitate mai ușoară de a înțelege ce este.
Gândiți-vă la HTML ca la cadrul unei case, iar CSS ca la vopseaua de la exterior. Când vopsiți finisajele casei sau vopsiți terasa din față, acest lucru schimbă cadrul casei în sine?
Nu, nu o face. În schimb, schimbă pur și simplu aspectul lucrurilor. Fundația și cadrul casei rămân aceleași.
Asta este ceea ce este CSS.
Acesta modifică aspectul site-ului dumneavoastră, dar nu perturbă fundația sau nucleul acestuia.
Care casă are vopsea pe ea. Fiecare temă WordPress folosește CSS.
Acestea lucrează împreună pentru a crea un site web și puteți folosi câteva fragmente de cod CSS destul de simple pentru a schimba așa-numita „vopsea” a temei dumneavoastră.
De fapt, ați putea fi surprins cât de ușor este.
Simple CSS Edit One: Editarea tipului de font și o lecție rapidă despre scrierea codului
Când folosiți o temă precum Genesis Framework, pentru a schimba ceva la fel de simplu ca și fontul folosit pe site-ul dumneavoastră este nevoie de ceva CSS. Dar nu vă faceți griji. Nu este chiar atât de greu de făcut.
Pentru a face orice modificare CSS în tema dvs., veți avea nevoie mai întâi de o zonă CSS personalizată pentru a face aceste ajustări. Nu modificați foaia de stil care vine încorporată în tema dvs.
În schimb, utilizați un plugin precum opțiunea Custom CSS care vine încărcată în Jetpack. Orice modificare CSS pe care o faceți acolo va anula CSS-ul predeterminat al temei dumneavoastră.
Înainte de a putea edita fontul, trebuie să vă dați seama ce zonă doriți să editați.
Există 7 zone principale în care puteți edita fontul:
- Toate cele 6 tipuri de fonturi de antet
- Fontul corpului
Marcarea etichetelor pentru acestea este simplă. De exemplu, dacă doriți să editați fontul Heading 1 care apare pe site-ul dvs. veți folosi tag-ul, h1. Dacă ați dori să schimbați fontul Heading 2, tag-ul ar fi, h2 și așa mai departe.
Iată un exemplu de cum să scrieți codul CSS pentru a schimba fontul Heading 1:
h1 { font-family: 'Georgia'; }
Acum este adevărat, ați putea încerca să copiați și să lipiți asta, dar vreau ca voi să înțelegeți mai bine cum funcționează cu adevărat.
Prima parte scrisă (h1) este subiectul pe care doriți să îl schimbați. Acest simbol ({ ) deschide linia dvs. de cod și acesta ( } ) o închide.
Bine, bine.
Probabil că încă sună confuz, dar când învățam CSS am învățat un truc util pentru a-mi aminti cum să scriu corect CSS. Cam așa:
h1 { deschide ușa dulapului său
În căutarea a ceva în care să se schimbe: ‘El găsește ceea ce vrea’;
Și apoi închide ușa}
Întorcându-ne la subiect; iată un alt exemplu despre cum puteți face modificări la fontul dumneavoastră.
body { font-family: 'Arial'; }
Prin schimbarea elementului din h1 în body, acum i-am spus foii de stil că vreau să schimb fontul body care apare în postări și pagini cu fontul Arial.
Este destul de simplu, nu?
Dacă tema dvs. este activată de Google Font, puteți chiar să folosiți fonturile de acolo pe site-ul dvs. de asemenea.
Simple CSS Edit Two: Edit Font Color
Acest mic truc CSS este o modalitate frumoasă de a schimba culoarea fontului din meniu sau culoarea fontului din corp. La fel ca în cazul fragmentelor de cod scrise mai sus, este nevoie doar de câteva linii scurte de cod pentru a schimba cu adevărat lucrurile.
Să spunem că vreau să schimb culoarea fontului meu Heading 2 în ceva diferit. Pot face acest lucru urmând o schemă similară cu cea pe care am făcut-o înainte (vă amintiți povestea?), dar cu liniile principale de cod schimbate puțin. Așa cum urmează:
h2 { color: #4f4f4f; }
Observați că subiectul este definit ca h2 și avem în continuare etichetele de deschidere și închidere ({}), însă modul în care este scris codul este puțin diferit față de cel de mai sus, când am scris codul pentru o schimbare de font.
Dincolo de fontul care trebuia închis prin paranteze, (‘ ‘) elementul de culoare hexagonală nu are nevoie de așa ceva.
Acum, nu trebuie să scrieți codul pentru același subiect din nou și din nou pentru a schimba anumite aspecte ale acestuia. Puteți combina codul pentru același subiect pentru ca lucrurile să fie mai ușor de găsit și de modificat în viitor. De exemplu, puteți combina Font și Font Color în aceeași linie de cod.
body { font-family: 'Roboto'; color: #4f4f4f; }
Vezi cum am făcut asta?
Am două linii de cod în interiorul acelei singure linii de subiect. Atunci când trebuie să faceți mai multe modificări la un singur subiect, scrierea codului astfel vă va economisi timp. Doar asigurați-vă că închideți acele linii individuale de cod cu un punct și virgulă (;) înainte de a trece la următoarea linie.
nota: pentru a vă ajuta să vă amintiți să faceți acest lucru, gândiți-vă la punctul și virgulă ca la un punct la sfârșitul propoziției. Nu încheiați niciodată o propoziție fără punct. Nu terminați niciodată o linie de cod este CSS fără punct și virgulă.
Simple CSS Edit Three: Culoarea fundalului și o unealtă de browser pe care nici nu știai că o ai
Modificarea culorii anumitor lucruri de pe site-ul tău este un alt truc CSS foarte ușor. Tot ce trebuie să știți este elementul sau subiectul pe care doriți să îl schimbați.
Un instrument la îndemână pe care mulți designeri îl folosesc – inclusiv eu – este instrumentul Inspect Element din browserul nostru Google. Acesta este un minunat prea pentru a încerca să găsiți subiectul potrivit pentru a schimba și defini.
Pentru a găsi acest lucru, pur și simplu faceți dublu clic pe mouse pentru a afișa opțiunile, așa cum puteți vedea mai jos. Selectați Inspect Element, iar acum puteți căuta elementele editabile ale site-urilor dvs. web.
Vezi această imagine aici?
Am un element de meniu evidențiat într-o culoare diferită de restul meniului meu pentru a sta în picioare. Pentru a face acest lucru, am folosit instrumentul Inspect Element Tool pentru a-mi da seama care este numele corect pe care trebuie să-l editez.
Acum, pe măsură ce mă deplasez peste elementele de meniu, numele de cod real care îi este atribuit va apărea în evidențele mele. Cel pe care îl modific avea numele de: #menu-item-473 (Puteți vedea că acesta este numele lui în caseta galbenă. Numele său este evidențiat în albastru.)
Acesta este numele subiectului pe care am vrut să-l schimb. Pentru a schimba culoarea de fundal a acelui element de meniu, încep linia cu numele acestuia și declar că vreau să schimb fundalul, astfel:
#menu-item-473 { background-color: #D65050; }
Încă o dată, încep prin a spune foii de stil subiectul pe care vreau să-l schimb (#menu-item-473) și apoi îi spun ce să schimbe (background-color) și în ce să schimbe (#D65050).
Ceea ce decideți să schimbați culoarea de fundal va avea un nume diferit de acesta, dar, din fericire, opțiunea Inspect Element din browserul dvs. va face ca găsirea să fie mult mai ușoară.
Un alt lucru grozav despre Google Inspect Element Tool este că puteți edita lucrurile în timp real pentru a obține lucrurile exact cum trebuie, iar apoi puteți copia și lipi toată munca de editare de acolo, în foaia dvs. de stil personalizată CSS. Vorbim despre un economizor de timp!
Simple CSS Edit Four: Float
Câteodată, este plăcut să poți face ceva puțin diferit cu meniul principal sau cu widgeturile predefinite de pe site-ul tău. Poate că ați dori să luați, un element de meniu și să îl plasați mai la dreapta decât pe celelalte elemente, cam cum am făcut eu cu meniul ilustrat mai sus. (De asemenea, ilustrat mai jos în lățime completă.)
Pentru a face acest lucru, puteți utiliza fragmentul de cod Float pentru a face exact acest lucru. La fel ca în pașii de mai sus, ar trebui să utilizați instrumentul Inspect Element Tool pentru a găsi numele subiectului pe care doriți să îl modificați. Cel ilustrat aici este același cu cel menționat mai sus. (#menu-item-473)
Pentru a face ca acest element să se deplaseze, dar să arate în continuare frumos pe un ecran de mobil, acesta este codul pe care l-am scris:
#menu-item-473 { background-color: #D65050; float: right; }
Serios, a fost atât de ușor. Acum am un element de meniu care iese în evidență, ceea ce aveam nevoie să facă. De asemenea, puteți aplica acest lucru și la alte lucruri în afară de elementele de meniu.
De exemplu, dacă aveți un widget pe care ați dori să îl repoziționați, puteți folosi float: right; sau float: left; fragmentul de cod pentru a schimba locul în care este afișat widget-ul.
Este nevoie de ceva timp și ajustare, dar CSS devine mai ușor de folosit cu cât vă jucați mai mult cu el.
Simple CSS Edit Five: Alinierea textului
Alinierea textului dvs. este ceva ce puteți face într-o postare, sigur. Dar cum rămâne cu titlurile widgeturilor dvs. sau ceva de genul acesta?
Puteți folosi acest cod CSS pentru a alinia cu ușurință titlul textului widgeturilor dvs.
Utilizez Genesis Framework pentru site-urile mele web și acesta este codul de care a fost nevoie pentru a alinia titlurile widgeturilor mele:
.footer-widgets .widget-title { text-align: center; }
Numele elementului sau al subiectului din tema dvs. poate fi ușor diferit de acesta, dar ați prins ideea.
Acest mic cod va menține centrat textul din titlurile widgeturilor mele de subsol și, din moment ce proclam .footer-widgets împreună cu .widget-title, doar titlurile de subsol cu centrare.
Așa că asta este! 5 moduri super simple prin care vă puteți modifica tema folosind CSS! CSS este ca orice alt limbaj. Este greu la început, dar odată ce treci peste acea cocoașă inițială de a înțelege, este o briză.
.