Bild som rubrik till gadgetar

Visst skulle det vara kul att kunna ha egna designade rubrik-bilder ovanför dina gadgets, att kunna anpassa dem efter vad innehållet är.

I det här inlägget börjar vi med det allra enklaste sättet, att lägga in en bildgadget ovanför inlägget du vill ha en rubrik-bild till.

Gör så här:

Skapa den rubrik-bild du vill ha, tänk på att inte göra den bredare än vad din sidokolumn är. I Minima-mallen är det 220 pixlar.

När du har sparat bilden går du till din bloggs Layoutläge och plockar fram gadgeten som du vill ha rubrik-bilden till. Plocka bort rubriken så det är tomt ovanför själva gadgeten.

Nu är det dags att ladda upp din bild.

Välj Lägg till en gadget, bildgadget.

Ladda upp din bild.

Nu är bilden på plats, men om du har Minima-mallen har du kanske en prickad linje mellan bilden och din gadget och det är ju inte så snyggt.

För att plocka bort den linjen går du in på din bloggs Layoutläge – Redigera HTML.

Här söker du dig ner till /* Sidebar Content

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Byt ut siffran 1 till 0 i border-bottom.

Spara mallen.

Nu är linjen borta, men det är långt emellan din bild-rubrik och gadgeten. Vill du minska det avståndet?

Det gör du också i din bloggs kodmall (redigera HTML), i samma stycke där vi plockade bort linjen.

Byt ut 1.5em i margin mot 0.3em. Du kan öka eller minska den här siffran efter behov.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Förhandsgranska din mall och se om avståndet känns bättre. Det här innebär att alla gadgets kommer närmre, vi kan inte anpassa avståndet mellan två enskilda gadgets.

Om du känner att några kommit för nära kan du skapa en html-gadget och i den rutan skriva <br> ett par gånger under varandra, så här:

<br>
<br>
<br>

Den lägger du mellan de gadgets som ligger för trångt. Anpassa antal taggar efter hur stort mellanrum du vill ha. Kanske räcker det med en radbrytning?

Nu känns det som om vi har skapat ett lagom avstånd mellan gadget och rubrik-bild.