Cele ce urmează nu se referă la alegerea unei teme WordPress, ci la găsirea stilurilor CSS în cadrul temei curente. Adesea, o problemă apare într-o parte a layout-ului sau a șablonului. De exemplu, există o margine pe care nu o doriți între meniul din bara laterală și restul paginii. Vânezi și vânezi, dar nu găsești nicio referință la bordură. Acum ce facem?

Jucând rolul de detectiv CSS

Să începem prin a juca rolul de detectiv CSS. Știți unde este problema, doar că nu o puteți găsi. În exemplul de mai sus, trebuie să vânați o margine eronată.

Începeți prin a examina cu atenție o pagină generată (sau o pagină de test) și căutați un text de identificare în bara laterală, lângă marginea eronată. Să spunem că, listat în bara laterală, aveți un titlu de articol numit „Totul despre Harry”. Știți că veți găsi acel titlu în bara laterală atunci când vizualizați codul sursă al paginii.

Pentru a vizualiza codul sursă al unei pagini, mergeți până la bara de meniu a browserului dumneavoastră și alegeți VIEW > PAGE SOURCE sau VIEW > SOURCE. Se va afișa o pagină cu codul sursă al paginii.

Utilizați instrumentul dvs. de detectiv la îndemână, Ctrl+F, pentru a activa căutarea. Scrieți „all about harry” și faceți clic pe GĂSIȚI. Sunt șanse ca, dacă nu aveți cuvintele „all about harry” în postarea dvs., vă va duce la prima afișare a frazei „all about harry”, care se află probabil în bara dvs. laterală. Dacă nu, apăsați din nou pe GĂSEȘTE până când găsiți fraza corectă în zona corectă.

Dacă folosiți Internet Explorer, o metodă alternativă este să folosiți bara de instrumente pentru dezvoltatori Internet Explorer, care vă permite să vedeți și să selectați vizual elementele, ID-urile și clasele de pe pagină. Aceasta afișează elementele din cadrul ierarhiei paginii, atributele CSS ale acestora și poate contura DIV-uri, tabele etc. Puteți descărca bara de instrumente de la Microsoft.

După ce ați găsit fraza, este timpul să vă jucați de-a detectivul CSS. Căutați în sus prin codul din fraza „Totul despre Harry” unul dintre cele două lucruri. Va arăta ceva de genul oricăruia dintre acestea, folosind cuvinte precum sidebar, menu sau sidecolumn:

<div>or<div class="sidebar">

Aceasta este secțiunea principală care conține meniul din bara laterală. Ați găsit primul suspect.

Acum, deschideți fișierul style.css și faceți o altă căutare pentru sidebar sau oricare ar fi fost numele rezultat pe care l-ați descoperit. Acesta este de obicei identificat în două moduri:

#sidebaror.sidebar

Căutați în stilurile de sub acești selectori CSS și vedeți dacă există o mențiune despre border, adesea arătând cam așa:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Aici este border-ul dumneavoastră, criminalul! Dacă acesta este vinovatul, ștergeți referința la border și puteți pleca.

Dacă nu este, vânătoarea continuă.

Uneori, vinovatul este cel pe care îl bănuiți cel mai puțin. Poate că marginea nu este cauzată de suspectul evident, bara laterală, ci de secțiunea de conținut. Reveniți la codul sursă al paginii generate și căutați primele cuvinte ale mesajului dumneavoastră. Căutați deasupra ceva de genul:

<div>

Se poate numi content, page. post, maincolumn, widecolumn, sau poate avea un alt pseudonim, dar ar trebui să fie containerul CSS care conține informațiile postului dvs. Acum, întoarceți-vă la foaia de stil și verificați dacă există o bordură în acea secțiune.

Rezolvați foaia de stil

Dacă toate acestea eșuează, detectivul CSS nu renunță niciodată la vânătoare. Întoarceți-vă la ascunzătoarea tuturor stilurilor, fișierul style.css, și percheziționați-l făcând o căutare pentru „border” și uitați-vă cu atenție la fiecare suspect. Notați numele ID-ului selectorului, cum ar fi sidebar, menu, content și page, și apoi întoarceți-vă la sursa paginii generate pentru a vedea dacă acesta ar putea fi vinovatul.

Puteți, de asemenea, să selectați suspectul border pe care l-ați găsit în foaia de stil și să-l tăiați și să-l lipiți într-un fișier TXT (cum ar fi Notepad) care să stea deschis pe computer ca un bloc de notițe. Notați din ce nume de selector l-ați eliminat, astfel:

Removed border: solid 2px green from #content

Apoi salvați fișierul style.css editat și încărcați-l pe site-ul dvs. Actualizați postarea de test generată și vedeți dacă marginea nedorită a dispărut. Dacă da, ați găsit vinovatul. Dacă nu, reveniți la Notepad și copiați codul și puneți-l înapoi în style.css în secțiunea „content”, punând lucrurile acolo unde le-ați găsit.

Dacă ați găsit vinovatul, faceți un mic dans, scânciți și aplaudați și faceți-i pe ceilalți să fie suspicioși și nervoși când sunt în preajma dvs. Detectivul CSS rezolvă o altă crimă CSS!

Mai mult ajutor pentru rezolvarea problemelor CSS

  • CSS Fixarea erorilor de browser
  • Rezolvarea problemelor CSS

.