View Full Version : Coding for Tumblr

02-06-2012, 12:50 AM
Hello all-

I have recently made a tumblr as another means to market my new graphic design business. I would like to have a facebook "like" button underneath my headline on tumblr like this:


However while changing my header from text to image (so that I could get my logo up there) I discovered that the image is capped at 75 pixels above the first post. Any size with a height larger than 75 px will be partially covered by the first post:

Here is the code and appearance that I have found makes it look decent (75px height):


Here is what happens when I try to enlarge:


I also tried putting the code for the facebook like button in the sidebar to no avail. So, as a temporary solution, I tried to simply put a link to my facebook in the sidebar. But even this proved to be a pesky problem as it shows additional text outlining sizes and such:


This is the area in which I tried to code for the sidebar:


And this is the code I used to try to link my page in the sidebar. Everything works except for when I try to put the link in -

Ampersand ideas<br>presents<br>an exceptional<br> collective of<br>creative media<br><br>Like us<br><small><a href="http://www.facebook.com/ampersandideas">facebook.com/ampersandideas</a>

I would really appreciate the help, thanks!

-Adam Godoi

02-13-2012, 06:13 AM
Please help! Am I even in the right forum category for this question?

02-13-2012, 12:30 PM
Please help! Am I even in the right forum category for this question?

You are in the right forum. I'm pretty experience with Tumblr themes so I figured I'd give this one a try.

Basically, for the header, your problem was the image you were using. For some reason it had loads of blank space towards the left, which was making it get pushed off the side of the page when enlarged. Remember, if you want the image at the left wrap it in <div align="left"></div> rather than actually modifying the image. This is where a lot of people new to web design go wrong.

So basically I've cropped down the logo so that it will work. It's currently hosted on my server but feel free to host it anywhere else if you want, but take note that you'll have to change the code.


The header code now looks like this, which works really nicely with the page:

<!-- .header -->

<div class="header">

<img src="http://static.tumblr.com/tokpufl/lpdlt3v1v/logo.png" class="logo">
<a href="http://img.darklaika.net/external/ampersand.png"><img src="http://img.darklaika.net/external/ampersand.png" alt="" height="112" width="693" title="Hosted by DarkLaika.net" /></a>
<br />

<span class="clock"> <span id="clockTime"></span></span>

<div class="veneer"></div>


<!--/ .header -->

I did the Facebook thing actually inside the HTML document, don't do it via the description, it's bound to mess things up. Now the code for the caption looks like this:

<div class="theme-block" id="themeBlock">

<img src="http://static.tumblr.com/o2juyws/yAplynmbw/theme-pic2.png" alt="" width="120" height="120">

<span class="caption">

<span class="caption-inner">
<p style="padding:7px;">
Ampersand ideas<br>presents<br>an exceptional<br> collective of<br>creative media<br><br><small><a href="http://www.facebook.com/ampersandideas">facebook.com/ampersandideas</a>




Total code for the document (for easy copying- but make sure that you don't just mindlessly copy, take a look at the changed code and learn!)


(It was too large to fit in the document.)

You can see the results at http://testing-the-world.tumblr.com

(Password is CodingForums)

02-14-2012, 06:11 AM
Thank you very much I was able to get the link working in there correctly :thumbsup:. Now is there any way to get the "like" button underneath my header?