Header Ads

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.

skapa bild

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.

ingen rubrik

Nu är det dags att ladda upp din bild.

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

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.

linje under

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?

långt ifrån

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.

bättre avstånd sista

4 comments:

  1. åh vad det är roligt med alla tips här.. bara man hann pröva dem alla också =)

    ReplyDelete
  2. Hejsan! :)
    jag undrar hur man tar bort mellanrum mellan gadgets? det funkar inte, provat jätte många gånger!:/

    ReplyDelete
  3. Hej! Vilken himla bra sida detta är - alltså hela bloggen! Har testat o ändrat nu en del p min blogg och även valt följa bloggen! Tack!

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