Det följande handlar inte om att välja ett WordPress-tema, utan om att hitta CSS-stilarna i ditt nuvarande tema. Ofta uppstår ett problem i en del av layouten eller mallen. Det finns till exempel en kant som du inte vill ha mellan sidomenyn och resten av sidan. Du letar och letar men du kan inte hitta någon referens till gränsen. Vad gör vi nu?

Lekar CSS-detektiv

Vi börjar med att leka CSS-detektiv. Du vet var problemet finns, du kan bara inte hitta problemet. I exemplet ovan måste du leta efter en felaktig kant.

Begynna med att noggrant undersöka en genererad sida (eller testsida) och leta efter identifierande text i sidofältet, nära den felaktiga kanten. Låt oss säga att du i sidofältet har en rubrik som heter ”Allt om Harry”. Du vet att du hittar den titeln i sidofältet när du tittar på sidans källkod.

För att titta på en sidas källkod går du upp till menyraden i din webbläsare och väljer VIEW > PAGE SOURCE eller VIEW > SOURCE. En sida öppnas med sidans källkod.

Använd ditt praktiska detektivverktyg, Ctrl+F, för att aktivera din sökning. Skriv in ”allt om Harry” och klicka på SÖKRA. Om du inte har orden ”all about harry” i ditt inlägg kommer du troligen att hamna på det första inlägget med frasen ”all about harry”, som förmodligen finns i din sidofältare. Om inte, tryck på FIND igen tills du har hittat rätt fras i rätt område.

Om du använder Internet Explorer är en alternativ metod att använda Internet Explorers verktygsfält för utvecklare, som gör det möjligt att visuellt se och välja element, ID:er och klasser på sidan. Den visar elementen i sidans hierarki, deras CSS-attribut och kan beskriva DIV:er, tabeller osv. Du kan ladda ner verktygsfältet från Microsoft.

När du har hittat frasen är det dags att leka CSS-detektiv. Titta upp genom koden från frasen ”Allt om Harry” efter en av två saker. Det kommer att se ut ungefär så här, med ord som sidebar, menu eller sidecolumn:

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

Det här är huvudavsnittet som innehåller din sidebarmeny. Du har hittat den första misstänkte.

Öppna nu din style.css-fil och gör en ny sökning efter sidebar eller vad det nu var för namn som du upptäckte. Det identifieras vanligtvis på två sätt:

#sidebaror.sidebar

Leta i stilarna under dessa CSS-selektorer och se om det finns ett omnämnande av border, som ofta ser ut ungefär så här:

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

Där är din border, brottslingen! Om detta är den skyldige, ta bort referensen till border och du är klar.

Om det inte är det fortsätter jakten.

Ibland är den skyldige den som du minst misstänker. Kanske beror gränsen inte på den uppenbart misstänkta, sidofältet, utan på innehållsdelen. Gå tillbaka till den genererade sidans källkod och sök efter de första orden i ditt inlägg. Titta ovanför det efter något i stil med:

<div>

Det kan kallas content, page. post, maincolumn, widecolumn eller ha ett annat alias, men det bör vara den CSS-behållare som innehåller din information om inlägget. Gå nu tillbaka till formatmallen och kontrollera om det finns en ram i det avsnittet.

Friskera formatmallen

Om alla dessa misslyckas ger CSS-detektiven aldrig upp jakten. Återvänd till gömstället för alla stilar, filen style.css, och sök igenom den genom att göra en sökning på ”border” och titta noga på varje misstänkt. Notera namnet på selector ID, som sidebar, menu, content och page, och gå sedan tillbaka till den genererade sidkällan för att se om det kan vara den skyldige.

Du kan också välja den misstänkta gränsen som du har hittat i formatmallarna och klippa och klistra in den i en TXT-fil (som Notepad) som bara ligger öppen på datorn som ett skrapt anteckningsblock. Gör en anteckning om vilket selector-namn du tog bort det från så här:

Removed border: solid 2px green from #content

Spara sedan den redigerade style.css-filen och ladda upp den till din webbplats. Uppdatera det genererade testinlägget och se om den oönskade gränsen är borta. Om så är fallet har du hittat den skyldige. Om inte, gå tillbaka till Anteckningsblocket och kopiera koden och lägg tillbaka den i din style.css i avsnittet ”content”, och sätt tillbaka saker och ting där du hittade dem.

Om du hittar den skyldige, gör en liten dans, gnäll och jubla och gör andra misstänksamma och nervösa när de är i närheten av dig. CSS-detektiven löser ännu ett CSS-brott!

Mer hjälp med att lösa CSS-problem

  • CSS fixar webbläsarfel
  • CSS-problemlösning