Mina Fagerfjälls Design

Det här är koden ni ska klistra in
<div id="side">
<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4></h4>
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="DIN BILDADRESS" alt="Min profilbild" /></a>
<p><a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a></p> <div class="Post's body text">
<p> DIN TEXT</p> </div>
</tag:if>
</tag:profile>
</div>

Nu har jag visat de mesta av grunderna som kan behövas när man ska lära sig hur bloggdesignen fungerar. Nu framöver ska jag visa er hur man gör småsaker i bloggen som att byta till stor profilbild, flytta upp datumet till under rubriken osv.

Meningen med grunderna i början var för att ni själva skulle förstå vad det är ni egentligen gör. Samt för att ni skulle kunna fixa till designen om något gått på tok.

Är det något moment ni undrar över så är det bara att ställa frågor så tar jag upp det här i bloggen.
Återkommer strax med nya inlägg!

Det här med länkar gör ganska så mycket. Ni håller kanske med om att de länkarna som finns med i de färdiga stilmallarna ser förskräckliga ut. Nu ska ni få lära er hur man kan ändra färg och form på dem.

Länkarnas utseende bestämmer man i Stilmallen, vart de ska sitta bestämmer man i Kodmallen. Precis så är allt annat också uppbyggt.

Det finns länkar för de vanliga som man har i inläggen, de som är under inläggen (Kommentarer, Permalink osv), länkarna som är vid sidan under Arkiv och Kategori-rubrikerna och sen länkarna som kommentatorerna lägger ut på deras bloggadresser. Det är 4 stycken olika länkar med 4 olika platser i Stilmallen.

Såhär ser länkarna ut i Stilmallen:

Länkarna i allmänhet (effekt: länken är understruken)
a {color: #ff5db8;text-decoration:underline;}
a:hover {color: #333;text-decoration:underline;}

Länkarna i sidan (effekt: länken blinkar)
.nav a { color: #000000;text-decoration:blink;}
.nav a:hover { color: #ff5db8;text-decoration:blink;}

Länkarna under inläggen (effekt: länken blir större när man håller pilen på den)
.entrymeta a { color: #ff5db8; text-decoration:none;}
.entrymeta a:hover { color: #333;text-decoration:none; font-size:14 px}

Länkarna från kommentatorerna (effekt: länken är markerad med bakgrundfärg)
.commentmeta a { color: #FFFFFF; text-decoration:none; background-color: #666}
.commentmeta a:hover { color: #000000;text-decoration:none; background-color: #666 }

Ni ser ju att de ligger på två rader. Den första raden står för hur länken ser ut när man bara ser den. Den andra raden står för hur länken ser ut när man sätter pilen över den.

Det första ordet i koden står för placeringen, kika i mitt Stilmallslexikon om ni undrar vad olika ord betyder. Sen kommer färgkoden som ni säkert känner igen vid det här laget. Efter det står det text-decoration som betyder just dekoration. Länken kan vara understruken, blinkande och en massa andra effekter. Det står dekorationen för. Man kan som ni ser välja dekorationer för både innan och efter man håller pilen på den.

I länkkoderna ovan har jag satt ut olika slags text-dekorationer. Det är bara att pröva er fram tills ni hittar någon som faller er i smaken. Jag har ingen dekoration på mina, jag tycker det ser stilrenast ut. Men det är helt upp till er!

Länkar i Kodmallen(HTML) ser ut såhär
textlänk - <a href="länkadress" >text</a>
bildlänk - <a href="länkadress"><img src="bildadress" /></a>

De sätter man ut där man vill ha dem i kodmallen och där ändrar man endast vart länken ska gå och vad som ska vara en länk. Men det finns även sidor som inte har några stilmallar, då ska man även sätta in färg, textdekorationen och det i HTML. Men det tar vi någon annan gång om ni är intresserade! :)

När du ska göra en header är det en del att tänka på. Jag rekommenderar er verkligen att ha Photoshop när det kommer till att göra egna headers. Eller något annat program där man kan bestämma exakt hur hög och bred bilden ska vara (i pixlar). Man måste nämligen veta hur bred den ska vara så att den passar in i designen. Höjden spelar ingen roll, den är lätt att ändra på efteråt.

Man kan med hjälp av olika metoder lista ut hur stor headern bör vara.
Man kan antingen printscreena in designen i programmet och mäta ut så att headern blir lika bred som den print-screenade bilden. Eller så kan man ta reda på hur bred den är i stilmallen

#wrapper {
text-align: left;
width: 825px;
position:relative;
margin:0px auto;
padding: 0px 10px 10px;
vertical-align: top;
}

#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}

Det här är min stilmall och min header är 825 pixlar bred och 196 pixlar hög.
Men det är olika från stilmall till stilmall, på vissa ser det ut såhär:

#header {
background: #FFFFFF url(bildadress);
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}

Ni kan ju självklart göra en så stor header ni vill (så länge det är rimligt) och sedan ändra siffrorna i stilmallen där jag visade.

Då har vi kommit över storleken, vart sätter man då in headern?
Det är bara att klistra in er bildadress under header i stilmallen, här:

#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}

Är det så att inte hela headern syns eller att det blir flera på rad så är det bara att justera height-värdet som även ligger under header till ni blir nöjda.

Svårare än så är det inte, Lycka till!

När man fixar med designen behöver man ofta använda sig av URL-adresser till bilder. För er som inte vet hur så ska jag visa hur man ska ta sig till.

För det första måste du ha en bild som antingen redan ligger ute på internet eller som finns i din dator. Finns den på internet högerklickar du på bilden och klickar på Egenskaper som finns längst ner, sedan kopierar du Adressen (URL).


Finns bilden på din dator så finns det olika sidor där man kan ladda upp bilder. Jag tycker inte att ni ska ladda upp bilderna på bloggen om ni vill ha det till designen, det är inte bra kvalité på de bilduppladdningarna. Förut har jag använt mig av imageshack, men jag har konstaterat att den sidan är lite krånglig. Nu har jag ett konto på pici.se som är en jättebra sida som är urenkel att förstå sig på. Man behöver inget konto, men annars visas bilderna upp för alla och det har man inte alltid lust med. För att bli medlem är der bara att registrera sig i högra hörnet, tar max 30 sek.


När du har bildadressen är det bara att använda den i vilka sammanhang du vill, som bakgrund, header, profilbild eller vad som helst!

Först och främst ska du välja ut en bakgrundsbild. Jag rekommenderar att man väljer en symmetrisk bakgrund (som en tapet) där inga kanter existerar för snyggast resultat. Ett vanligt fotografi bildar kanter där fotografit tar slut som inte är särskilt snyggt.

Såhär ser det ut i början av stilmallen. Finns det redan en kod, byt ut den mot din. Finns det ingen kod, skriv till så att det ser likadant ut och klistra in bakgrundskoden.


Om det alltså ser ut såhär
body {
background: #FFFFFF;

Skriv till url(bakgrundsadressen) mellan #färgkoden och ;

Hoppas ni förstår och lycka till!

Kodmallarna är uppbyggda med HTML. Jag ska nu visa er grunderna för HTML.
Det är på kodmallen du t ex. ändrar profilbilden, ändrar ordningen på olika saker i bloggen, ändrar färdiga texter som Arkiv, Kategorier osv. Det finns några olika sorters kodmallar; Startsida, Arkivsida, Kategorisida, XML-syndikeringsida (rör inte och Inläggssida. Alla dessa kodmallar sköter olika delar.

Startsida - Kodmallen för hur det ser ut när man först kommer in på bloggen.
Arkivssida - Kodmallen för hur det ser ut när man klickar sig fram i Arkiven
Kategorisida - Kodmallen för hur det ser ut när man klickar sig fram bland Kategorierna
Inläggssida - Kodmallen för hur det ser ut när man har klickat sig in på ett speciellt inlägg

Man kan säga att stilmallen och kodmallarna är beroende av varandra. I stilmallen bestämmer man t ex. en massa olika texters utseende (teckensnitt, storlek, färg) i Kodmallen bestämmer man vilken av textstilarna som ska sitta vart.

Exempel.
Stilen för datumtexten för varje inlägg är den här. De här koderna betyder att det är teckensnittet verdana, texten är i storlek 10, texten är normal (ej fet, kursiv eller understruken), den är färgen #666 (mörkgrå), det är 25 px mellanrum mellan den vänstra kanten och texten och texten börjar från vänster sida.

.entrymeta {
font-family: verdana;
font-size: 10px;
font-weight: normal;
color: #666;
padding:25px;
text-align:left;
}

Hur vet jag då att det just är den som är datumtexten?
Jo, i kodmallen ser det nämligen ut såhär:

<div class="entrymeta">
${EntryDate} @ ${EntryTime}</div>

Det betyder att stilen för datumet är entrymeta och som ni kommer ihåg så är det just den stilen som jag beskrev i stilmallen. Som ni kanske ser så är koden uppbyggd med en kod före datum-kombinationen och en kort kod efter. Det betyder att man vill att endast datumet ska vara av stilen entrymeta och inte den som kommer efter, det är en kod som säger till när det ska ta slut. Många koder är uppbyggda på det viset.



bildlänk - <a href="länkadress"><img src="bildadress" /></a>


bakgrund - <body background="bakgrundsadress">
Fönstertext - <head><title> ♥ Mina Fagerfjäll</title></head>


Är det någon mer kod som ni vill ha reda på eller något ni tycker jag har glömt så är det bara att kommentera om det här under.

För att byta design på bloggen måste ni veta en del om stilmallen. Här visar jag grunderna för stilmallen. Det är på stilmallen du ändrar t ex. färger och storlekar, men även din bakgrundsbild och din header.

För att hitta Stilmallen går du in under fliken Design> Redigera Stilmall. Först ser koderna helt oförståeliga ut, här kommer ett litet lexikon som hjälper er att förstå bättre.

Stillmalls-lexikon
background - bakgrund (det som är utanför det vita, i mitt fall vanlig grå färg)
a- Länkar (efter a: kan du fylla i hur dina länkar ska se ut innan och när du håller pilen på dem)
wrapper - hölje (självaste bloggen i helhet, både sidan och där inläggen är)
header - huvudbanner (det översta på bloggen, där det står Design-hjälpen)
side - Sidan (sidan på bloggen, där profilbilden är och där arkiv och kategorier ligger)
content - Innehåll (Det brevid sidan, där dina inlägg postas)
h1 - Headertexten för din blogg ifall det inte står på din header-bild
h2 - Undertexten för headertexten ifall det inte står på din header-bild.
h3 - Rubriker på dina inlägg
navheader - Rubrikerna vid sidan (Sök i bloggen, senaste inläggen, arkiv osv.)
nav - Texten under rubrikerna vid sidan (dina kategorinamn, månaderna i ditt arkiv osv.)
entrybody - Brödtexten (självaste texten i dina inlägg
entrymeta - texten för datum och kategori, permalink, kommentarer under ditt inlägg
commentheader - Texten där det står vem som har postat en kommentar (Postat av: Mina)
commentext - Själva texten som någon har kommenterat
commentmeta - texten för datum och URL under själva kommentaren
seperator - Linjen mellan inläggen
# - Färgkods-tecknet (t ex. #FFFFFF är färgen vit och #000000 är färgen svart)
px - en pixel är en bildpunkt. Med en siffra framför px kan man bestämma storleken på olika saker. (12 px är detsamma som storlek 12 på Word)

När man förstår dessa begrepp är det bara att sätta igång. Jag kommer att posta olika inlägg för varje moment så att det är lättare att hitta när ni behöver hjälp.

Det här är min blogg för endast design-hjälp.
Här kommer jag att visa er hur ni gör för att få till den bloggdesignen ni vill ha. Jag kommer att dela med mig av mina tips och svara på era frågor som ni har om just design.

Den här bloggen är även till för att skärma av min vanliga blogg från den här så att jag slipper kommentarer om bloggdesign där. Så jag ber er att ställa era frågor om bloggdesignen här istället. Jag kommer att uppdatera i mån av tid. Ibland oftare. Ibland mer sällan. Nya kategorier kommer att växa fram så småningom. Har ni frågor, var inte rädda för att ställa dem. Det är nämligen ni och era frågor som gör bloggen, glöm inte det!