Nästa steg är att hitta och utforma id-t content (som visar innehållet från index.php, page.php, singel.php). På adminsidan under editorn välj Main Index Template och på rad 5 hittar du id-t content som är inbakad i koden (titta på bilden nedan). Det kan kännas lite förvirrande att se så mycket php-kod men där inbakad hittar du html-koderna också. Det är just därför vi använder Granska komponent verktyget istället för att leta rätt på olika html-taggar i olika php-filer (vi tar dock en titt då och då för att lära känna tema-filerna):
Nu ska vi hitta samma id med granska komponent och se om det redan finns css för taggen i style.css. Besök din sida och leta rätt på id-t content. Som du ser på bilden nedan (och det är ungefär samma resultat som du får) finns det ingen css.
Nu måste vi faktiskt planera lite för att kunna beräkna bredd på både id-t content (som visar olika typer av innehåll: inlägg, sidor, kategorier, osv) och sedan även id-t sidebar.
Vi vet att vi har för #page-wrap 960px i bredd + 20px padding (10px på vänster och 10px på höger sidan). Den totala bredden är alltså 980px och där måste både id-t content och id-t sidebar få plats. Jag bestämt mig för att id-t content ska ha 650px i bredden (tänk då att det är inklusive padding, margin och border) och 330px för id-t sidebar (samma gäller även här för padding, margin och border). Skriver följande css i style.css:
#content {
width: 634px;
margin-right: 15px;
border-right: 1px solid #615f7d;
float: left;
}
Sedan anger vi följande för #sidebar (hitta taggen i style.css med hjälp av granska komponent):
#sidebar {
width: 300px;
float: right;
}
Vi har räknar bredden 330px innan men för att få lite extra luft valde jag bara 300px i bredden. Det är ungefär så din sida ska se ut:
Nu ligger innehållet och sidofältet bredvid varandra men det finns ett problem som har uppstått på grund av att vi använder float. Hitta id-t footer med granska komponent. Om det inte redan finns id-t footer i style.css hitta själv ett lämpligt ställe att skriva in följande:
#footer { clear: both; }
Nu har vi löst problemet och sidan ser bättre ut:
Sidan börjar ta form. Du ska nu förstå hur du kan hitta olika html-taggar med hjälp av granska komponent och antingen hitta tillhörande css i style.css eller skriva in själv rätt css om det saknas.
Designen är långt ifrån klar. Fortsätt med att förbättra utseendet (rubriker, länkar, osv).