Seuraavassa ei ole kyse WordPress-teeman valinnasta, vaan CSS-tyylien löytämisestä nykyisestä teemasta. Usein ongelma ilmenee yhdessä ulkoasun tai mallin osassa. Esimerkiksi sivupalkin valikon ja muun sivun välillä on raja, jota et halua. Metsästät ja metsästät, mutta et löydä mitään viittausta rajaukseen. Mitä nyt?

Leikitään CSS-etsivää

Aloitetaan leikkimällä CSS-etsivää. Tiedät, missä ongelma on, et vain löydä sitä. Yllä olevassa esimerkissä sinun täytyy metsästää virheellistä reunusta.

Aloita tutkimalla huolellisesti luotua sivua (tai testisivua) ja etsi sivupalkista jotain tunnistavaa tekstiä, joka on lähellä virheellistä reunusta. Oletetaan, että sivupalkissa on listattuna postauksen otsikko ”All About Harry”. Tiedät, että löydät tuon otsikon sivupalkista, kun tarkastelet sivun lähdekoodia.

Katsellaksesi sivun lähdekoodia, siirry selaimesi valikkoriville ja valitse VIEW > PAGE SOURCE tai VIEW > SOURCE. Avautuu sivu, jossa on sivun lähdekoodi.

Käyttäkää kätevää etsintätyökalua, Ctrl+F, aktivoidaksenne haun. Kirjoita ”all about harry” ja napsauta FIND. Todennäköisesti, ellei sinulla ole sanoja ”all about harry” postauksessasi, se vie sinut lauseen ”all about harry” ensimmäiseen esiintymään, joka on luultavasti sivupalkissasi. Jos näin ei ole, paina uudelleen FIND, kunnes olet löytänyt oikean lauseen oikealta alueelta.

Jos käytät Internet Exploreria, vaihtoehtoinen menetelmä on käyttää Internet Explorerin kehittäjätyökaluriviä, jonka avulla voit visuaalisesti nähdä ja valita sivulla olevat elementit, tunnukset ja luokat. Se näyttää elementit sivun hierarkiassa, niiden CSS-attribuutit ja voi hahmotella DIV:t, taulukot jne. Voit ladata työkalupalkin Microsoftilta.

Kun olet löytänyt lauseen, on aika leikkiä CSS-etsivää. Etsi koodin kautta lauseesta ”All About Harry” jompikumpi kahdesta asiasta. Se näyttää jommalta kummalta näistä, käyttäen sanoja kuten sidebar, menu tai sidecolumn:

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

Tämä on pääosa, joka sisältää sivupalkkivalikon. Olet löytänyt ensimmäisen epäillyn.

Avaa nyt style.css-tiedostosi ja tee toinen haku hakusanalle sidebar tai mikä tahansa tuloksena oleva nimi olikaan, jonka löysit. Se tunnistetaan yleensä kahdella tavalla:

#sidebaror.sidebar

Katso tyyleistä näiden CSS-selektoreiden alta, onko siellä maininta border, joka usein näyttää jotakuinkin tältä:

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

Tässä on border, rikollinen! Jos tämä on syyllinen, poista viittaus borderiin ja olet valmis.

Jos se ei ole, metsästys jatkuu.

Joskus syyllinen on se, jota vähiten epäilet. Ehkä rajaus ei johdu ilmeisestä epäillystä, sivupalkista, vaan sisältöosiosta. Palaa luodun sivun lähdekoodiin ja etsi viestisi ensimmäiset sanat. Etsi sen yläpuolelta jotain sellaista kuin:

<div>

Se voi olla nimeltään content, page. post, maincolumn, widecolumn tai sillä voi olla jokin muu peitenimi, mutta sen pitäisi olla se CSS-säiliö, joka pitää sisällään viestisi tiedot. Palaa nyt takaisin tyylitiedostoon ja tarkista, onko kyseisessä osiossa reunus.

Riski tyylitiedostossa

Jos kaikki nämä epäonnistuvat, CSS-etsivä ei koskaan luovu metsästyksestä. Palaa kaikkien tyylien piilopaikkaan, style.css-tiedostoon, ja tutki se tekemällä haku hakusanalla ”border” ja katso tarkkaan jokainen epäilty. Merkitse muistiin valitsijan ID-nimi, kuten sivupalkki, valikko, sisältö ja sivu, ja palaa sitten luotuun sivulähteeseen katsomaan, voisiko se olla syyllinen.

Voit myös valita tyylitiedostosta löytämäsi border-epäillyn ja leikata ja liittää sen TXT-tiedostoon (kuten Muistiinpanotiedostoon), joka on avoinna koneellasi kuin tyhjässä muistiinpanovälineessä. Merkitse muistiin, mistä valitsimen nimestä poistit sen näin:

Removed border: solid 2px green from #content

Tallenna sitten muokattu style.css ja lataa se sivustollesi. Päivitä luotu testipostaus ja katso, onko ei-toivottu reunus hävinnyt. Jos näin on, löysit syyllisen. Jos ei, palaa Notepadiin ja kopioi koodi ja laita se takaisin style.css:ään ”content”-osioon, laittaen asiat takaisin sinne, mistä ne löysitkin.

Jos löydät syyllisen, tanssi vähän tanssia, vinku ja hurraa ja tee muutkin epäluuloisiksi ja hermostuneiksi, kun he ovat lähelläsi. CSS-etsivä ratkaisee jälleen yhden CSS-rikoksen!

Lisää CSS-vianetsintäapua

  • CSS Selainvirheiden korjaaminen
  • CSS-vianetsintä