Mina Fagerfjälls Design -

musikspelare

2008-07-31 @ 12:36:15

Skrivet av Mina Fagerfjäll i kategorin Grunderna | Permalink | Kommentarer (1)

Länkar

2008-03-19 @ 19:39:34

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! :)

Skrivet av Mina Fagerfjäll i kategorin Grunderna | Permalink | Kommentarer (0)

Header

2008-03-19 @ 19:05:00

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!

Skrivet av Mina Fagerfjäll i kategorin Grunderna | Permalink | Kommentarer (3)

Hur man får tag i en bildadress.

2008-03-19 @ 18:52:55

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.