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.
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment