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!