Styla din blogg med färg och teckensnitt

Ett väldigt enkelt men effektivt sätt att förändra bloggen är att byta färg på bakgrunden eller texten. Du kan också ändra teckensnitt och storleken på text och rubriker.

Jag utgår från en Minima mall i det här inlägget, men du kan göra de här ändringarna i vilken bloggmall som helst. Det enda du behöver tänka på är att olika designer har olika benämningar på bloggens delar, så du kan behöva prova dig fram.

Innan vi startar är det bra om du har antingen ett bildhanteringsprogram som kan benämna färgkoder öppet, t.ex. photoshop, eller en websida som kan göra detsamma. För att kunna ändra färg på något i din blogg behöver du veta vad en viss färgnyans har för kod och det är inget man lär sig utantill, mer än några enstaka färger som vitt (ffffff) och svart (000000) kanske.
En bra sida för webfärger hittar du här.

Det första du gör är att gå till din bloggs Layoutläge - Redigera HTML.

Nästan överst i kodmallen finns den CSS kod som styr hur bloggen ska se ut. Om du ändrar värdet här uppe (färg, storlek etc) påverkar du alla element i bloggen som har tilldelats just det "kodordet".
Ett exempel är bordercolor. Ramar finns på många platser i bloggen, runt foton, headern etc och istället för att skriva en färgkod vid varje objekt väljer man att lägga in en css-kod som styr varje objekt som fått benämningen bordercolor.

Man skulle kunna säga att det fungerar som de där ställen i affären som säljer blomfröpåsar - grupp 1 kostar 5kr, grupp 2 kostar 9kr och så vidare. Istället för att sätta en prislapp på varje fröpåse har de fått ett kodord som är lätt att läsa av ovanför stället.

Tillbaka till din kodmall.
Bland det första du ser är rader som ser ut ungefär så här:

 <Variable name="bgcolor" description="Page Background Color"
         type="color" default="#fff" value="#ffffff">

Som du ser ovan har jag ringat in färgkoden för bloggens bakgrund. Just nu står den på ffffff vilket är koden för vit. Här kan du byta färgkod till din önskade nyans, men var noga med att behålla alla # och " tecken. Utan dem fungerar inte mallen.
När du lägger in din färgkod ska du göra det efter value, inte default. Se den röda ramen i bilden ovan.

Jag rekommenderar att du förhandsgranskar efter varje ändring du gjort och ev sparar mellan dem om du är nöjd. Då är det lättare att rensa redigering om något blir tokigt - du behöver inte göra om allt.

När du börjar känna att du fått färgerna som du vill är det kanske dags att ändra på dina teckensnitt. Den koden hittar du precis under bloggens färgkoder.

Först står det vilken text det handlar om, i det här fallet bloggens löpande text och i den andra rutan - bloggens beskrivning vilket är texten under bloggrubriken. Även här är det value vi ska ändra på, inte default.

Som du kan se finns först ett procenttal inskrivet. Genom att öka det talet ökar du textens storlek och genom att minska talet minskar du texten. Du kan öka över 100% om du vill, det finns ingen övre gräns för stor en text kan vara mer än att det ska se snyggt ut förstås!

Efter teckensnittets storlek kommer ett eller flera namn på teckensnitt uppradade. Att det är flera beror på att varje dator har olika teckensnitt/fonter installerade och en dator kan bara visa de teckensnitt som den känner igen.

Om du lägger upp ett ovanligt teckensnitt är risken stor att de flesta av dina besökare inte kan se det utan deras webläsare går raskt vidare till nästa teckensnitt i raden på din kodmall. Känner datorn inte igen det heller, går den till det tredje alternativet på listan.

Så, hur gör du då för att visa ett annat teckensnitt?
Jo, du flyttar helt enkelt om de alternativ som står i din bloggmalls kod (först i raden visas i första hand) eller skriver in ett annat namn före de som redan står. Var noga med att stava rätt så att dina besökares datorer kan känna igen teckensnittet om de har det.

När du är nöjd med dina förändringar - förhandsgranska!
Om du är nöjd, spara!