Header Ads

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.

31 comments:

  1. Hejsan, jag har en liten fråga som inte har med detta inlägget. Jag undrar om du vet hur man tar bort så tex när man lägger upp en bild i sin blogg, hur man får bort att den förstoras när man klickar på den? Mvh natta

    ReplyDelete
  2. När du har laddat upp en bild i inlägget, välj html-redigeraren istället för skriv. Radera den första bildadressen i koden ( det finns två ) och förhandsgranska. Ser du fortfarande bilden? Bra, då är det rätt.
    När du publicerat ditt inlägg kommmer bilden inte att gå att klicka upp större.

    ReplyDelete
  3. Läste kommentarerna här ovanför - jag har undrat precis samma sak, perfekt! Tack!

    Angående din tutorial, kanon men jag får det inte att fungera att öka endast inläggsrubriken.. :(

    Mvh Emmeli

    ReplyDelete
  4. var i koden ändrar jag för att sätta en viss bakgrundsfärg på området utanför den egna bakgrunden (om jag har lagt upp en egen bild eller tagit en från ex tCBotB)?

    jag vill ju att "utanförområdet" ska matcha min bakgrund, då det finns många som har helt andra inställningar på sina skärmar/browsrar & får en annan look än jag tänkt mig.

    ReplyDelete
  5. tror att jag själv fann lösningen i forumet, tråden "Sätt lite färg..."
    tack

    ReplyDelete
  6. Hej igen. har testat med att ta bort o greja men det vill inte fungera.

    Något mer tips
    Tacksam för svar

    ReplyDelete
  7. lippyz, nja, det fungerade för mig...

    Kan du maila mig html-koden för den bild du inte vill visa större så ska jag testa på min blogg och visa dig hur jag gör. amas_1@hotmail.com

    ReplyDelete
  8. Okej, fick det att fungera. Tusen tack.

    ReplyDelete
  9. Några saker jag har funderat på : 1. Varför går vissa bilder ibland att förstora medan visste inte går? 2. Varför blir det alltid jättestort mellanrum mellan mina bilder. Jag har en resblogg och när jag är ute och reser och lägger upp flera bilder så bildas det till slut jättelånga mellanrum mellan bilderna och texten får stora glapp. Jättedrygt! Tacksam för svar. ;)

    ReplyDelete
  10. För att börja med tvåan, när du lagt in dina bilder - byt till html-redigeringsläget och plocka bort de radbrytningar som blivit extra. Eller, byt till nya redigeringsrutan där du kan styra fotonas läge mkt bättre. Du hittar den på inställningar, grundläggande. Nästan längst ner.

    Det här med fotonas storlek har både med koden och deras grundstorlek att göra. I varje fotos kod finns två adresser. En som visar grundstorleken och en som visar den minskade bilden som blogger skapat åt dig då du valde bildstorlek. Ibland blir det tokigt där och jag vet faktiskt inte varför? Tyvärr!

    ReplyDelete
  11. Hej!
    Underbara tips! Tack så jättemycket!
    Jag kunde inte hitta någon info om det - jag är intresserad av att endast ändra fonten och storleken på inlägsstitlarna, hur gör jag det?
    Tack på förhand!!

    Mvh Tess

    ReplyDelete
  12. hej! jag bloggar från wordpress och wordpress använder sig av css kodning, jag förstår inget av det hur många gånger jag än läser på diverse sidor. skulle du kunna vara jättesöt och undebar och hjälpa mig att byta header?

    tack!
    /mahlin :)
    http://mealinn.wordpress.com

    ReplyDelete
  13. Stormflicka! Här hittar du info om teckensnitt etc: http://fixa-din.blogspot.com/2009/04/styla-din-blogg-med-farg-och.html

    ReplyDelete
  14. Hej, Jag har fått för liten text på rubriken i min blogg, har försökt att ändra men jag får inte till det. Snälla hjälp mig...jag blir tokig snart!
    Tack för alla råd och tips Jättebra sida!

    ReplyDelete
  15. Hej jag fattar inte riktigt detta med CSS. På en hemsida jag läste skulle man ta bort en massa koder och lägga till en, fattade jag fel då? Skulle du vilja förklara lite vore det jättesnällt!

    ReplyDelete
  16. Nja, det beror ju helt på vad de skrev? Du skulle inte kunna länka till sidan?

    ReplyDelete
  17. Jag ska se om jag kan hitta sidan, men jag undrar liksom om CSS redan finns i HTML eller om man ska lägga in något där? Ibland när jag ska söka på en ord i en sån där sökruta eller leta själv i HTML så hittar jag inte vissa ord t.ex. när jag sökte efter: header wrapper hittade den det inte? Har det med CSS att göra?

    ReplyDelete
  18. När en designer skapar en mall döper han/hon de olika delarna till det designern själv vill, alla mallar har olika namn för olika saker.
    Därför utgår jag alltid från Minima-mallen när jag skriver tutorials, skulle jag se vad saker heter i 20 olika mallar skulle det nog inte bli några tutorials alls.

    När man bygger en websida (blogg etc) börjar man att bygga skelettet som är html/xhtml. Sen lägger man till utseendet, alltså säger hur varje "skelett-del" ska se ut. Det är därför olika designers kan ha olika namn för saker, de döper själva sina html-grunddelar.

    Ofta heter det man söker efter inte exakt (om man inte har minima) men något liknande. Då är Google Chromes webläsarverktyg Web Developer bra, med det kan man kolla vad precis varje liten detalj heter och vad den har för css-egenskaper.
    Om du inte redan använder Chrome rekommenderar jag det verkligen, det är tack vare den webläsaren jag lärt mig så pass mycket som jag har gjort!

    ReplyDelete
  19. Kika förresten gärna in på vårt forum om du vill prata mer om css och html, jag finns där nästan varje dag och det är jättekul när någon är intresserad av webdesign tycker jag!

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Hej! Jag råka hitta din kogg på google. Och jag har två saker som jag undrar över när det gäller designen i blogspot. Om man vill ha in en bild i kommentarsfältet hur gör man då? Alltså i rutan där man skriver sin kommentar? Och hur gör man om man vill ha en fast bild liggandes längst ner i sitt blogginlägg så man hela tiden behöver klistra in sin bild/logo i slutet av inlägget? Mvh Wildberry

    ReplyDelete
  22. Jag svarade dig direkt på din blogg :-)

    ReplyDelete
  23. Hej! Tack för en supesida! Har kikat här inne i flera år känns det som och har lärt mej mycket genom dej!

    Nu till min fråga, vet du hur man gör för att rubrik samt kommentarsfält och etiketter under inlägget hämnar i mitten?

    Vill allstå kunna centrera hela inlägget, likaså i sidmenyn.

    Är mycket tacksam för svar, gärna inne hos mej! Kram

    ReplyDelete
  24. Hej! Hoppas du läser detta! Hur ska man göra så att ingen kan klicka på mina bilder i bloggen? (Alla bilder utom bannern). Skulle verkligen villa ha så att då någon klickar så händer det inget... Hoppas du fattade?! Svara gärna i min blogg, för jag är inte så säker på om jag hittar tillbaka hit... Tack på förhand!

    ReplyDelete
  25. Hej! Nybörjad hobbybloggare här!
    Har letat som en tok efter hur jag får inläggsrubrikerna att bli centrerade, men hittade endast hur jag centrerar headerbilden (som jag inte heller lyckade med ;) )
    Supertacksam för svar!

    ReplyDelete
  26. För att centrera inläggsrubriken, går du in i kodmallen, tryck CTRL+F och skriv h3.post-title i sökrutan som kommer upp. På så sätt kommer du till ett ställe i koden som ser ut ungefär så här:
    h3.post-title, h4 {
    font: $(post.title.font);
    text-align: left;
    padding: 0, 0, 0, 0px;
    color: $(post.title.text.color);
    }

    För att centrera rublikerna ändrar du där det står text-align. Ändra left till center.
    Lycka till!

    ReplyDelete
  27. Hej! får inte till det med text färgen på mina länkar..
    dom är blå ock lila hur jag än gör...
    vad kan vara problemet?

    ReplyDelete
  28. Photos_By_Niklas: Numera behöver du inte in i kodmallen för att fixa detta. Gå istället till Mall - Anpassa - Avancerat så ändrar du det enkelt där.

    ReplyDelete
  29. Emelie!
    Har ändrat till det jag vill ha där. ock i kodmallen är det också rätt
    men blir ändå blått o lila...
    så störigt..

    ReplyDelete
  30. Hej!
    Hur centrerar man datumrubrik samt kommentarfältet. Är inte så snyggt när det ligger åt vänster när resterande är centrerat :P
    Tacksam för hjälp!

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------