General Question
How do I add a header image to the Ultralite Theme on Tumblr?
Im new at tumblr and just know extreme basics of HTML coding. but i would like to know how to add a header image to my theme. The blog is called ‘Ashley Abstract’ and i want the image to be centered on top of it. can anyone help me?
the web adress for my blog is www.ashleyabstrac.tumblr.com
and the url for the image i want to add is http://i292.photobucket.com/albums/mm9/joebrohoe6412/Photo160.jpg
thank you!
Composing members:
0
7 Answers
I tried clicking on the link to your blog, but just got an error page.
@phoenyx Missing t (abstract, http://ashleyabstract.tumblr.com/). Anyway it’s 2 am, so here’s a quick dirty fix for you (maybe someone else can actually put some thought behind this).
Find the div with the class header (<div class=“header”>) and remove the html inside (so you end up with <div class=“header”></div>). Now put the following html inside the empty div.
<a href=“http://ashleyabstract.tumblr.com/”>
<img style=“border:0px;width:_____x;height:_____px;margin:0 auto;” src=“_____.jpg” alt=“description of your image” />
</a>
Don’t forget to add the width and height of your image in pixels. This will give you a centered image that’s clickable to lead you back to your homepage.
the real link to my blog is:
www.ashleyabstract.tumblr.com
sorry!
< < clicked on the link to @ashley6412‘s tumbl… and immediately my eyes started to melt out of their sockets.
Srsly, you should have a Warning or Disclaimer page or something if you’re just gonna post Twilight images exclusively.
um rude? it was because it was the day of the premiere. and no one MADE you click it.
thank you to everyone else who is being helpful
its not working…
does anyone want to do it for me?
www.ashleyabstract.tumblr.com (<—blog)
http://i292.photobucket.com/albums/mm9/joebrohoe6412/Photo160.jpg (<—image)
im going to post the ENTIRE code for my theme below
i would like the image centered underneath the words ‘ashley abstract’ that is already there
thank you so much!
HTML code:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<!—DEFAULT—>
<meta name=“color:Background” content=”#fff”/>
<meta name=“color:Title” content=”#333333”/>
<meta name=“color:Description” content=”#BBBBBB”/>
<meta name=“color:Post Title” content=”#FCB310”/>
<meta name=“color:Text” content=”#444”/>
<meta name=“color:Inline Link” content=”#FCB310”/>
<meta name=“color:Quote” content=”#888”/>
<meta name=“color:Quote Border” content=”#FCB310”/>
<meta name=“color:Quote Source” content=”#555”/>
<meta name=“color:Link Post” content=”#FCB310”/>
<meta name=“color:Conversation Background 1” content=”#f4f4f4”/>
<meta name=“color:Conversation Background 2” content=”#d6d6d6”/>
<meta name=“color:Conversation Border” content=”#bbb”/>
<meta name=“color:Conversation Text” content=”#444”/>
<meta name=“color:Audio Entry” content=”#333333”/>
<meta name=“color:Date” content=”#666666”/>
<meta name=“color:Date Block” content=“9e9e9e”/>
<meta name=“color:Date Block Text” content=“831AE4”/>
<meta name=“if:Show people I follow” content=“0”/>
<!—END DEFAULT—>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<title>{block:SearchPage}Search results for ”{SearchQuery}” – {/block:SearchPage}{block:PostSummary}{PostSummary} – {/block:PostSummary}{Title}</title>
<link rel=“icon” href=”{Favicon}”/>
<link rel=“alternate” type=“application/rss+xml” title=“RSS” href=”{RSS}”/>
<meta name=“viewport” content=“width=600”/> <!—iPhone—>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}
<link rel=“stylesheet” href=“http://static.tumblr.com/xequfu2/HTCkl99d0/sifr-screen.css” type=“text/css” media=“screen” />
<link rel=“stylesheet” href=“http://static.tumblr.com/xequfu2/PoWkl99dp/sifr-print.css” type=“text/css” media=“print” />
<script src=“http://static.tumblr.com/xequfu2/nuqkl998u/sifr.js” type=“text/javascript”></script>
<script src=“http://static.tumblr.com/xequfu2/WDvkl99f9/sifr-config.js” type=“text/javascript”></script>
<style type=“text/css”>
body {
background-image:url(“http://i292.photobucket.com/albums/mm9/joebrohoe6412/Picture9.png”);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
background-color: {color:Background};
font-family:“Helvetica Neue” ‘Helvetica, Ariel’, sans-serif;
}
a {
color: {color:Inline Link};
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
h1 {
color: #333333;
padding: 0;
text-size: 100px;
margin-top: -15px;
margin-bottom: -15px;
}
h1 a {
color: {color:Title};
text-decoration: none;
}
.header {
font-family: helvetica sans-serif;
margin: 25px 0 50px 0;
width: 100%;
}
.header h1 {
line-height:56px;
font-size:100px;
font-weight:100;
letter-spacing:-2px;
text-transform:uppercase;
text-align: center;
}
.header h1 a {
font-weight:normal;
border:0 !important;
text-decoration: none;
}
.header h2 {
color:{color:Description};
font-size:16px;
font-weight:100;
letter-spacing:-1px;
line-height:22px;
text-align:center;
margin-right:55px;
}
div#content {
width: 550px;
margin: auto;
position: relative;
margin-top: 30px;
}
div#content div#sidebar {
position: absolute;
right: -170px;
width: 160px;
text-align: left;
}
div#sidebar {
font: Normal 20px Helvetica,sans-serif;
line-height: 20px;
color: {color:Description};
}
div#sidebar a {
color: {color:Description};
border:none;
}
div#sidebar a img {
border:none;
}
div.post {
position: relative;
margin-bottom: 50px;
padding-right: 40px;
text-decoration: none;
}
div.post div.datetime {
font-size: 12px;
line-height: 150%;
color: #555;
padding: 25px 25px 45px 0;
text-align: right;
}
div.post div.datetime a {
color: #555;
font-weight:bold;
}
div.post div.datetime a:hover {
opacity:.45;
}
div.post img.permalink {
width: 38px;
height: 32px;
border: none;
background-color: #fff;
position: absolute;
right: 560px;
top: 0px;
z-index: 10;
text-decoration: none;
opacity: 0.4;
}
div.post:hover img.permalink {
display: inline;
text-decoration: none;
background-color: #fff;
opacity: 0.99;
}
div.post h2 {
font-size: 26px;
color: {color:Post Title};
letter-spacing: -1px;
margin: 0px 0px 5px 0px;
text-decoration: none;
}
div.post h2 a {
color: {color:Post Title};
text-decoration: none;
font-family: Helvetica Neue, sans-serif;
font-weight: 100;
}
div.post div.caption {
font-size: 16px;
font-weight: bold;
color: {color:Text};
margin-top: 10px;
padding: 0px 20px 0px 20px;
text-decoration: none;
border:none;
}
div.post div.caption a {
color:{color:Inline Link};
text-decoration: none;
border:none;
}
div.post div.caption a:hover {
color:{color:Inline Link};
text-decoration: underline;
border:none;
}
/* Regular Post */
div.post div.regular {
font-size: 18px;
font-weight: 100;
color: {color:Text};
line-height: 20px;
text-decoration: none;
}
div.post div.regular img { max-width: 100%; }
div.post div.regular a {
color:{color:Inline Link};
}
div.post div.regular a:hover {
color:{color:Inline Link};
text-decoration: underline;
}
div.post div.regular blockquote {
font-style: italic;
border-left: solid 2px {color:Text};
padding-left: 10px;
}
/* Photo Post */
div.post div.photo img {
border-width: 0px;
}
div.post div.photo div.caption {
font: Normal 16px ‘Helvetica’, Verdana, Arial, sans-serif;
line-height: 16px;
color: {color:Caption};
}
/* Quote Post */
div.post div.quote div.quote_text {
font-family: Helvetica, sans-serif;
font-weight: bold;
color: {color:Quote};
border-left: solid 2px {color:Quote Border};
padding-left: 10px;
}
div.post div.quote div.quote_text span.short {
font-size: 16px;
line-height: 40px;
letter-spacing: -1px;
}
div.post div.quote div.quote_text span.medium {
font-size: 25px;
line-height: 27px;
letter-spacing: -1px;
}
div.post div.quote div.quote_text span.long {
font-size: 16px;
line-height: 20px;
}
div.post div.quote div.quote_text a {
color: {color:Quote};
}
div.post div.quote div.source {
font-size: 20px;
font-weight: Bold;
color: {color:Quote Source};
margin-top: 5px;
}
div.post div.quote div.source a {
color: {color:Quote Source};
}
/* Link Post */
div.post div.link a.link {
font: Bold 26px Helvetica, sans-serif;
letter-spacing: -1px;
color: {color:Link Post};
text-decoration: none;
}
div.post div.link span.description {
font-size: 13px;
font-weight: normal;
letter-spacing: -1px;
color: {color:Text};
text-decoration: none;
}
/* Conversation Post */
div.post div.conversation ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 1px;
border-left: solid 5px {color:Conversation Border};
}
div.post div.conversation ul li {
font-size: 12px;
padding: 4px 10px 4px 8px;
color: {color:Conversation Text};
margin-bottom: 1px;
}
div.post div.conversation ul li span.label {
font-weight: bold;
}
div.post div.conversation ul li span.user_1 {
color: #000000;
}
div.post div.conversation ul li span.user_2 {
color: #333333;
}
div.post div.conversation ul li span.user_3 {
color: #0a0;
}
div.post div.conversation ul li.odd {
background-color: {color:Conversation Background 1};
}
div.post div.conversation ul li.even {
background-color: {color:Conversation Background 2};
}
/* Audio Post */
div.post.div.audio {
background-color:{color:Audio Entry};
}
/* Video Post */
div.post div.video {
width: 500px;
}
#sidebar1 {
width: 275px;
margin-left:10px;
margin-top:20px;
}
#following {
padding:10px 60px 0 10px;
margin-left: -10px;
}
#following a img:hover {
opacity: 0.4;
filter: alpha(opacity=40);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;
}
#following a img {
margin: 2px;
}
#home {
background:url(http://static.tumblr.com/xequfu2/ErUkl99l3/home.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#home:hover {
background:url(http://static.tumblr.com/xequfu2/ErUkl99l3/home.png) no-repeat 0px -31px;
}
#random {
background:url(http://static.tumblr.com/xequfu2/QkYkl99pb/random.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#random:hover {
background:url(http://static.tumblr.com/xequfu2/QkYkl99pb/random.png) no-repeat 0px -31px;
}
#archive {
background:url(http://static.tumblr.com/xequfu2/ilikl99j9/archive.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#archive:hover {
background:url(http://static.tumblr.com/xequfu2/ilikl99j9/archive.png) no-repeat 0px -31px;
}
#tumbltape {
background:url(http://static.tumblr.com/xequfu2/bklkl99tt/tumbltape.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#tumbltape:hover {
background:url(http://static.tumblr.com/xequfu2/bklkl99tt/tumbltape.png) no-repeat 0px -31px;
}
#search {
background:url(http://static.tumblr.com/xequfu2/A83kl99rb/search.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
margin-bottom: -18px;
margin-left: 10px;
padding-left: 30px;
}
#search:hover {
background:url(http://static.tumblr.com/xequfu2/A83kl99rb/search.png) no-repeat 0px -31px;
}
#rss {
background:url(http://static.tumblr.com/xequfu2/fygkni88l/rss1.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#rss:hover {
background:url(http://static.tumblr.com/xequfu2/fygkni88l/rss1.png) no-repeat 0px -31px;
}
#download {
background:url(http://static.tumblr.com/internal/Gr6knjvpl/download.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#download:hover {
background:url(http://static.tumblr.com/internal/Gr6knjvpl/download.png) no-repeat 0px -31px;
}
#myspace {
background:url(http://static.tumblr.com/xequfu2/s8Lkni87o/myspace.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#myspace:hover {
background:url(http://static.tumblr.com/xequfu2/s8Lkni87o/myspace.png) no-repeat 0px -31px;
}
#last {
background:url(http://static.tumblr.com/xequfu2/nq7kni86t/last.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#last:hover {
background:url(http://static.tumblr.com/xequfu2/nq7kni86t/last.png) no-repeat 0px -31px;
}
#flickr {
background:url(http://static.tumblr.com/xequfu2/1Xckni862/flickr.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#flickr:hover {
background:url(http://static.tumblr.com/xequfu2/1Xckni862/flickr.png) no-repeat 0px -31px;
}
#vimeo {
background:url(http://static.tumblr.com/xequfu2/CiBkni8ad/vimeo.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#vimeo:hover {
background:url(http://static.tumblr.com/xequfu2/CiBkni8ad/vimeo.png) no-repeat 0px -31px;
}
#youtube {
background:url(http://static.tumblr.com/xequfu2/U40kni8b6/youtube.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#youtube:hover {
background:url(http://static.tumblr.com/xequfu2/U40kni8b6/youtube.png) no-repeat 0px -31px;
}
#delicious {
background:url(http://static.tumblr.com/xequfu2/Gm5kni82w/delicious.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#delicious:hover {
background:url(http://static.tumblr.com/xequfu2/Gm5kni82w/delicious.png) no-repeat 0px -31px;
}
#digg {
background:url(http://static.tumblr.com/xequfu2/DiYkni841/digg.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#digg:hover {
background:url(http://static.tumblr.com/xequfu2/DiYkni841/digg.png) no-repeat 0px -31px;
}
#facebook {
background:url(http://static.tumblr.com/xequfu2/HzAkni85b/facebook.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#facebook:hover {
background:url(http://static.tumblr.com/xequfu2/HzAkni85b/facebook.png) no-repeat 0px -31px;
}
#twitter {
background:url(http://static.tumblr.com/xequfu2/0Lpkni89j/twitter.png) no-repeat 0px -1px #ffffff;
height:30px;
cursor:pointer;
}
#twitter:hover {
background:url(http://static.tumblr.com/xequfu2/0Lpkni89j/twitter.png) no-repeat 0px -31px;
}
/* Footer */
div#footer {
margin: 40px 0px 30px 0px;
text-align: center;
font-size: 15px;
font-weight: 100;
color: {color:Description};
}
div#footer a {
text-decoration: none;
font-size: 24px;
color: {color:Description};
}
div#footer a:hover {
text-decoration: underline;
color: {color:Title};
}
div#credit {
font: Normal 13px Helvetica, serif;
font-size: 13px;
margin-top: 15px;
}
div#credit a {
text-decoration: none;
font-size: 13px;
color: {color:Inline Link};
}
{CustomCSS}
</style>
</head>
<body>
<div id=“nav”></div>
<div class=“header”>
<h1><a href=”/”>{Title}</a></h1>
<h2>{Description}</h2>
</div>
<div id=“content”>
<div id=“sidebar”>
<div id=“search”>
<form method=“get” action=”/search”>
<input type=“text” value=”{SearchQuery}” name=“q”/>
</form>
</div>
<div id=“sidebar1”>
<a href=”/”><div id=“home”></div></a>
<a href=”/random”><div id=“random”></div></a>
<a href=”/archive”><div id=“archive”></div></a>
<a href=”{RSS}”><div id=“rss”></div></a>
<!—To use the socail networks on the sidebar simply remove the comment arrows surrounding which ever one you wish to use and insert the link to your page between the empty quotes ie: <a href=“your link”><div id=“social network”></div></a>—>
<a href=“http://www.facebook.com/profile.php?ref=profile&id=1631250067”><div id=“facebook”></div></a>
<a href=“www.myspace.com/aashleyabstractt”><div id=“myspace”></div></a>
<!— <a href=””><div id=“last”></div></a> —>
<a href=“www.twitter.com/ashleywhaley”><div id=“twitter”></div></a>
<a href=“www.flickr.com/aashleyabstractt”><div id=“flickr”></div></a>
<!— <a href=””><div id=“vimeo”></div></a> —>
<!— <a href=””><div id=“youtube”></div></a> —>
<!— <a href=””><div id=“delicious”></div></a> —>
<!— <a href=””><div id=“digg”></div></a> —>
{block:IfShowPeopleIFollow}
{block:Following}
<div id=“following”>
{block:Followed}<a href=”{FollowedURL}”><img src=”{FollowedPortraitURL-40}” /></a>{/block:Followed}
</div>
{/block:Following}
{/block:IfShowPeopleIFollow}
</div>
</div>
{block:Posts}
<div class=“post”>
{block:Regular}
<div class=“regular”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/t8fkl9b47/text.png”
class=“permalink” alt=“permalink”/></a>
{block:Title}<h2><a href=”{Permalink}”>{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}
{block:Photo}
<div class=“photo”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/Vgrkl9b2g/photo.png”
class=“permalink” alt=“permalink”/></a>
{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class=“quote”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/Hhukl9b3e/quote.png”
class=“permalink” alt=“permalink”/></a>
<div class=“quote_text”><span class=”{Length}”>{Quote}</span></div>
{block:Source}
<div class=“source”>— {Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class=“link”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/GKrkl9b19/link.png”
class=“permalink” alt=“permalink”/></a>
<a href=”{URL}” class=“link” {Target}>{Name}</a>
{block:Description}
<span class=“description”>{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class=“conversation”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/oG5kl9azi/chat.png”
class=“permalink” alt=“permalink”/></a>
{block:Title}
<h2><a href=”{Permalink}”>{Title}</a></h2>
{/block:Title}
<ul>
{block:Lines}
<li class=”{Alt}”>
{block:Label}
<span class=“label user_{UserNumber}”>{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Audio}
<div class=“audio”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/PVikl9axc/audio.png”
class=“permalink” alt=“permalink”/></a>
{AudioPlayerBlack}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class=“video”>
<a href=”{Permalink}”><img src=“http://static.tumblr.com/xequfu2/P8Skl9b4x/video.png”
class=“permalink” alt=“permalink”/></a>
{Video-500}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
<div class=“datetime”>
Posted <a href=”{Permalink}” class=“permalink”>{Month} {DayOfMonth}, {Year} at {12Hour}:{Minutes}{AmPm}</a> {block:HasTags}in {block:Tags}<a href=”{TagURL}”>{Tag}</a> {/block:Tags}{/block:HasTags}
{block:Pagination}
{block:NoteCount} |
<a href=”{Permalink}”>{NoteCountWithLabel}</a>{/block:NoteCount} <br />
{/block:Pagination}
{block:SearchPage} |
{block:NoteCount}&
<a href=”{Permalink}”>{NoteCountWithLabel}</a>{/block:NoteCount} <br />
{/block:SearchPage}
{block:PermalinkPage} ||
<a href=”/”>home</a><br />
{/block:PermalinkPage}
</div>
</div>
{postnotes}
{/block:Posts}
<script type=“text/javascript”>var disqus_url = ”{Permalink}”; var disqus_title =”{block:PostTitle}{PostTitle}{/block:PostTitle}”;</script>{block:Permalink}<div id=“disqus_thread”></div><script type=“text/javascript” src=“http://disqus.com/forums/ashleyabstract/embed.js”></script><noscript><a href=“http://disqus.com/forums/ashleyabstract/?url=ref”>View the discussion thread.</a></noscript><a href=“http://disqus.com” class=“dsq-brlink”>blog comments powered by <span class=“logo-disqus”>Disqus</span></a>{/block:Permalink}<script type=“text/javascript”>
//<![CDATA[
(function() {
var links = document.getElementsByTagName(‘a’);
var query = ’?’;
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf(’#disqus_thread’) >= 0) {
query += ‘url’ + i + ’=’ + encodeURIComponent(links[i].href) + ’&’;
}
}
document.write(’<script charset=“utf-8” type=“text/javascript” src=“http://disqus.com/forums/ashleyabstract/get_num_replies.js’ + query + ’”></’ + ‘script>’);
})();
//]]>
</script>
<div id=“footer”>
{block:PreviousPage}
<a href=”{PreviousPage}”>« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href=”{NextPage}” font-size=“36px”>Next »</a>
{/block:NextPage}
<div id=“credit”>
Powered by <a href=“http://www.tumblr.com/”
target=“_blank”>Tumblr</a>
Designed by:<a href=“http://www.doinwork.tumblr.com/”
target=“_blank”>Doinwork</a>
</div>
</div>
</div>
</body>
</html>
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
