Header Ads

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!

13 comments:

  1. Spännande inlägg.Det här får jag förkovra mig lite i.Det här med att fixa egna bakgrunder är ju väldigt spännande.Tack...

    ReplyDelete
  2. Finns det någon som kan göra detta åt en ? jag e så dålig på sånt här

    ReplyDelete
  3. Fast vad är det du är dålig på? Själva designandet (bestämma bilder och färger) eller att ladda upp det?

    ReplyDelete
  4. Jag försökte, jag brukar alltid kunna sånt här utan problem, men denna gången ville inte bloggen sammarbeta med mig, vad jag än gjorde blev bakgrunden bara vit! :/

    ReplyDelete
  5. OH HALLELUJA ! tack så mycket för denna fantastiska guideblogg ! jag har googlat ihjäl mej efter hjälp, men hittar bara krångliga sidor på engelska som man inte begriper ett dugg av. :D

    ReplyDelete
  6. JAg har samma problem som katta... Att bakgrunden bara blir vit. Förstår inte alls vad jag gör för fel...

    ReplyDelete
  7. Jag tittade på din källkod Fladdormamman och även om du lagt in en bakgrundsfärg på body, så har du fortfarande koden för vitt FFF uppe i Variable Definitions. Det ser ut så här i din kod:
    Variable name="bgcolor" description="Page Background Color"
    type="color" default="#fff">

    Eftersom du har minimas mall kan du ändra din bakgrund här. I den här tutorialen utgår jag ifrån Scribe som är en annan mall och som har lite annan uppbyggnad. Hoppas det löser ditt problem!

    ReplyDelete
  8. Hej..undrar om du kan hjälpa mig? jag har en bild jag vill ha som header, har lagt in den i stilmallen men den syns bara när jag förhandsgranskar+ att allt är flyttat till vänster ist för centrerat+ att färgen på rubrikrutan som är till höger blivit vit ist för rosa. + att den rutan är flyttad lääängt ut till höger så att det blivit ett mellanrum mellan själva bloggen och rutan med alla rubriker..snälla hjälp mig..? allt detta har flyttat på sig när jag tittar i förhandsgranska men är normalt när jag går in som vanligt på min blogg..jag fattar ingenting...

    ReplyDelete
  9. Tyvärr kan jag inte blogg.se och jag kan inte heller se din källkod som man kan göra på bloggers sidor, så jag kan inte se vad som är tokigt... Något har blivit fel, det syns ju tydligt, men vad?

    Designadinblogg.se är inriktad på blogg.se, du kanske skulle lyssna där?

    ReplyDelete
  10. Tusen tack för suverän guide! Ett problem som återstår för mig är att mina blogginlägg kommer lite väl långt till höger. Skulle helt enkelt vilja minska marginalen mellan sidebaren till vänster och blogginlägget. något tips?

    ReplyDelete
  11. Hjälp!Kan inte!
    Jag har min blogg och har en banner som jag är nöjd med,Den ska jag ha.Men vill ha en snygg bakgrund eller va heter det,ram runt om?Hur får jag dit det?Har hittat en sida med snygga saker,men det står hur man ska göra.Kan ändå inte.Har ingen sådan gaget.Vore tacksam för hjälp.Inger Rozén
    blogg Chintohs blogg.

    ReplyDelete
  12. http://justgotlaid.blogspot.com likes this

    ReplyDelete
  13. Hur får man texten i headern????Fixar inte alls...bloggen heter http://bondefruns.blogspot.com

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------