Styr bloggens utseende i CSS-koden Del 2.

Du kan styra mycket av bloggens utseende via bloggens css-kod. Jag förklarade mallens allra översta del i den första tutorialen, här kommer fortsättningen

Då går vi vidare i CSS-mallen.
Det är fortfarande Minimas Grundmall vi tittar på, så har du en annan mall  kan designern använt andra ord/uttryck, men funktionen är densamma.

Vi börjar med Body. Det stycket ser ut så här:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }



Som du ser delas koden in i små stycken där själva koden som bestämmer utseendet omringas av { } tecken. Varje rad med en regel avslutas dessutom med ;  Det är viktigt att du inte raderar de här tecknen om du ändrar i din mall för då kommer du inte att kunna spara mallen, du får ett felmeddelande.

Body står för bloggmallens "kropp", själva bakgrunden, och den innehåller det övergripande inställningarna. Om t.ex. ett teckensnitt ska vara samma i hela bloggmallen finns det med här.

background:$bgcolor; är som du minns från CSS-lektionens första del det som bestämmer vilken färg bakgrunden ska ha. bgcolor-inställningen, vilken färgkod bgcolor ska betyda, finns i bloggmallens översta del.

margin:0; betyder att bakgrunden inte ska ta slut innan webläsarens fönster gör det. Inga marginaler!

color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;

Här bestäms vilken storlek och färg bloggens text ska ha om man inte säger annat i t.ex. blogginläggens inställning (det du själv kan ändra i redigeringsrutan då du skriver inlägg) eller i annan del i mallen. Det här är grundinställningen.

a:link {
  color:$linkcolor;
  text-decoration:none;
  }

Här bestäms vilken färg en länk ska ha och om den ska vara kursiv eller fet. I det här fallet ska den inte vara det eftersom det står none.

a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }

a:visited betyder en länk som du har klickat på, hur den ska se ut då den är använd. Du kan ha samma färg som en obesökt länk eller så kan du välja att markera med färg att besökaren redan klickat på länken.

a:hover {
  color:$titlecolor;
  text-decoration:underline;
}

a:hover betyder hur länken ser ut då du håller muspekaren över den. I det här fallet står det underline, vilket betyder att länken blir understruken. När du flyttar bort muspekaren försvinner den här effekten. Här kan man lägga till en bild, en färg eller något annat som gör att länken ser rörlig/levande ut. Rätt plats för roliga effekter alltså!

a img {
  border-width:0;
  }

img betyder image - bild. Om bloggmallen innehåller en bild bestäms det här hur den ska bete sig, om den ska ha en ram runt sig etc.


Nu kommer vi till header.
Det stycket ser ut så här:

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Först kommer wrappern.

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Wrappern är headerns behållare, det som håller ihop allt.
Här bestämms hur vid -bred- den ska vara, om det ska finnas någon marginal mellan den och andra saker i bloggmallen och om den ska ha någon ram runt sig.

När man skriver margin och padding använder man sig av ett speciellt sätt  att skriva siffrorna så att bloggen vet hur den ska läsa dem.

Man kan skriva med fyra siffror, 10px, 20px, 30px, 40px; till exempel. Då läser bloggen siffrorna uppifrån och medsols, i det här fallet är
10 uppåt,
20 till höger,
30 nedåt och
40 till vänster. Tänk klockan!

Sen kan man skriva med tre siffror, som i koden ovan ( margin:0 auto 10px;) . Då läser bloggen 0=uppåt
auto=höger och vänster och
10=nedåt.
Den mittersta siffran eller ordet styr alltså de horisontella riktningarna - höger och vänster.

Avslutningsvis kan man skriva en siffra/ett ord också, t.ex. 0; eller auto. Då styrs alla håll av samma siffra/ord.

Vill du ändra i koden kan du alltid skriva dit fyra siffror, även om det bara står tre eller en i grundmallen. Bloggen kan läsa det. Glöm inte px, kommatecken och avslutande ; bara.

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

Så kommer header-inner. Den behöver du inte fundera så mycket över, för här kommer du inte att behöva ändra något om du inte ska specialdesigna din mall.

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

I header kan du behöva fixa lite, här kan du t.ex.lägga till en bild om du inte vill göra det via sidelementen i layoutläget av någon anledning. Om du vill kunna flytta din headerbild utanför wrappern kan det vara bra att ha bilden inlagd här. Kanske har du en headerbild som har något som sticker ut, utanför wrappern?

Du kan ändra i margin här och då kan du ev. också använda minustecken framför en siffra. Säg att du har en blomma som behöver ligga utanför headerns wrapper till vänster. Då kan marginkoden se ut så här t.ex.
margin: 0, 0, 0, -20px; Du har skapat 20 extra pixlar åt vänster där din blommas kant kan sticka ut.

Här står också text-align: center;
Text-align betyder hur texten ska ligga i förhållande till behållaren den ligger i, headern i det här fallet. Du kan välja på left, right och center. För fler alternativ kan du söka på text-align på t.ex. google.


#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }
H1 är en formatering av en rubriktext som är bestämd i din mall. Det finns sex storlekar att välja på, h1-h6 och varje storlek kan ha sin egen formatering - teckensnitt, storlek etc. Du kan prova att byta ut siffran 1 mot 2 el. 3 osv för att se hur det påverkar din rubriks utseende, men det hänger förstås på att bloggmallens designer skrivit in värden för alla sex storlekar i din bloggmall först.

I de här kodstyckena bestäms alltså hur din bloggrubrik ska se ut och var den ska ligga mer precist. Du har en margin och padding att flytta runt texten med, du kan bestämma hur stor texten ska vara i line-hight och hur långt avstånd det ska vara mellan bokstäverna i letter-spacing.

Em är ett flytande mått, relativt till andra element i bloggen, till skillnad från pixlar som är statiska (fast storlek) Tänk på em som %, de är beroende av ett grundmått, vad 100% är eller 1 em.

Genom att använda em kan din besökare själv styra textens storlek genom att trycka på CTRL och + för större text och CTRL och - för mindre text. För att återställa texten trycker man på CTRL och 0. Det här gäller om din besökare använder IE eller Firefox som webläsare.

Text-transform avgör om din text ska stå med stora eller små bokstäver.
Här finns också fonten bestämd, den font som står i CSS-kodens översta del som vi tittade på i den första tutorialen - pagetitlefont.

Header a visar hur texten ska se ut då den är orörd.
Header a:hover visar hur den ska se ut då du håller muspekaren över den. Här kan du lägga till valfri dekoration, t.ex. underline eller bold.

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }
  
Header Description är den text som kommer under din bloggtitel i headern. Den text där du kanske skriver "en blogg om allt och inget" eller något annat beskrivande. Även här kan du ändra en rad saker, teckensnitt, storlek, teckenavstånd, placering etc.

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Header img beskriver hur din headerbild ska placeras.




/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Vi avslutar med Outer wrapper den här gången.
Outer wrapper är den behållare som håller ihop din mainbar (där du skriver dina inlägg) och din/dina sidebars. Om du ska lägga till ytterligare en sidebar är det bl.a. här du ska lägga till kod.

Genom att skriva hur texten ska se ut och bete sig i outer wrapper bestämmer man hur den ska se ut i både main och sidebaren. Här bestäms hur breda dina olika kolumner ska vara, du kan själv öka och minska dem.
Tänk på att du aldrig kan ha mer innehåll (större vidd) än vad outer wrappern klarar av att hålla. Om du har en mainwrapper som är 410 pixlar och en sidebar som är 220 pixlar blir det alltså 410+220=630pixlar.

Sen får man inte glömma att räkna med margin och padding också.
Som du ser har outer wrappern en padding på 10 pixlar vilket betyder 10+10 pixlar till (höger och vänster sida) Då är vi uppe i 630+20=650 pixlar. Alltså finns inte mycket utrymme att öka varken main eller sidebar just nu. Därför börjar man med att öka outer wrappern om man vill bredda bloggen. Om du överskrider måttet som outerwrappern kan hålla kommer din sidebar att halka ner under mainbaren.

De här raderna,

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

talar om hur bloggen ska handskas med text och bilder som är för stora för att få plats på en rad. Bilder har t.ex koden overflow: hidden; vilket betyder att det av bilden som inte får plats i sin behållare ( t.ex. sidebaren) inte kommer att synas.

Det är inte lätt att förklara kod på ett begripligt, lättöverskådligt sätt, men jag hoppas att du nu är lite klokare och vågar prova att ändra lite i din kod. Glöm aldrig att förhandgranska dock!

Den sista delen i CSS-koden kommer i den sista, avslutande tutorialen.

Till sist, lite förklarande bilder som jag redan lagt upp i andra inlägg här på fixa-bloggen men som tål att upprepas.