Månadsarkiv: augusti 2009

Lägga till en till sidomeny

Med tanke på att inlägget om stilmallen & kodmallar &  inlägget om padding & margin numera är publicerat så tycker jag att man kan egentligen lista ut det själv dvs hur man gör en till meny. Men jag tänkte förklara lite kort & gott hur man gör iaf! OBS!! Gör detta i en testblogg innan du publicerar designen i den aktiva bloggen.

1 ). Gå in i stilmallen och leta upp de koder som tillhör sidomenyn.
Vilket är dessa (kan se annorlunda ut):
#side {
float: left;
width: 180px;
margin: 0px;
padding: 24px 18px 0px 12px;
left:-30px;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #CCCCCC;
}

.navheader {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}

.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}

.nav ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}

.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}

.nav a { color: #000000; }
.nav a:hover { color: #ED6EA3; }

2 ). Kopiera dessa (de befintliga du har till din sidomeny inte de som jag har visat ovan) och klistra in dem. Döp om de genom att t ex sätta en 2a bakom. Det kan se ut såhär:

#side2 {
float: left;
width: 180px;
margin: 0px;
padding: 24px 18px 0px 12px;
left:-30px;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #CCCCCC;
}

.navheader2 {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}

.nav2 {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}

.nav2 ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}

.nav2 li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}

.nav2 a { color: #000000; }
.nav2 a:hover { color: #ED6EA3; }

3 ). Spara stilmallen.

4 ). Gå in i kodmallarna och scrolla till botten. Lägg detta kodstycke innan den sista </div>:

5 ). Spara och fortsätt att klistra in dessa koder i resterande kodmallar (entry page, category page & archive page)

6 ). Gå in i stilmallen igen.

7 ). Nu ska du positionera sidomenyn samt förstora wrapper så att den nya menyn får plats. Jag rekommenderar att du går in och läser padding & margin. Lycka till!

19 kommentarer »

Hur man gör en animation

Den tidigare guiden som jag har plockat från youtube är borttagen så jag uppdaterade inlägget med en videoguide som jag har publicerat i detta inlägg egentligen.

Det var en tjej som undrade hur jag gjorde detta:

Det är alltså en animation som jag har gjort i photoshop. Kika på videon nedan för att lära dig att göra animationer.


Lite svamligt men ni förstår nog ändå :)

16 kommentarer »

Stilmallen vs kodmallar


I stilmallen anger man hur allting ska se ut dvs storlek, positionering och färg. Man kan egentligen döpa det till vad man vill dvs t ex #entrybody kan heta #inlagg bara man anger <div id="inlagg"> i kodmallarna om man använder #inlagg istället för #entrybody (istället för <div id="entrybody">) så att kodmallen vet hur ”#inlagg” ska se ut. En liten vink bara, tänk på att ÅÄÖ inte uppskattats av kodvärlden.

Anledningen till att man gör detta i stilmallen är för att man ska slippa så mycket manuellt arbete som möjligt. Dvs om man vill ändra färg i entrybody ska man göra det i stilmallen istället för att lägga in koden <font color=”#cccccc”></font> mellan varje text i kodmallarna. Det ska vara smidigt att ändra designen.

» Här finns ett inlägg om vad allting innebär i en stilmall


I kodmallarna anger man vart allting ska sitta. Man lägger in div-koder på olika ställen. Anledningen till att blogg esse har fyra olika kodmallar är för att det finns 4 olika sidor. För en bättre beskrivning gällande blogg.se’s:

Kodmallen ”förstasida” = förstasidan dvs index-sidan
Kodmallen ”inläggssida” = kommentarsidan dvs så som det ser ut när man klickar på ett enskilt inlägg
Kodmallen ”kategorisida” = kategorisidan dvs så som det ser ut när man klickar på en viss kategori
Kodmallen ”arkivsida” = arkivsidan dvs så som det ser ut när man klickar på en en månad under arkiv

Detta är alltså skillnaden mellan stilmallen och kodmallar. Vi avslutar med vad några koder är stilmallen:

#wrapper = ramen kring allt, kan vi kalla det. Det som håller ihop hela designen. Jag gav ett exempel på det i ett tidigare tips (Man skulle kunna jämföra den med en tavelram – den håller ihop hela bilden). Om man t ex ska lägga in en till sidomeny så måste wrappern förstoras så att inte sidomenyn hamnar under allting.

#header = det som ligger först i designen. Det är där man för det mesta lägger in en bakgrundsbild.

#content = kan översättas till innehåll – det är content som håller ihop det som ligger i inläggen.

#h3 = rubriken i inläggen.

#entrybody = inläggen.

#entrymeta = där permalink, kommentarer, kategori-länk etc ligger ursprungligen.

#entrymeta a = länkar för permalink, kommentarer, kategori-länk etc.

#entrymeta a:hover = länkar för permalink, kommentarer, kategori-länk etc när man har musen över.

#commentheader, commenttext & commentmeta = se detta inlägg för bästa förklaring.

#side = sidomenyn.

#navheader = rubriken i sidomenyn (senaste inlägg, kategorier, arkiv, länkar).

#nav a = länkarna i sidomenyn. (nav a:hover = när man håller musen över dem).

#a = länkar i hela bloggen (förutom de som har enskilda koder t ex nav a/nav a:hover).

#a:hover = länkar i hela bloggen när man håller musen över dem.

13 kommentarer »

Fråga: Lägga upp koder på webben

OBS!! Denna publicitet är automatisk och jag är i England. Kommentarer godkänns när jag kommer hem vilket är måndag den 31a aug! Just nu är är det 2 timmar kvar tills första bandet börjar spela :headbang:

För att ladda upp koder via zip-filer:
1. Samla alla koder i en vanlig mapp
2. Högerklicka på mappen och välj ”skicka till – komprimerad mapp”
3. Nu ska du ladda upp bilden (går ej på blogg esse)

Jag laddar upp mina på min server under mappen tescho.se och då får jag adressen http://tescho.se/namnetpåmappen.zip.

4. För att få zip-filen till en länk använder du denna kod: <a href=”adressen”>Ladda ner zip-filen här</a>

Man kan även lägga in några koder i ”a href”-koden:
target=”_blank” = öppnas i nytt fönster
onfocus=”blur()” = gör så att det inte blir ränder runt länken (syns i firefox) [ mer info ]
title=”text” = vad som står när man håller musen över länken (byt ut text till det du vill)

För att ladda upp koder i boxar:
1. Skifta till läget html när koderna ska publiceras
2. Använd denna kod: <textarea readonly=”readonly rows=”8 cols=”50 onclick=”this.select();>koderna</textarea>

Info ang koden:
rows=”8 =hur många rader innan scrollern dyker upp
cols=”50 = hur många kolumner

Resultatet på koden som finns på nr 2 skulle se ut såhär:

1 kommentar »

Fråga: Rundade spegel-bilder

OBS!! Denna publicitet är automatisk och jag är i England. Kommentarer godkänns när jag kommer hem vilket är måndag den 31a aug! Just nu är jag troligtvis på Reading festival om allt har gått som det ska :headbang:

En fråga som har kommit upp är hur man gör rundade hörn samt spegla bilden. Jag måste faktiskt erkänna att tutorialen är en aning slarvig då det inte finns text/röst till hur man går tillväga. Jag hoppas att man förstår iaf och i framtiden kanske det kommer en bättre version :yes:

3 kommentarer »

Dagens lycka

Ja, och så kom dagen – dagen då vi åker till Reading festival! Wohow :D Vilken lycka! Det här ska bli superskoj. Jag hoppas bara att allting flyter på felfritt. De som har hängt med här på www.tescho.se vet om att detta år är lite krångligare när det gäller köp av biljetter osv.. Men jag tror att allting kommer flyta på!

Ang tidsinställda inlägg när jag är borta:

Jag har inte hunnit fixa det och därav blir det inga tips när jag är utomlands tyvärr.. Skoja! Haha. Vilken fuling. Det kommer dyka upp 5 st – 1 om dagen runt 10-12 på morgonen. Kommentarer godkänns när jag kommer hem och eventuella frågor besvaras då samt alla andra designfrågor som inte är besvarade!

Jag passar på att säga hej då nu, då jag inte vet om jag hinner något mer idag. Ha det bra i Sverige, för jag ska ha det kanon i England! Ni kan även spana in lineup:en om ni vill bli avundsjuka ;)

4 kommentarer »

Litet i stort format

En riktigt STOR bild på småttingarna (den till vänster är inte min – utan Bonzos tjej). Tänkte att det kanske skulle uppskattas av några. Jag hade ju en liten session med vovvarna och det var inte lätt. Självklart var jag tvungen att lägga in Bonzos tankar vid just detta fotot ;)

..och för de som inte uppskattar den stora bilden bifogar jag bilden ovan + 2 andra i mindre klickbara versioner. För att få alla glada och nöjda finns även dessa under i större format i galleriet.

Vovvarna Vovvarna Vovvarna - härliga personligheter, haha

8 kommentarer »

Fråga: Ta bort/ändra namnet i headern


Hej!

Först och främst: sätt in kodmallarna igen (front page, entry page, category page & archive page) för jag har tagit bort namnet där i de koder jag delar ut.

För att få bort namnet:
1 ). Läs ”först och främst:” ovan
Om du inte har en av mina designer och vill få bort det – forsätt då följa anvisningar nedan
2 ). Gå in i design > kodmallar
3 ). Leta reda på detta stycke:

<div id=”header”>
<h1><a href=”${BlogUrl}”>${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

4 ). Ta bort allting mellan <h1> och </h2>
Dvs så att det ser ut såhär:

<div id=”header”>
</div>

5 ). Spara och fortsätt göra samma sak med resterande kodmallar (entry page, category page & archive page).

För att ändra texten:
1 ). Gå in i design > redigera stilmall
2 ). Leta upp h1 & h2
3 ). Ändra under dessa två kodstycken

Såhär kan det se ut i stilmallen under dessa 2 (h1 & h2):

h1 {
font-family: arial, verdana, sans-serif; <– här ändrar du typsnitt
font-size: 14px; <– här ändrar du text-storlek
font-weight: bold; <– här ändrar du om det ska vara fet (bold), medium eller normal tjocklek på texten
color: #000; <– här ändrar du färgen
text-transform:uppercase; <– här ändrar du om det ska vara stora bokstäver (uppercase) eller ej (none)
margin: 0px;
padding: 0px;
: 30px;
}

h2 {
font-family: arial, verdana, sans-serif; <– här ändrar du typsnitt
font-size: 11px; <– här ändrar du text-storlek
font-weight: normal; <– här ändrar du om det ska vara fet (bold), medium eller normal tjocklek på texten
color: #000000; <– här ändrar du färgen
margin: 0px;
padding: 0px;
width: 170px;
}

4 kommentarer »

Måndag men egentligen tisdag

Idag (igår) har jag…

- tagit det lugnt
- ätit en hel vitlök
- pratat fast jag inte borde
- fått många kommentarer ang sjukdom
- fibblat på datorn
- bastat
- ätit blåbärspaj

Jag har inte ont i halsen, jag har inge feber men dock har jag ingen röst. Det här kom ju inte lägligt. Visst, om jag skulle ha kommit hem med 0,00 röst skulle det betyda att jag har haft väldigt kul i England men innan jag åker? Jag har iaf kört massa hemkurer b la ätit en hel vitlök (+ mat med vitlök i).

Nu i efterhand kom jag på….var det värt? Jag har ju inte ont eller feber. Jag kanske bara ska vara tyst, vilket jag inte ha varit idag!

3 kommentarer »

Vinnare är korad!

..vinner Elin designutlottningen! Grattis!

Den var 100 % ärlig och det komiska var att jag bad min karl att han skulle se efter om han fastnade för någon nominering. Båda scrollade lite fram och tillbaka – OCH började skratta samtidigt vid samma kommentar.

Det kommer fler designutlottningar! Har tänkt att iaf ha en i månaden. Den som väntar på något gott..

Edit: Jag kom precis på en lösning så att fler kan vinna. Men den lösningen avslöjas vid nästa utlottning :yes:

1 kommentar »