Hej,
Det här är Sebastian – Linnéas sambo – som lånar bloggen en stund. Linnéa berättade att det kommit ett flertal e-mail med frågor om designen på bloggen. Hur man ändrar, trixar och fixar. Då det är jag som i mångt och mycket hjälpt henne med detta (självklart med hennes vägledning och önskemål), så tänkte jag göra en kort beskrivning för att visa var och hur man ändrar lite enkla saker för att få en mer personlig stil.
OBS! Denna guide riktar sig till dig som använder dig av blogg.se och weblogg.se.
Till att börja med kan du gå in under fliken design. Där hittar du ett gäng olika stilmallar. Dessa är mallarna som styr designen på bloggen. Du väljer, med hjälp av koder, vilken bakgrundsfärg, bakgrundsbild, header(översta bilden i bloggen), typsnitt, textfärg, etc, du vill använda. Jag ska försöka att pedagogiskt förklara lite.
Välj en layout du tycker verkar bra att utgå ifrån. När du sen kikar under designfliken, finns en länk som heter "alternativt ändra din befintliga stilmall". Klicka där.
Så, vi börjar med det enklaste. Bakgrundsfärg eller bakgrundsbild.
I stilmallen letar du rätt på det som heter body. Det finns lite olika saker att styra där, men det vi siktar in oss på är background. Se bild nedan (det kan se lite olika ut i din stilmall, då jag ändrat lite för att det ska vara enkelt att se).
Bakgrunden i detta fallet är satt till vit. #fff är det som avgör att det är vit bakgrund. Svart anges som #000. Det finns ett helt schema för hur färger skrivs, och detta schema kan du hitta här.
http://hem.passagen.se/joema/webcolors.html?k
Där det står url() fyller man i en länk till en bild som man vill använda som bakgrundsbild.
Har man inte möjlighet att skapa en egen bild och ladda upp på internet, så kan man googla på "bakgrundsbilder" eller liknande. Se till att du får länken direkt till bilden och inte bara till sidan. Högerklicka på bilden för alternativ.
Kom ihåg att be om lov innan du använder någon annans bild, om det inte står att det är fritt fram.
Om vi går vidare i stilmallen kan vi se saker som a{ } vilket beskriver hur vanliga länkar ska se ut.
Det som heter a:hover är utséende på länkar när man för musen över dem.
Som ni ser i bilden nedanför finns attributen color och text-decoration. När man väljer text-decoration: none; så gör det att länkar inte blir understrukna. Sätter man en annan färg på a:hover än på a så ändras färgen när man för musen över.
Vidare finner vi header som styr översta bilden i bloggen. Width är alltså bredden på just den delen, och height är sålunda höjden, angivet i pixlar. Dessa kan vara bra att veta om man skapar en bild i t.ex. Photoshop.
Samma sak gäller för bakgrunden här, som för bakgrunden i body.
Det som står sedan, center, betyder att bilden centreras i utrymmet. Så har du en bild som är större än storleken som anges i koden, i fallet nedan 830 pixlar bred, så ser du bara de 830 pixlar som är närmast mitten av bilden.
Ja, ni märker hur det fungerar om ni stöter på problem.
no-repeat betyder bara att bilden inte upprepas, om rutan skulle vara större än själva bilden.
Det var väl allt för den här gången. Nu ska jag försöka se slutet av Morden i Midsomer, så kanske jag lånar bloggen igen. Det finns ju många mer saker att ändra designmässigt.
För att avsluta det hela kan jag länka till några sidor för er som är intresserade av att lära er Photoshop, eller få mer idéer till skapande i Photoshop.
http://www.webdesignskolan.com/photoshop/index_ps.htm
Med vänliga hälsningar
Sebastian
