Styr bloggens utseende i CSS-koden Del 1.

Man kan dela in en bloggmall från Blogger i två delar, CSS och HTML.
CSS står för Cascading Style Sheets och kan  på svenska kallas stilmall.

I CSS-delen av kodmallen hittar du det som styr hur bloggen ska se ut gällande färger, teckensnitt och storlekar. Genom att använda kodord - gemensamma nämnare - kan man styra hur många saker ska se ut via en rad i mallen.
Ett exempel är färg på länkar. Genom att skriva in koden

<Variable name="linkcolor" description="Link Color"
             type="color" default="#ff0000" value="#ff0000"> 


kan vi bestämma att alla länkar ska vara röda, oavsett vart i bloggmallen de befinner sig. Om du skulle ändra på färgkoden till t.ex. value="#000000" skulle de allihop visas svarta eftersom 000000 är färgkoden för svart.

På så vis behöver vi inte skriva in värdet för färg och teckensnitt för varje länk vi lägger in i bloggens mall. 



Den övre delen av CSS-koden ser ut så här i Minima:


/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#5588aa">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#cc6600">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#999999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#999999">
  

Här hittar du:

* bakgrundsfärg                               ( page background color )  
* textfärg, alltså löpande text          ( text color )
* länkfärg                                          ( link color )
* bloggtitelfärg                                 ( blog title color )
* bloggbeskrivningens färg            ( blog description color )
* inläggsrubrikernas färg                ( post title color )

* kantlinjer/ramarnas färg               ( border color )
* sidebarernas rubrikfärg               ( sidebar title color )
* sidebarernas texts färg                ( sidebare text color )
* besökta länkars färg                    ( visited link color )


När du vill byta färg på någon av ovanstående kategorier, byt då ut färgkoden som står efter ordet value. 

Härnäst kommer den del som styr teckensnitt och storlek på text. Den ser ut så här:


<Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

Som du kan se i de översta raderna finns ett antal teckensnitt inskrivna samt ett procenttal.

<Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Även här finns ett default-värde och ett "value-värde". Även här är det efter Value du ska göra dina ändringar. 

value="normal normal 100% Georgia, Serif">

*normal normal betyder att texten varken är tjock (bold) eller kursiv (italic) 

*100% är storleken på texten jämfört med den satta standarden.  Ändra siffran uppåt eller nedåt för att öka eller minska storleken.

* Georgia, Serif är teckensnitten som designern valt för den här texten. Du kan ändra valet genom att själv skriva till ett teckensnitt framför de förvalda, så här : 

Comic Sans ms, Georgia, Serif

Glöm inte kommatecken och mellanrum 
Tänk också på att helst använda ett teckensnitt som är förinstallerat i windows eftersom alla då kan se det. Väljer du ett annat teckensnitt kommer besökarens dator (som inte har ditt teckensnitt installerat) att gå vidare i listan och välja nästa den känner igen, i det här fallet Georgia.


Serif är inte ett egentligt teckensnitt utan en familj av teckensnitt som har små "fötter". Motsatsen är san Serif - utan "fötter"  Se bilden nedan

 

 

 Även här har du olika "kodord" som styr olika tecken/teckensnitt i bloggmallen

*  löpande text                 ( Variable name="headerfont" description="Sidebar Title Font ) 
*  sidebarens rubrik        ( Variable name="headerfont" description="Sidebar Title Font )
*  bloggtitel                      (  Variable name="pagetitlefont" description="Blog Title Font )
*  bloggbeskrivning        (  Variable name="descriptionfont" description="Blog DescriptionFont )
* "postfooter-text"           ( Variable name="postfooterfont" description="Post Footer Font )

 Avslutningsvis talar designern om att kodordet StartSide är sidan där text börjar, alltså till vänster, medan EndSide är sidan där texten avslutas, alltså till höger. Så, om du ser startside eller endside i en bloggmall så vet du nu vad det betyder - vänster och höger!

<Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">


I nästa del av den här tutorialen går vi nedåt i bloggmallen och tittar på vad mer som finns i CSS-delen av kodmallen.