A következőkben nem a WordPress téma kiválasztásáról van szó, hanem a CSS stílusok megtalálásáról a jelenlegi témán belül. Gyakran előfordul, hogy a probléma az elrendezés vagy a sablon egy részében jelentkezik. Például van egy olyan szegély, amit nem szeretnél az oldalsáv menüje és az oldal többi része között. Vadászol és vadászol, de nem találsz semmilyen hivatkozást a szegélyre. Most mi legyen?

CSS-nyomozósdit játszunk

Kezdjük a CSS-nyomozósdit. Tudod, hol van a probléma, csak nem találod a problémát. A fenti példában egy hibás szegélyre kell vadászni.

Kezdje azzal, hogy alaposan megvizsgál egy generált oldalt (vagy tesztoldalt), és keressen valami azonosító szöveget az oldalsávban, a hibás szegély közelében. Tegyük fel, hogy az oldalsávban szerepel egy “Minden Harryről” című bejegyzés címe. Tudod, hogy ezt a címet megtalálod az oldalsávban, ha megnézed az oldal forráskódját.

Az oldal forráskódjának megtekintéséhez menj fel a böngésződ menüsorába, és válaszd a VIEW > PAGE SOURCE vagy a VIEW > SOURCE parancsot. Egy oldal fog felugrani, amely az oldal forráskódját tartalmazza.

A keresés aktiválásához használja a praktikus nyomozó eszközt, a Ctrl+F billentyűkombinációt. Írja be, hogy “all about harry”, és kattintson a FIND gombra. Jó eséllyel, hacsak nem szerepelnek a “all about harry” szavak a hozzászólásodban, akkor a “all about harry” kifejezés első megjelenítéséhez fog vezetni, ami valószínűleg az oldalsávodban van. Ha nem, nyomja meg újra a FIND gombot, amíg meg nem találja a megfelelő kifejezést a megfelelő területen.

Ha Internet Explorert használ, egy alternatív módszer az Internet Explorer fejlesztői eszköztárának használata, amely lehetővé teszi az oldalon lévő elemek, azonosítók és osztályok vizuális megjelenítését és kiválasztását. Megjeleníti az oldal hierarchiáján belüli elemeket, azok CSS-attribútumait, és körvonalazhatja a DIV-eket, táblázatokat stb. Az eszköztár letölthető a Microsofttól.

Amikor megtalálta a mondatot, itt az ideje, hogy CSS detektívet játsszon. A “All About Harry” kifejezésből a kódon keresztül két dolog közül az egyiket keresse meg. Valahogy így fog kinézni, olyan szavakkal, mint sidebar, menu vagy sidecolumn:

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

Ez a fő szakasz, amely az oldalsáv menüt tartalmazza. Megtaláltad az első gyanúsítottat.

Most nyisd meg a style.css fájlodat, és végezz egy újabb keresést a sidebarra, vagy bármi is volt a kapott név, amit felfedeztél. Általában kétféleképpen azonosítható:

#sidebaror.sidebar

Nézd meg a stílusokban ezen CSS-szelektorok alatt, hogy van-e említés a borderről, ami gyakran valahogy így néz ki:

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

Itt van a border, a bűnöző! Ha ez a bűnös, töröld a borderre való hivatkozást, és máris mehetsz.

Ha nem, akkor a vadászat folytatódik.

Máskor a bűnös az, akire a legkevésbé gyanakszol. Lehet, hogy a határt nem a nyilvánvaló gyanúsított, az oldalsáv okozza, hanem a tartalmi rész. Térj vissza a generált oldal forráskódjához, és keresd meg a hozzászólásod első szavait. Keress felette valami olyasmit, mint:

<div>

Ez lehet a content, page. post, maincolumn, widecolumn, vagy más alias, de ennek kell lennie a CSS konténernek, amely a posztod információit tartalmazza. Most menj vissza a stíluslaphoz, és ellenőrizd, hogy van-e keret abban a részben.

Kockáztasd a stíluslapot

Ha mindezek nem sikerülnek, a CSS-nyomozó sosem adja fel a vadászatot. Térjünk vissza az összes stílus rejtekhelyére, a style.css fájlhoz, és motozzuk meg azt a “border” kereséssel, és nézzünk meg alaposan minden gyanúsítottat. Jegyezze meg a szelektor azonosítóját, például az oldalsáv, a menü, a tartalom és az oldal nevét, majd menjen vissza a generált oldal forrásához, és nézze meg, hogy az lehet-e a bűnös.

A stíluslapon talált border-gyanús elemet is kiválaszthatja, majd kivághatja és beillesztheti egy TXT-fájlba (például a Notepadba), amely csak úgy nyitva van a számítógépén, mint egy karcolós jegyzettömb. Jegyezd fel, hogy melyik szelektor nevéről távolítottad el, így:

Removed border: solid 2px green from #content

Ezután mentsd el a szerkesztett style.css-t, és töltsd fel az oldaladra. Frissítse a generált tesztbejegyzést, és nézze meg, hogy eltűnt-e a nem kívánt szegély. Ha igen, akkor megtaláltad a bűnösöket. Ha nem, térj vissza a Jegyzettömbhöz, másold ki a kódot, és tedd vissza a style.css-be a “content” részbe, visszahelyezve a dolgokat oda, ahol találtad.

Ha megtaláltad a bűnösödet, táncolj egy kicsit, visíts és ujjongj, és tegyél másokat gyanakvóvá és idegessé, ha a közeledben vannak. A CSS detektív újabb CSS-bűntényt old meg!

Még több CSS hibaelhárítási segítség

  • CSS böngészőhibák javítása
  • CSS hibaelhárítás