HTML - Tumblr Sidebar Help

I have a header on top of my profile
http://stevespeeps.tumblr.com/

However is there any way I can have it on top like that with like
a facebook twitter & myspace icon with a navigation bar like message pics etc

The way I have it set up is just an image as a header & it seems thats the only way I can figure out how to put it up there. I tried a div code & did the slice tool thing but
nothing was aligned & did not work

Any help will be greatly appreciated =)

Hello,

I am trying to make it so my tumblr will show 5-10 photos of my latest "likes". I found this code and it works but it lines the photos up top to bottom in a single row and I would like them from left to right placed next to each other.

{block:Likes}
<center><div id="likes_container">
<h2>Stuff I like</h2>

{Likes limit="5" summarize="100" width="150"}

</div></center>
{/block:Likes}

Everything on my site is centered and the background is stationary so people just scroll my tumblr easily. no sidebars etc...

Thank You for any help on this.

Hi,

I'm doing some tweaks to my tumblr layout, and I'm really, really bad at this.

What I need help with is the image scaling. The layout has standard 550 width for images posted. However, this makes all images this width automatically. For photos that are bigger than 550 px it's fine, they can be made smaller, but I wish to remove the feature that makes smaller photos being scaled up. F.ex. if I post an image with 200 or 300 px width, I don't want it to be scaled up to 550 px, I want it to stay in it's original, smaller size. How can I do this? Here's my code for images:

{blockhoto}
<div id="entry">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{blockermalinkPage}{LinkOpenTag}{/blockermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{blockermalinkPage}{PhotoURL-HighRes}{/blockermalinkPage}" alt="{PhotoAlt}" max-width="550"/><div style="margin-top:-4px; margin-bottom:-4px;"></div>
{block:IndexPage}</a>{/block:IndexPage}
{blockermalinkPage}{LinkCloseTag}
{/blockermalinkPage}
{block:Ifshowcaptions}{Caption}{/block:Ifshowcaptions}</div>

Thanks in advance.

/V

I am using Fusels Heart In A Cage theme for my tumblr blog. I decided to put a custom header image on top of where my posts go and my sidebar.
You can see my problem he http://mainichi-melonpan.tumblr.com/

My header image's (Harmony Dreams) width is longer than the body on the theme. Also, if you can see, there is a small gap in between the image and the body where the background is showing through. What do I need to look for in the HTML coding to change the height and width of the body to match my image? Or do I need to change the image instead?

Thank you in advance for the help!

Hello, this is my first post in this forum. Nice place you got here =P I may stay around to learn something about html for once XD

Anyway, I just need a quick solution.

My tumblr (nocleansocks.tubmlr.com) has a slightly edited html in it. I know the bare basics, and I was able to edit an existing theme to fit in some minor altercations, and I got it to where i wanted it except for ONE little detail.
On the left sidebar, the two "lines" that are on the top and bottom of the text have a border. The theme's layout's preview shows no border (they blend flawlessly into the background) but when I installed the theme WITHOUT my changes, they were like that.
How might I go about removing those borders? As far as I can tell, the HTML says border: none; where it is supposed to.

I edited the HTML code for my theme to allow me to have a link to my ask box but the box has gone weird. Here's a link: http://wir3donacid.tumblr.com/ask
Basically, it won't let you see what you're typing in the box, you can still ask something but you can't see what you've typed. Is there a way I can edit this, or fix it? Here's a link to my Tumblr, the HTML code should be available from the http://wir3donacid.tumblr.com/
If you can edit the code yourself that would help, or just advice on how to fix this, cheers ):
Plus, aspects of my theme aren't working; I think the endless scrolling is mucked up. I'm not great with HTML codes so, if anyone wants to try and fix any problems with it and send me the HTML code or something, I think it just needs tweaking. THANK YOU

Basically, I have created this theme http://rmlewisuk.tumblr.com which works fine on a blog with many posts, but when I install the theme on a blog with no posts, only the header shows. The sidebar and footer do not.

Here is the code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<link rel="stylesheet" href="http://manordesign.co.uk/therobb/resources/blog/style.css" type="text/css" media="screen">
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
        <meta name="description" content="{MetaDescription}" />
        {/block:Description}
        <meta name="text:TwitterUsername" content=""/>
        <meta name="text:Tagline" content="Put your own tagline here"/>
       	<meta name="color:Background" content="#ffffff"/>
		<meta name="color:Font" content="#555555"/>
		<meta name="color:Link" content="#ff0000"/>
		<meta name="color:Link Hover" content="#a8a8a8"/>
		<meta name="color:Title" content="#000000">
		<meta name="color:Post Title" content="#000000">
		
		<title>{block:PostTitle}{PostTitle}{/block:PostTitle} | {Title}</title>
		
		        <style type="text/css">

body 	{ 
		background: {color:Background};
		color: {color:Font};
		}
		
a:link	{
		color: {color:Link};
		}

a:hover	{	
		color: {color:Link Hover};
		}
		
h1		{
		color: {color:Title};
		}
		
h2		{
		color: {color:Post Title};
		}


            		{CustomCSS}
        		</style>
	
	</head>

	<body>
<div id="wrapper">
	<div id="header">
		<a href="/"><h1>{Title}</h1></a>
		<p>{text:Tagline}</p>
	</div>

	<div id="content">
			{block:Posts}

					{block:Text}
					<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<div>
						{block:Title}
						<h2><a href="{Permalink}">{Title}</a></h2>
						{/block:Title}
						<div>
						{Body}
						</div>
					</div>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
				{/block:Text}
				
				    {block:Photo}
                    <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<li class="post">
                        <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
                {/block:Photo}
				
				{block:Photoset}
                    <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<li class="post">
                        {Photoset-400}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
                {/block:Photoset}

				{block:Quote}
                    <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<li class="post">
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </li>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
                {/block:Quote}
				
				
				 {block:Link}
                    <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<li class="post">
                        <h2><a href="{URL}" class="link" {Target}>{Name} &rarr;</a></h2>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
                {/block:Link}
      
                {block:Chat}
                <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
                    <li class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <strong><span class="label">{Label}</span></strong>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
                    <p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
                    <hr/>
                {/block:Chat}
                
                {block:Audio}
                <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
                    <li class="post audio">
                        {AudioPlayerGrey}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                    <p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
                    <hr/>
                {/block:Audio}

				
				{block:Video}
                    <h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
					<li class="post">
                        {Video-400}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
					<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
					<hr/>
                {/block:Video}
                
                {Block:Answer}
                	<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
                	<li class="post">
						<a href="{Permalink}">{Question}</a>
                		<p>{Answer}</p>
                	</li>
                	<p><a href="{ShortURL}">Permalink</a></p>
                	<hr/>
                {/Block:Answer}
				
				{/block:Posts}
				
				{block:Pagination}
					{block:PreviousPage}<a href="{PreviousPage}">Newer Posts&nbsp;&nbsp;</a>{/block:PreviousPage}
					{block:NextPage}<a href="{NextPage}">Older Posts</a>{/block:PreviousPage}
				{/block:Pagination}
	</div>
	
	<div id="sidebar">
		<p class="image"><img src="{PortraitURL-128}"></p>
		<h3>About</h3>
		{Block:Description}
		<p>{Description}</p>
		{/Block:Description}
		
		
		{Block:HasPages}
<hr/>
<h3>Links</h3>
		{block:Pages}<a href="{URL}">{Label}</a><br/>{/block:Pages}
		-<br/>
		{/Block:HasPages}
		{Block:AskEnabled}<a href="/ask">{AskLabel}</a><br/>{/Block:AskEnabled}
		
		<br/>
		<hr>

		
		{Block:IfTwitterUsername}
		<h3>Twitter</h3>
		<ul id="twitter_update_list"></ul>
		<p><a href="http://twitter.com/{text:TwitterUsername}">Follow me</a> on Twitter</p>
		<hr>
		{/Block:IfTwitterUsername}

		<p class="image"><a href="http://panic.com/coda/"><img src="http://manordesign.co.uk/therobb/resources/blog/coda.png"></a></p>
		<hr>
		<p class="image"><a href="http://manordesign.co.uk"><img width="70%"src="http://manordesign.co.uk/therobb/resources/blog/logo.png"></a></p>

		
	</div>

	
	<div id="footer">
	Manor Sans Theme by <a href="http://manordesign.co.uk">Manor Design</a> | <a href="/archive">Archive</a>&nbsp;|&nbsp;
		<a href="{RSS}">RSS</a>	</div>
</div>

		<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
		<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{text:TwitterUsername}.json?callback=twitterCallback2&count=5"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-13281881-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

	</body>
</html>

Does anyone know the reason for this and how I might go about fixing it?

Thanks in advance.

Hello all,

I am so stuck with customisation of my Tumblr account.

I have added a custom header/banner to the page but the object (arrow) to link into each post is lost under the the header banner (I'm assuming)

You can see what I mean by seeing a normal one first;

http://organ-theme.tumblr.com/

Then looking at mine.

http://valvechild.tumblr.com/

How do I change the relative position of the linking arrows that appear so that they appear in an accessible spot above the posts as usual?

Thanks for any help.

Mark.

html help? heres the link to my blog:
http://annnnabeee.tumblr.com/

see how i have infinite scroll activated? does anyone know why the first page is missing two photos and is centered a bit off? this happened when i put the html infinite scroll code in.. help please?!?

Hello!

I've recently been setting up a tumblr for my online portfolio, and have encountered an issue that I haven't managed to resolve.

I have two categories - design and photography. To add pieces of work to my portfolio, I upload an image to sum up that project.

If it's just a photograph, it's fine that when it is clicked it just goes to that post through {Permalink}. But if someone clicks an image for design work, I want it to take them to a separate page with a bit more information. I've managed to get this to work with {LinkURL}.

My problem is that I can only get them to work one at a time. I can either have the images redirecting to a specified page, or going to the actual post - not both, depending on the content type.

Here's some code that will hopefully help you see my problem:

Code:

{block:Photo}
                    <div class="post photo">
                     {block:IndexPage}<div class="box">
                     
                        <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
                        <a href="{Permalink}" class="box-caption">
                     <p>{PhotoAlt} </p></a>
                     </div>
                         {/block:IndexPage}
                         
                         
                         
						{block:PermalinkPage}
						<div class="middle">
						
						<div class="middle-content">
						<a href="{PhotoURL-HighRes}">
						<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>
						</a>
						</div>
						
						
						</div>
						
						<div class="caption">
                        {block:Caption}
                        {Caption}
                        {/block:Caption}
                        
                        {block:HasTags}
                        <div class="tags">Tags: 
                        {block:Tags}<a href="{TagURL}">{Tag}</a> 
                        {/block:Tags}
                        </div>
                        {/block:HasTags}
                        {block:PermalinkPagination} 
                       <div class="permpaginate">
                      
                       {block:NextPost}
                        <a href="{NextPost}">Previous Project</a>
                       {/block:NextPost}
                        {block:PreviousPost}
                       <a href="{PreviousPost}">Next Project</a>
                       {/block:PreviousPost}
                        </div>
                       {/block:PermalinkPagination}
                        
                        </div>
                        
                    	{/block:PermalinkPage}
                    	
	                    </div>
                		{/block:Photo}

I have enabled "click-through" on my design posts but this doesn't work with the above code. I have to change <a href="{Permalink}" class="box-caption"> to <a href="{LinkURL}" class="box-caption"> which obviously means that now the Permalink doesn't work.

Hopefully that's a clear enough explanation! I'd be very grateful if anyone can help me resolve this

Thanks!

Hiya. I have been searching for a long time now and haven't come up with an answer. I am looking for a way to improve the look of youtube/vimeo etc. videos on my tumblr site.

I was hoping for something similar to the way it is presented he http://www.itsnicethat.com/articles/judex

Is this possible?
Thanks.

I've just started changing my Tumblr page around to make it look more fancy! I put a nice background and such on it, then finally, after looking for hours, figured out how to make my posts container opaque, so that you could actually see the background. Well, when I made it opaque, it also made my posts opaque. So, now some of the photos I'm using on there are not extremely visible. I was just wondering if there's a way to make the post container opaque without making the post content opaque as well?

Here's the link to my tumblr page, so you can get an idea of what I'm talking about.
http://late-summers-thoughts.tumblr.com/

And I'm not totally sure that this is what you need, but this is the part of my coding where I made the whole thing opaque.

div#content{filter: alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
float:right;
width:500px;
padding:10px;
padding-top: 0px;
margin-right: 170px;
background: #000000;
}

div#entry{
background-color:;
margin-top:px;
padding-top:10px;
padding-bottom:10px;
}

Hi,

the images on my Tumblr blog (http://madeinzaire.tumblr.com/) have suddenly been reduced to a small size, although I didn't change the HTML codes.

I tried re-editing the HTML manually several times, reinstalling the theme, refreshing the page countless times but the problem is still there. I even tried creating a new blog (http://testathome.tumblr.com/) with the same theme and posted one same photo as in my original blog: in the new blog, the photos have the correct width. But in my original blog, they don't.

The strange thing is that in my blog (http://madeinzaire.tumblr.com/) the images look right on the preview, but when I save and close the "customize" box, they remain small on the blog.

If I'm not mistaken the codes for the image size is:

#content { float: left; width: 760px; border-right: 1px solid #ccc; padding-right: 0px; margin-bottom: 15px; padding-right: 20px; }

{block:IfDetailsNextToPost}
#content img {max-width: 660px;}
{/block:IfDetailsNextToPost}

{block:IfNotDetailsNextToPost}
#content img {max-width: 760px;}
{/block:IfNotDetailsNextToPost}

Can someone please help me?

(view entire code in attached file)

I'm using this template on my Tumblr blog:

http://blog.tmimgcdn.com/wp-content/...ute.jpg?9d7bd4

I'm wondering how I can get those boxes to the top so that they are not centered? I've been messing about with the HTML for ages. You'll have to excuse me because I'm a noob at HTML.

I appreciate any help! Thanks.

Hi,

New here. Tried browsing for this but came up short. Would like to try and write the code myself for this, but it seems like a pretty unoriginal concept.

What I need is a way to make an image play a track with one mouse click.

Thanks for any help you can give me.

- Mopset