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.



Ändra färg på Gillaknappen



Blogg.se har lagt in en egen Gilla-knapp som du kan addera till din blogg om du så vill. Denna Gilla-knapp finns i lite olika färger, men vi har tipset som du garanterat kommer älska – du kan nämligen ändra färgen så att den matchar resten av färgerna på din blogg!

Lägg in detta längst ner i din stilmall:



Som ni ser så finns det alltså tre olika klasser som styr detta (det finns fler, men vi kör såhär så länge, då dessa är lättast ändra.
Det går att ändra det mesta, och vill du ta bort någon finess eller något i utseendet, ta inte bort det i koden, utan skriv kort och gott 0px eller none. För att ta bort skuggan till exempel, så kan du helt enkelt skriva ordet none som värde för box-shadow & text-shadow. Vill du ändra rundningen av kanterna så skriver du 0px som värde för border-radius.

Värt att nämna är också att de har använt rgba()-värden för färger här, men det går bra att ändra det till en hexfärg (alltså hashtag-färgkod = #000 för svart till exempel). I övrigt är det bara att pyssla på med dina egna värden och egenskaper.

Om du vill ta bort den lilla pilen som är i anslutning till gillafunktionen (som går från siffran till ordet ”gilla”) så lägger du in detta i din stilmall:

I'm coming back!

Vet ni vad? Jag har bestämt mig för att börja göra lite tips någon gång ibland som kommer komma upp här. Ser att det är närmare 200 unika besökare här varje dag, så ni uppskattar ju mig och mina tips, haha. Har ni några önskemål? Det var ju ett tag sedan jag skrev här!