4. #page-wrap & #header

Som ett första steg i designen ska du skriva lite css för div id-t page-wrap (det är div-taggen som håller ihop sidans innehåll) och sedan skapa design för header delen (div id-t header) som innehåller loggan, en byline samt menyn i det här fallet.

Börja med att på admin sidan gå till Appearance > Editor (Utseende > Redigeraren). Där kan du redigera dina temafiler:

editor_wp

Det är alltid style.css som visas när du besöker redigeraren men du kan även ändra på andra filer genom att välja de från den högra spalten. Den stora nackdelen med detta editor är att det är svårt att hitta rätt utan lite färghjälp samt radnumrering. Det kan vi enkelt åtgärda genom att installera ett tillägg som heter Advanced Code Editor. Gå till Plugins > Add new (Tillägg > Lägg till nytt) och installera samt aktivera den.

Det finns även andra tillägg så som WPide (möjlighet att ladda upp filer eller får tips när du kodar) eller  WP Editor (http://wordpress.org/extend/plugins/tags/code-editor). Du ska välja en som känns bäst att arbeta med. Testa gärna minst två innan du bestämmer dig för en av de.

När tillägget är aktiverat och du besöker editorn igen blir det genast enklare att arbeta med koden:

Advanced Code Editor

#page-wrap

Id-t page-wrap öppnas i filen header.php precis under body-taggen och stängs i footer.php precis innan body avslutas. Kolla gärna genom att klicka på Header och sedan på Footer i den högra spalten:

header_footer

Nu ska vi hitta page-wrap med granska komponent och se om det redan finns något CSS och i sånt fall var i style.css finns så att vi kan bara fylla på med mer information.

Besök din sida (rekommenderas att ha två flikar öppna, en med själva sidan och en med admin-sidan så att du ska enkelt kunna växla mellan de), sedan höger-klick och välj Granska komponent:

granska komponent

Leta rätt på <div id=”page-wrap”> i den nedre delen av fönstret och klicka på det. Du kommer att se att det visas med blå ytan för page-wrap och på höger sidan av koden visas även tillhörande CSS. I det här fallet i style.css på rad 165 (kan vara en annan rad men det spelar ingen roll eftersom du ska hitta dina taggar via granska komponent som visar rätt för dig) finns det redan kod för #page-wrap:

page-wrap

Så vi går till admin-sidan och på rad 165 (i mitt fall, du ska gå till den rad som visas för dig som i bilden ovan) i style.css fortsätter fylla på med kod. Mellan klamrarna för #page-wrap skriv in:

background-color: rgba(221,221,221,.8);
padding: 10px;

Passa på och leta rätt på body-taggen. Det finns säkert redan css för den och vore bra att utöka med en bakgrundsfärg samt en CSS3 pattern som ska vara bakgrundsbilden. Jag skrev följande kod för body-taggen:

background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

Så här ser min sida ut:

Skärmavbild 2013-05-19 kl. 23.21.20

Gå till din sidan och med Granska komponent hitta id-t header. När du kilckar på den kommer ytan att markeras men i css-spalten hittar du ingenting då det inte finns skrivet någon css för det här id-t.

Skärmavbild 2013-05-19 kl. 23.22.09

För id-t header väljer jag bara ha en ram (border-bottom) och lite luft. Tänk på att ha strukturerad kod. Jag väljer att lägga in koden precis under #page-wrap:

#header {
border-bottom: 3px double #000; 
padding: 10px 0; 
margin-bottom: 15px; 
}

Fortsätt med att hitta resten av taggarna som du vill ändra utseende på som till exempel h1-taggen som ligger i header och klassen description. Sedan fortsätt med menyn (skapa en meny om du inte redan gjort det Appearance > Menus). Välj själv färger och design för dina olika taggar. Här är resultatet på min sida:

Skärmavbild 2013-05-19 kl. 23.51.02

Precis på samma sätt som du gjorde med #page-wrap och innehållet i header ska du även fortsätta med resten av sidan. En och en hitta alla taggar, klasser och olika id med Granska komponent och skriv i style.css det utseendet som du önskar ha.

2 kommentarer till “4. #page-wrap & #header”

  1. På min kod är raden är 167 inte 147 vet inte om det är min kod som blivit ändrad eller om instruktionerna behöver uppdateras.

    1. Nej, instruktionerna behöver inte uppdateras. Det är kanske så att du har flera tomma rader eller kommnetarer än jag i din css fil. Instruktionerna visar hur du hittar via granska komponent så det spelar egentligen ingen roll vad som står på min (du ska hitta i din egen css-fil).

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *