Gör en panoramaheader på blogg.se




Om du vill veta hur man designar responsivt för att det ska se lika bra ut på alla enheter, så ska du kolla på denna film!
Det första du börjar med att göra det är att du lägger headern utanför wrappern, annars så kommer det här inte fungera. Du flyttar alltså ditt headerstycket i kodmallarna till ovanför wrappern. Se bild nedan.

Skärmavbild 2014-10-29 kl. 13.36.10

Det du gör därefter är att du går in i din stilmall och scrollar till #header och där ska du se till att det står något sådant här efter background (alltså som värde).

Det viktiga i ovan kod är att du har no-repeat om du inte vill att bilden ska upprepas, center center kan bytas mot till exempel top center, top left, center left – ja, ni fattar säkert, men se även till att den är fixed.

Under detta, men fortfarande i deklarationen för #header, lägger du till följande:

Sedan är det färdigt, bortsett från modifiering! Det du kan behöva göra är som sagt att justera positionen på din header, så att den ligger där du vill ha den, och även höjden (height). Du måste också se till att din bild är såpass stor att den kan täcka hela sidan för alla enheter (den här koden är inte responsiv, så antingen får du göra ett responsivt avsnitt som visar hur det ska se ut i surfplatta eller mobil, eller så kommer din header synas lite grann i en surfplatta/mobil, det är upp till dig helt enkelt!) och därmed kan du inte ladda upp den på blogg.se till exempel, då de bara tillåter bilder som är max 1000px breda för att undvika stora uppladdningar. Tips är att ladda upp på till exempel Tumblr eller Tinypic.



Infinite Scroll



För bättre kvalitet, besök min Youtubekanal och välj HD/720p


Lägg till detta precis innan </head>


Lägg till detta precis innan {% for entry in entries %}


Lägg till detta precis efter {% endfor %} som finns precis innan content avslutas med en </div>, så lite ovanför <div class="side">


Lägg till detta precis innan </body>