Egen bakgrund med header och wrapper

Tidigare pratade vi om att lägga till en bakgrund på bloggen, men nu tar vi steget längre - vi lägger till vår egen header och wrapper på ett sätt som gör att du kan lägga dem omlott som du vill.

Viktigt!
Den här tutorialen utgår från bloggmallen Scribe. Det är en av Bloggers grundmallar, du hittar den i samma lista som Minima-mallen.

Då startar vi!

Det första vi gör är att förminska bloggens rubrik till noll procent.
Det gör vi eftersom din rubrik annars kommer att halka ner under din nya header och det blir ju inte så snyggt!

Gå in på din bloggs Layoutläge, Redigera HTML.
Sök nedåt tills du kommer till "Blog Title Font" och "Blog Description Font"
Under dem hittar du två procenttal som talar om hur stora bokstäverna ska vara.
Minska det tal som står efter Value till 0%.
Då behåller din blogg sitt namn (till skillnad mot om du skriver en punkt i din headers rubrik som många gör då de vill vara utan rubrik) men den syns inte alls.

Nu är det dags att fundera på vad du vill ha för bakgrundsfärg/mönster.
I det här inlägget utgår vi från en liten mönsterbild som upprepar sig eftersom Scribes mall har koden för det inlagt. Om du vill byta till en stor, fixerad bild kan du kika här.

Du kan också välja att endast ha en enfärgad bakgrund.
Färgkoder kan du hitta här

Gå vidare ner i din kodmall tills du kommer till Body.
Här hittar du bloggens bakgrundsfärg och mönster.
Om du vill ha ett mönster spar du din bild som du har valt på t.ex Photobucket och kopierar bildens direktlänk. Klistra in den på samma ställe där Scribes htt:// adress står, du byter helt enkelt adress.
Om du hellre vill ha enbart en färg ( eller vill testa hur det ser ut först ) kan du radera Scribes bildadress, men spar (" ") som står runtomkring. Byt ut färgkoden till det du vill ha.

Förhandsgranska och se att det fungerar så här långt!


Nu går vi vidare till Outer Wrappern. I Scribe är den mörkbrun, kanske inte så snyggt till den bakgrund du tänkt dig.

Så här ser koden ut:

#outer-wrapper {
background-color:#473624;
border-$startSide:1px solid #332A24;
border-$endSide:1px solid #332A24;
width:700px;
margin:0px auto;
padding:8px;
text-align:center;
font: $bodyFont;

Byt ut Backgroundcolor mot den färgkod du vill ha. Likaså de två kantlinjerna som heter border. De kan ha samma färg som wrappern eller en matchande. Testa vad du föredrar. Du kan också öka eller minska bredden på hur mycket av outer wrappern som ska synas under wrappern du ska lägga över, det gör du genom att ändra på siffran efter padding.

Du behöver också ändra färgen under Main-top som ligger precis under Outer Wrappern.
Byt backgroundcolor-koden till den färgkod du vill ha.

Nästa steg är att skapa din header och wrapper.

Öppna ditt bildhanteringsprogram (här Photoshop) och skapa ett tomt dokument som är 700 pixlar brett och ca 1000 pixlar högt. Vidden är det viktiga, den är absolut, men höjden beror på vad du vill skapa.

Fyll ditt tomma dokument med vad du vill ha på din blogg, inklusive bloggrubrik.

Dela upp bilden i tre delar - headern och det du vill ska sitta ihop med den, mittendelen som är den del som kommer att ligga under dina bloggposter och sidebar och sist footern som är avslutningen på bloggen.

Utgå gärna från en hel bild som du klipper i tre delar och spar var för sig. Tänk på att mittendelen kommer att upprepa sig ett antal gånger beroende på hur många bloggposter du visar på var sida så den bör vara så sömlös som möjligt - inga hårda kanter i övergångarna om du kan undvika det!

Inte heller ska det synas var varje del ( header, mellandel, footer) börjar och slutar. Om du för ihop dem ska de se ut som en enda bild. Åtminstone är det vad vi försöker åstakomma


Spara bilder som har tomrum bakom sig som png.filer, bilder som täcker hela ytan som jpeg eller gif.

Ladda upp dina bilder hos en webhost, t.ex Photobucket.

Gå tillbaka till din bloggs Layoutläge, Redigera HTML.
Scrolla ner till Main-top som ligger strax under Outer Wrappern.

Byt ut Scribes bildadress mot din egen headers direktlänk.
Gå vidare till Main-bot och klistra in din egen footers bildlänk.
Avsluta med Wrap2 där du klistar in din mellandels bildlänk.

Förhandsgranska!




När vi har kommit så här långt är vi nästan klara.

I Scribes bloggmall finns två linjer, avdelare som ser ut så här:

Om du vill ha dem kvar är det bra, men om du vill ta bort dem får du åter gå till bloggens Layoutläge, Redigera HTML.

Klicka på Ctrl + F på ditt tangentbord och skriv in divider i sökrutan du får upp.
Du kommer då till den första bildadressen där linjen finns.
Radera webadressen.
Klicka på nästa och gör samma sak med den andra, sista, adressen du hittar.

Förhandsgranska igen!
Ser det bra ut, spara din bloggmall!