Wednesday 26 October 2011

How do I change my header on tumblr?

I'm familiar with html and css but only to an extent and this is really bugging me. I want to replace the top header portion(red square that says %26quot;D A N N Y%26quot;) with a picture.



Here's what it looks like now helloimd4nny.tumblr.com and I want to replace it with something like his header jaaaaaas.tumblr.com/ (I do have photoshop CS4 for that).



Here's my current html coding:



%26lt;html%26gt;

%26lt;head%26gt;

%26lt;title%26gt;{Title}%26lt;/title%26gt;

%26lt;meta http-equiv=%26quot;Content-Type%26quot; content=%26quot;text/javascript; charset=iso-8859-1%26quot; /%26gt;

%26lt;meta name=%26quot;description%26quot; content=%26quot;{MetaDescription}%26quot; /%26gt;



%26lt;!--

THEME BY ELLETRICITY

Theme Name: Polychromatic

Author: Gabrielle Wee

Credit: http://elletricity.tumblr.com

--%26gt;



%26lt;!-- CUSTOM THEME DATA --%26gt;

%26lt;meta name=%26quot;color:Background%26quot; content=%26quot;#121212%26quot;/%26gt;

%26lt;meta name=%26quot;font:Text%26quot; content=%26quot;Lucida Grande, Lucida Sans Unicode, sans serif%26quot;/%26gt;

%26lt;meta name=%26quot;color:Text%26quot; content=%26quot;#121212%26quot;/%26gt;

%26lt;meta name=%26quot;color:Links%26quot; content=%26quot;#100873%26quot;/%26gt;

%26lt;meta name=%26quot;color:Links on Hover%26quot; content=%26quot;#ff9900%26quot;/%26gt;

%26lt;meta name=%26quot;color:Header Background%26quot; content=%26quot;#ff9900%26quot;/%26gt;

%26lt;meta name=%26quot;font:Header%26quot; content=%26quot;Helvetica Neue, Arial, sans serif%26quot;/%26gt;

%26lt;meta name=%26quot;color:Header Font%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Description Background%26quot; content=%26quot;#ffb240%26quot;/%26gt;

%26lt;meta name=%26quot;color:Description Font%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Blog Background%26quot; content=%26quot;#ffc773%26quot;/%26gt;

%26lt;meta name=%26quot;color:Post Info Background%26quot; content=%26quot;#ffd596%26quot;/%26gt;

%26lt;meta name=%26quot;color:Tag Font%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Tag Background%26quot; content=%26quot;#ff9900%26quot;/%26gt;

%26lt;meta name=%26quot;color:Tag Background on Hover%26quot; content=%26quot;#00aa72%26quot;/%26gt;

%26lt;meta name=%26quot;color:Blockquote Border%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Chat Line Odd%26quot; content=%26quot;#ffd596%26quot;/%26gt;

%26lt;meta name=%26quot;color:Question Border%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Notes Background%26quot; content=%26quot;#ffd596%26quot;/%26gt;

%26lt;meta name=%26quot;color:Pagination%26quot; content=%26quot;#ffffff%26quot;/%26gt;

%26lt;meta name=%26quot;color:Following Background%26quot; content=%26quot;#ffd596%26quot;/%26gt;

%26lt;meta name=%26quot;color:Footer Background%26quot; content=%26quot;#ffdfb0%26quot;/%26gt;

%26lt;meta name=%26quot;if:Display People I Follow%26quot; content=%26quot;1%26quot;/%26gt;



%26lt;style type=%26quot;text/css%26quot;%26gt;



@font-face {

font-family:Helvetica Neue;

src:local(%26quot;Helvetica Neue Ultra Light%26quot;),

local(%26quot;HelveticaNeue UltraLight%26quot;),

local(%26quot;Helvetica Neue UltraLight%26quot;),

url('http://static.tumblr.com/imovwvl/Fpeku3ogz/helveticaneueultralight.ttf');

font-weight:100;

}



html * { margin:0;padding:0; }



body {

background-color:{color:Background};

background-image:url('http://static.tumblr.com/imovwvl/KzSku3hew/bg.png');

background-position:center center;

background-repeat:repeat-y;

}



div, table, td, p, font, textarea, input, code {

font-family:{font:Text}, Lucida Sans Unicode, Arial, Helvetica, sans serif;

font-size:11px;

color:{color:Text};

}



a, a:link, a:visited, a:active { color:{color:Links};text-decoration:none鈥?}

a:hover { color:{color:Links on Hover}; }



p { padding-bottom:7px; }



#container {

margin:auto;

padding:0px;

}



#content {

width:800px;height:auto;

margin:auto;

}



#header {

float:left;

margin-left:10px;margin-bottom:10px;

height:200px;width:780px;

background-color:{color:Header Background};

}



#headertext {

float:left;margin-top:100px;

width:100%;height:100px;

text-align:right;

}



#headertext a {

font-family:{font:Header};

font-size:100px;

font-weight:100;

color:{color:Header Font};

text-transform:uppercase;

}



#description {

float:left;

margin-left:10px;margin-bottom:10px;

padding:10px;

width:760px;

background-color:{color:Description Background};

color:{color:Description Font};

}



#description img.pf { max-width:50px;padding-right:10px; }



#blog {

float:left;

margin-left:10px;margin-bottom:10px;

padding:10px;

width:760px;

background-color:{color:Blog Background};

list-style-type:none;

}



.post { margin-bottom:10px; }



.postinfo {

float:left;

width:230px;

padding:10px;

background-color:{color:Post Info Background};

}



.postinfo ul { list-style-type:none; }



.tags a {

font-size:10px;

text-transform:lowercase;

text-decoration:none!important;

color:{color:Tag Font};

background-color:{color:Tag Background};

padding:2px;

-moz-b
How do I change my header on tumblr?
1. Remove the div with id=%26quot;headertext%26quot; and replace with an img tag. Your div with id=%26quot;header%26quot; should look like the following:

%26lt;div id=%26quot;header%26quot;%26gt;

%26lt;img src=%26quot;http://i45.tinypic.com/vdifs9.png%26quot; /%26gt;

%26lt;/div%26gt;



2. In your css, remove %26quot;height: 200px%26quot; from the %26quot;#header%26quot; css selector.



3. In the img tag, I'm using jaaaaaas.tumblr.com's image. To change it to your image, replace http://i45.tinypic.com/vdifs9.png with the location to your image.

No comments:

Post a Comment