Header Ads

Bild/linje mellan sidelementen i Sidebaren


Tidigare pratate vi om att lägga till en bild/linje mellan bloggposterna, men man kan också göra det mellan sidelementen i sidebaren.

Det första du får göra är att skapa eller leta fram en lämplig bild. Den ska inte vara bredare än din sidebar, vilket i Minimas grundmall är 220 pixlar.

När du har bilden klar laddar du upp den hos en webhost (t.ex. Photobucket) eller i ett inlägg på din blogg.

När din bild är uppladdad är det dags att gå till din bloggs Layoutläge - Redigera HTML-kod.
Tryck på Ctrl + F på ditt tangentbord så får du upp en sökruta.
I sökrutan skriver du .sidebar .widget, Tryck enter.
Då kommer du direkt till rätt ställe i din kodmall.

Markera .sidebar .widget, och ta bort de orden. Vi ska ersätta dem strax.
I grundmallen stod sidebaren och mainbaren tillsammans, men vi vill ju kunna styra enbart sidebaren och därför ska den få en egen liten kod.


Klistra in följande kod under .main .widget-kodens stycke enligt bilden nedan:


.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:30px 0 30px 0px;
padding:0 0 50px;
background-image: url(http://DinBild.png);
background-position: bottom;
background-repeat: no-repeat;
}


Nu kan du hämta din bilds direktlänk och ersätta http://DinBild.png med denna.

Förhandsgranska och se hur det ser ut - behöver du ändra något avstånd?

Anpassa paddings 50px efter din bilds höjd, lite mer än vad bilden är hög blir bra.

Du kan också öka eller minska avståndet uppåt och nedåt mot dina sidelement genom att öka eller minska margins 30px. Den första siffran är avståndet uppåt och den tredje (också 30px) är avståndet nedåt.
Om du behöver flytta bilden åt höger eller vänster (förutsatt att din bild är mindre än sidebaren så att det finns utrymme att flytta) är det siffra två och fyra du ska öka, de båda 0px alltså.

Spara när du är nöjd!

5 comments:

  1. Tusen tack för detta inlägg.Är riktigt roligt och trixa och fixa inne i kodmallen nu när man börjar få lite hum om det.För övrigt tycker jag det är helt otroligt att du lägger ner så mkt. jobb här och tid.Tack för att du vill dela med dig.Kram.

    ReplyDelete
  2. 1000-Tack för att du delar med dig av din kunskap...Ja é IMPAD :)

    ReplyDelete
  3. Vad snälla ni är :-)
    Det är ju roligt att skriva de här inläggen när man märker att de kommer till nytta, det blir så givande då!

    ReplyDelete
  4. vi verkar inte ha samma mall från början!? :S
    för det funkar inte alls.. den säger att det är fel kod osv..

    ReplyDelete
  5. Jag vill bara ta bort den lilla streckade linjen mellan mina gadgets. Hur gör jag då?

    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.
-------------------------------