# Personlig header
Author: Maja2

Jag kan inte ett smack om att byta header, men undrar om det överhuvudtaget går att göra en mer personlig header på blogg.se

Jag skulle vilja ha egna foton i headern... men hur bövulen bär man sig åt?

## Comment 1
Author: Moa-16

[Här](http://www.designadinblogg.se/lagg-till-en-egen-bild-som-header/) kan du läsa hur man gör.

## Comment 2
Author: Jess89

för att gra en header behöver du ett redigersprogram tex gimp(gratis) eller photoshop. Du gör till en början en bild och sedan laddar upp bilden på bloggen. Du kan själv välja vilken storlek du ska ha på headern i programet.

## Comment 3
Author: Maja2

#2 ahaa... jag försökte att bara ladda upp en bild i bloggen, spara adressen och klippa in....

## Comment 4
Author: Maja2

äh... jag klarar inte av det tydligen... fniss... jag lägger ner hela projektet

## Comment 5
Author: MajaL

Ja visst går det. Jag har gjort min.

Var fastnar du?

## Comment 6
Author: Maja2

ok, jag har lyckats installera Gimp, laddat ner en bild där... och sen är det som att jag inte får det längre.... provar ladda upp bilden på bloggen, och jo det går ju.. men klistra in i stilmall? inom vilka paranteser?

## Comment 7
Author: Jess89

Vad har du sparat i för filformat? har du sparat i jpg format? du kan som sagt lägga in en bild från någon sida det är bara att du kopierar adressen från sidan. Koden ska läggas in i stilmallen under #header { koden. Då skriver du alltså **background: url(bildadressen);**

Känns det något klarare?

## Comment 8
Author: Maja2

#7 tycks ju göra precis så... men det händer inget

## Comment 9
Author: Jess89

hm.. du har inte glömt något tecken?

## Comment 10
Author: Maja2

jag vet inte ens om jag är på rätt ställe och skriver, eller om jag har gjort rätt. Eller,att jag inte har gjort rätt fattar jag ju, annars skulle det ju BLIVIT rätt... hahahaha

body {  
margin: 0px;  
padding:0px;  
background: #fff;  
}

a {color: #809FFF;}  
a:hover {color: #80FF9F;}

#wrapper {  
clear:none;  
height: 1%;  
}

p {  
padding: 0px 0px 0px 0px;  
margin: 0px 0px 0px 0px;  
}

#header {background:http:url(fk1 044)  
padding-left: 30px;  
padding-bottom:5px;  
padding-top:20px;  
margin: 0px;  
border-bottom:1px dashed #000;  
}

#side {  
width: 20%;  
margin-top: 50px;  
margin-left: 10px;  
margin-bottom:10px;  
padding: 24px 12px 0px 12px;  
background: transparent;  
}

#content {   
width: 55%;  
float: right;  
background: transparent;  
margin-top:50px;  
margin-right:5%;  
padding: 20px;  
voice-family:"\\"}\\"";  
voice-family:inherit;  
width:55%;    
}html>body #content { width: 55%; }

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

h1 {  
font-family: arial, verdana, sans-serif;  
font-size: 1em;  
font-weight: bold;  
color: #000;  
text-transform:uppercase;  
}

h2 {  
font-family: arial, verdana, sans-serif;  
font-size: .7em;  
font-weight: normal;  
color: #333;  
}

/\*\* Entry headers \*\*/  
h3 {  
background: #9FFF80;  
font-family: arial, verdana, sans-serif;  
font-size: .8em;  
font-weight: bold;  
padding:4px;  
color: #000;  
margin: 0px 0px 10px 0px;   
text-transform:uppercase;  
}

.navheader {  
font-family:  Arial, Helvetica, Sans-serif;  
font-size: 1em;  
font-weight: bold;  
color: #fff;  
padding:5px;  
margin-bottom:5px;  
background-color:#809FFF;  
text-transform: uppercase;  
}

.nav {  
font-family: verdana, Arial, Helvetica, Sans-serif;  
font-size: .7em;  
font-weight: bold;  
}

.nav ul {  
margin: 0px 0px 0px 0px;  
padding: 0px 0px 6px 0px;  
font-weight: normal;   
}

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

.nav a { color: #809FFF; }  
.nav a:hover { color: #80FF9F; }

/\*\* Post's body text \*\*/  
.entrybody {  
font-family: verdana, arial, helvetica, sans-serif;  
font-size: .7em;  
font-weight: normal;  
color: #000000;  
line-height: 150%;  
margin: 0px 0px 10px 0px  
}

/\*\* 'Posted by' txt \*\*/  
.entrymeta {  
font-family: verdana, arial, sans-serif;  
font-size: .65em;  
font-weight: normal;  
color: #666;  
text-align:right;  
}

.entrymeta a { color: #809FFF; }  
.entrymeta a:hover { color: #80FF9F; }

.commentheader {  
font-family:  arial, helvetica, sans-serif;  
font-size: .70em;  
font-weight: bold;  
background-color:#809FFF;  
padding:5px;  
color: #fff;  
}

.commenttext {  
font-family: verdana, arial, sans-serif;  
font-size: .70em;  
font-weight: normal;  
color: #000;  
line-height: 130%;  
}

.commentmeta {  
font-family: verdana, arial, sans-serif;  
font-size: .65em;  
font-weight: normal;  
color: #999;  
margin: 10px 0px 20px 0px  
}

.commentmeta a { color: #809FFF; }  
.commentmeta a:hover { color: #80FF9F; }

.commentform {  
font-family: verdana, arial, sans-serif;  
font-size: .70em;  
font-weight: normal;  
color: #333333;  
margin: 0px 0px 20px 0px  
}

.separator {  
border-top: 1px dashed #4271FF;  
border-bottom: 0px solid #CED2C8;  
margin: 14px 0px 14px 0px  
}

.default {  
font-family: Arial, Helvetica, Sans-serif;  
font-size: 11px;  
color: #333;  
font-weight: bold;  
padding: 0px 0px 10px 0px;  
text-transform: uppercase;  
}

.subside {  
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;  
font-size: .7em;  
font-weight: normal;  
padding: 0px 0px 0px 0px;  
}

  
.xmlButton {  
border:1px solid;  
border-color:#FC9 #630 #330 #F96;  
padding:0 3px;  
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;  
color:#FFF;  
background:#F60;  
text-decoration:none;  
margin:0;  
}

.image {  
border: 1px dashed #ffc105;  
background-color:#FFD042;  
padding:5px;  
margin: 0px 6px 6px 0px;  
}

.thumbnail {  
border: 1px dashed #ffc105;  
background-color:#FFD042;  
padding:5px;  
margin: 0px 6px 6px 0px;  
}

.video{  
padding: 0px 0px 0px 0px;  
}

.fieldName{  
font-family: verdana, arial, sans-serif;  
font-size: 11px;  
margin: 0px 0px 12px 0px  
}

select{  
font-family: verdana, arial, sans-serif;  
font-size: 11px;  
}

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
\* Calendar                                                      \*  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

#calendar {  
color: #333333;  
font-family: 'Trebuchet MS', Verdana, sans-serif;  
 padding: 0px 0px 6px 0px;  
text-align: left;  
}

#calendar table {  
padding: 1px;  
/\*border-collapse: collapse;\*/  
border: 0px;  
}

#calendar table caption {  
color: #777;  
font-family : Arial, Helvetica, Sans-serif;  
font-size : 0.7em;  
border-bottom: 1px solid #999999;  
text-align: left;  
font-weight: bold;  
text-transform: uppercase;  
padding: 3px;  
letter-spacing: .3em;  
}

#calendar table th {  
text-align: center;  
font-weight: bold;  
font-size: xx-small;  
}

#calendar table tr td {  
border: 1px solid #809FFF;  
text-align: center;  
font-size: xx-small;  
}

#calendar table tr ul  {  
color: #BBB;  
list-style: dot;  
margin: 0px 0px 0px 20px;  
padding: 4 0 5 0;  
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;  
font-size : 0.7em;   
}

#calendar table tr td.cssDayMouseOver {  
border: 1px dotted red;  
cursor: hand;  
}

#calendar table tr td.cssDayMouseOut {  
border: 1px solid #809FFF;  
}

#calendar table tr td.cssEntryBox {  
border: 1px solid gray;  
padding: 6px;  
text-align: left;  
background: #FFFFFF;  
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;  
font-size : 0.8em;  
}

#calendar table tr td ul li {  
}

#calendar table tr td div.cssDayEntryHeader {  
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;  
font-size : 0.8em;  
text-align: left;  
font-weight: bold;  
padding: 4;  
}

#calendar table tr td div.cssDayAvailable {  
text-decoration: underline;  
text-weight: bold;  
}

#profile {  
font-family: verdana, Arial, Helvetica, Sans-serif;  
font-size : 0.7em;  
margin-bottom: 10px;  
}

#profile h4{  
font-family:  Arial, Helvetica, Sans-serif;  
font-size: 1em;  
font-weight: bold;  
color: #fff;  
background-color:#809FFF;  
text-transform: uppercase;  
padding:5px;  
margin: 0px 0px 6px 0px;  
}

#profile p{  
}

## Comment 11
Author: Moa-16

Testa att sätta in det här:

#header {  
background: #ffffff url(DIN LÄNK) no-repeat right top;  
padding-left: 30px;  
padding-bottom:5px;  
padding-top:20px;  
margin: 0px;  
border-bottom:1px dashed #000;  
}

Du kan behöva ändra på siffrorna.

## Comment 12
Author: MajaL

I vilken storlek har du laddatupp bilden?

## Comment 13
Author: Jess89

Såg att du hade skrivit fel i din kod "background:http:url(fk1 044)" det ska ska **background: url(http://adressen)** så skriv om den koden och se om det fungerar. Kolla även vad du har för storlek på din bild.

## Comment 14
Author: MajaL

#13 Det är oftast sånt som är felet, så bra att du såg det! =)

## Comment 15
Author: Jess89

Kollade igenom lite fort så hade tur att jag såg det :) Hoppas att det ska fungera nu bara annars kan det vara fel på länken eller storleken på bilden. Men oftast kan man ju se bilden ändå.

Kom på att hon även bör tänka på vilken **höjd** hedaern har annars syns inte bilden. Höjden ändrar du vid koden height: 0px; där det står noll ändrar du bara till vilken höjd som passar din header.

## Comment 16
Author: Maja2

Å gud va jag provar, jobbar, provar....

#15 jag hittar inte height

## Comment 17
Author: Moa-16

#16 Du får du sätta in, height: 0px;

## Comment 18
Author: Maja2

ÅÅHHH...... nä, jag blir vansinnig... måste nog ta hit någon som handgripligen fixar det, för jag blir bara snurrig, men tack alla för att ni försökt hjälpa mig :)

## Comment 19
Author: Jess89

haha! vad förstår du inte? :) kan försöka att förklara på ett annat sätt.

## Comment 20
Author: Maja2

#19   fniss.... du, det är egentligen inte mycket jag förstår...   det är lite av hireoglyfer för mig...    hihihi

## Comment 21
Author: Jess89

#20 haha, bara att fråga på så hjälper jag dig :)

## Comment 22
Author: MajaL

Jag har själv köpt min design, så jag vet vad du menar TS. I början var jag helt lost på koder. Men jag har faktiskt lärt mig mer och mer efter hand. :)

## Comment 23
Author: Maja2

Jag ska på allvar försöka förstå allt det här ni försökt lära mig, senare ikväll. Snart ska jag på hundkurs, sen har jag zumba... men efter det ska jag sätta mig och klura :)

Tack igen för hjälpen!

## Comment 24
Author: ponnyfotot

byt tilll stilmallen fashion innan du försöker med headen är mitt tips, i den stillmallen behöver man inte lägga till några koden....

## Comment 25
Author: Maja2

#24  Åhh, tack för tipset :)

## Comment 26
Author: KaninPiggelin

Vilket format är headern sparad i? :) PNG,JPG o.s.v

## Comment 27
Author: Maja2

ok. Nu har jag bytt till fashion ... ser bra ut så långt. Nu skulle jag bara vilja byta de foton som ligger i headern, till mina egna foton.

## Comment 28
Author: ponnyfotot

#25 och 27

[http://www.designadinblogg.se/lagg-till-en-egen-bild-som-header/](http://www.designadinblogg.se/lagg-till-en-egen-bild-som-header/)

kola länken det var där jag lärde mej

## Comment 29
Author: Maja2

ÅÅHHHH.... nä.... gu va jag känner mig trög. Jag tycker ju att jag gör allt rätt... men det kommer inte upp någon bild . Det enda som hänt nu, är att de befintliga bilderna i stilmallen fashion, är borta....

## Comment 30
Author: Moa-16

#29 Testa att ta bort det jag skrev i #11 i din stilmall & sätt in:

#header {  
background: #ffffff url(LÄNK TILL DIN HEADER) no-repeat right top;  
padding-left: 90px;  
padding-bottom:14px;  
padding-top:30px;  
margin: 0px;  
width: 810px;  
height: 410px;  
}

Då kan jag lova att det kommer synas en bild, men du lär behöva ändra siffrorna, då det där är så det passar i min blogg.

## Comment 31
Author: Maja2

Nä.... fortfarande ingen bild

## Comment 32
Author: Moa-16

#31 Men tar du adressen till bilden då? Kan du ju nästan inte göra.

## Comment 33
Author: Maja2

japp, jag laddar upp bilden i bloggen och kopierar adressen

## Comment 34
Author: Moa-16

#33 Då vet jag inte vad du gör fel, det ska fungera.

## Comment 35
Author: Maja2

Ja, nåt blir ju bevisligen fel eftersom det inte funkar.

Vad menar du med att jag lär få ändra siffrorna? Vilka siffror, och till vad?

## Comment 36
Author: Moa-16

background: #ffffff url(LÄNK TILL DIN HEADER) no-repeat right top;  
padding-left: **90**px;  
padding-bottom:**14**px;  
padding-top:**30**px;  
margin: 0px;  
width: **810**px;  
height: **410**px;  
}

Siffrorna så headern hamnar rätt. Om du ger mig din stilmall + bilden så kanske jag kan få det att fungera? Har gjort en del designer.

## Comment 37
Author: Maja2

Har börjat förstå lite nu, och har kommit dithän att jag fått ett utrymme som är vitt, men får inte dit bilden. Den kommer inte upp helt enkelt.

## Comment 38
Author: MajaL

#37 Härligt att det går framåt! :)

## Comment 39
Author: Jess89

Lägg upp din kod så får vi se om du har glömt några tecken el dylikt..

## Comment 40
Author: Maja2

#header {  
background: #FFFFFF url([http://publishme.se/1595181/images/173013737/](http://publishme.se/1595181/images/173013737/)) no-repeat right center;  
padding-left: 90px;  
padding-bottom:14px;  
padding-top:30px;  
margin: 0px 0px 20px;  
width: 810px;  
height: 410px;

## Comment 41
Author: Jess89

Ser varför det inte fungerar :) du måste trycka på bilden och sedan kopiera adressen du har inte klickat på bilden. Efter att du har klickat på bilden och kopierat den adressen ska det fungera :)

## Comment 42
Author: Moa-16

#40 Precis som #41 skriver så måste du tycka på bilden, sen ska det nog fungera!

## Comment 43
Author: Maja2

YYYYEEEEEEEEEEEEEEEEESSSSSSSSSSSS :) :) :)   Tusen tack!!! Nu kommer nästa fråga: Jag skulle vilja ha in flera bilder bredvid varandra... fniss.... hur fixar jag det i redigeringsprogrammet?

## Comment 44
Author: Moa-16

#43 Beror på vilket program du har. I dom flesta är det väl bara att öppna fler bilder...

## Comment 45
Author: Maja2

Jag har Gimp :)   Nu är det ju rent skoj, när man så smått börjat fatta... men bildredigering har jag aldrig någonsin hållit på med, så där får jag nog harva på ett tag innan jag förstår. Så det där med att det "bara" är, är inte så "bara" för mig :) :) men jag ska fanimig lära mig :)

## Comment 46
Author: KaninPiggelin

#45 på min Gimp måste man spara i JPG eller PNG om det ska fungera,då den sparar i något annat filformat annat auotomatiskt  :)

## Comment 47
Author: Maja2

#46 ok. så man laddar bara upp en bild till, på samma sätt som den första? och då kläms den in BREDVID den man laddat upp?

## Comment 48
Author: KaninPiggelin

Nu förstår jag inte riktigt vad du menar :)

det jag menar är att man måste spara headern/teckningen i ett annat format. T ex: minheader.PNG eller minheader.JPG  
  
Det är bara gå in på teckiningen,klicka på spara som och sen bara ändra formatet :)

## Comment 49
Author: Moa-16

#47 Nu har jag inte gimp men jag kan tänka mig att man måste kopiera & klistra in bilden på samma lager?

#48 Varför måste man det? Det spelar väl ingen roll vad den heter?

## Comment 50
Author: KaninPiggelin

#49 på mitt Gimp spelar det roll, annars funkar det inte :) Men kanske beror på vilket Gimp man har, den finns ju olika :)

## Comment 51
Author: MajaL

#50 Vilket gimp har du?

## Comment 52
Author: KaninPiggelin

#51 Gimp till mac, vet dock inte vad det heter exakt :)

## Comment 53
Author: Maja2

Hmm. Ok... försöker förstå det där med lager....  om jag laddar upp en bild i Gimp...  så mycket klarar jag. Hur ska jag kunna klistra in andra bilder på samma lager, utan att bilderna hamnar på varandra?

## Comment 54
Author: Moa-16

#53 Du får göra båda bilderna mindre så dom får plats, eller så klistrar du in bilderna du ska ha på ett tomt blad.

## Comment 55
Author: Maja2

#54 Ok, ska pyssla med det där sen ikväll :)    Tack så mycket för hjälpen!