Category Archives: Themes

Making your Tumblr an Endless Scrolling page


To make your own Tumblr have an endless scrolling page (until you reach your very own first post), also known as autopager or autopage , you just need to paste a line of code into your description, but please, pay attention to the note after that.

Tumblr with Infinite Scrolling Pages.

Paste the following line of jscript code into your description box to make your blog endless scroll.  It doesn’t matter if the description already has text or anything else, since this script won’t show up.  Your description box is located in Customize >>> Info.

<script type=”text/javascript” src=”http://proto.jp/js/tumblrAutoPager.js”></script>

NOTE: It is very important that, after you paste the code you retype all the quotation marks, there are a total of 4.  Otherwise the endless scrolling page won’t work, and I found out this is the only reason many people complain that this code is useless when it’s not.  Somehow the quotation marks get pasted in italics or backwards.

How To Insert Links in your Tumblr sidebar


I know, you installed the theme thinking that inserting a link in your Tumblr sidebar was just yet another option in the customize panel. Though I do believe that they are going to introduce that feature really soon, it’s not available yet. Don’t mistake a random link insertion with the creation of a page, and that page showing up in your sidebar, other blogging platforms like blogspot and wordpress, both non hosted have that option.

How to insert links in your Tumblr sidebar (something like creating your own Blogroll).


  1. Copy paste your theme html in a notepad just in case you make a big mistake and want to get things undone.
  2. First of all, let’s prepare the line of code for your links; Replace xxx with your link url, and repeat this line of code for every link you want to insert/add to your own blogroll.  Also, write the link name where it says so.
  3. <a href=”xxx“>Write a Name For The Link</a>

  4. Themes are not totally identical in their html structure, but since you need to add a link to the sidebar, that’s what we are going to do next, search for the sidebar.  With control+F  in your Theme Custom HTML screen look for the following word; sidebar.  You will see that the word is always surrounded by a <div> tag or a <section>tag, and could be named sidebar1, sidebarleft, etc. In this example the sidebar is located in <div id=”sidebar1″>. We want to add the links before this sidebar is closed, meaning before the </div> (be careful, they might be more divs within the very sidebar).


  5. Tumblr links sidebar

  6. In this case, paste the line of code we prepared right after:.


  7. <a href=”{RSS}”><div id=”rss”></div></a>

  8. Save your theme and preview.

NOTE: You can go even further and make these links in particular to look different, even giving them icons to the left of each one, Make them show up in a different position, but all that requires more html and css knowledge, we need some extra tutorials for that

How to Download and edit your Tumblr Theme .CSS file


Even when your Tumblr Theme has the following tag included in the html:

{CustomCSS}

You don’t have absolute control over your Tumblr Theme .CSS file, despite being able to add your own touch to the theme through either Customize >> Advanced option or just dropping some inline CSS within the same html tumblr file (which is not advisable by today’s css standards). It turns out to be that there always is a .CSS file stored in Tumblr itself that belongs to any particular theme.

How to Find, Download and Edit your Tumblr Theme .CSS file

  1. Go to Customize >>> Theme >>> Use Custom HTML
  2. Once there, you will have to find the following line <link rel=”stylesheet” href=”http: ……. that ends with /style.css” .  In this example it would be

  3. <link rel=”stylesheet” href=”http://static.tumblr.com/h1xxjdl/CZ4Y1eqj/style.css” type=”text/css” media=”screen”>

  4. Copy the whole .css url and then paste it in a new window (press enter :) ). You will now be able to see the full .css belonging to your tumblr theme.
  5. You can download the .css file by right clicking and “Save Page As..” a Cascading Style Sheet document or just copying the entire code from the screen.
  6. The Web Developer Toolbar for Firefox (check here for Firefox Tumblr login issues) is great way to test and preview the changes you want to make to the .css file in real time. Now Edit the Tumblr .CSS file with any web editor you know, such as Dreamweaver.   If you modify any of the images used, remember to save them because you will now have to upload them to tumblr.
  7. Use the Tumblr static file uploader to save the images and js files FIRST.  Now paste the images url in the proper place within the .css file you are editing (remember to save it with the same name it had before).  Finally, upload your custom Tumblr .CSS file through this same place.  You now have the path to your new .CSS file !, copy it and replace the old .css url with the new one.  Click save in the top right corner of the screen and that’s it.  Just use this storage service for files related to your theme, nothing else unless you want your account to get banned.

UPDATE: This is how you edit fonts on Tumblr using the .css file.

How to put a background image in your Tumblr theme


Putting or changing a background image or picture in your Tumblr theme is actually easy. However, the coding and changes to the html Tumblr theme to make it look exactly the way you want can get extremely annoying, depending on the skin you are actually using for your Tumblr layout. For example, it may not be enough just to insert the url of your image, but you will have to edit, change or delete other background colors that could be covering your image background.

Let’s get started, here is How to Put a background image in your Tumblr Theme the right way and Size:

  1. First of all, login into your Tumblr account and visit your very own Tumblr site.  Once there you will see in the top right corner a button that says Customize, click on it please.
  2. Now, in this new page, click on Theme on the top navigation bar and then click on Custom HTML at the bottom of the menu that has just dropped down (if you don’t see it you will have to close some bars in your browser theme to give it enough space to see the option Custom HTML.
  3. Copy the whole code you see here and paste it in a notepad and save it, this will be a lifesaver to go back to where we start in case you don’t remember the steps you’ve done.
  4. Now this is where it gets fun, we need to alter the inline css to include the image you want as the background of your Tumblr Theme.  First of all, find the following code in your theme:  <style type=”text/css”>
  5. Now, after that code you should find this code “body {” and inside the body tag there should be the background: line.  It is here that we need to insert the url of the image you want to use for the layout.
  6. For example, in my Tumblr the background line looks something like this:
    background: {color:Background} url(‘{image:Background}’) top left fixed repeat;
    Now replace the {image:Background} with the URL of your image (if you have it in your computer upload it to Tumblr first ), and change the top left fixed repeat for top left fixed no-repeat.
  7. Click on Update Preview and verify the image is actually showing up as you want, if it does click on the SAVE BUTTON on the top right corner of your screen and that’s it.
  8. Is that it?, well I don’t really think so, because there are several other variables that could make your image not fit into the background, the image might be too small and then the rest of the background goes black, fixed body width, other background colors that may be hovering over your background, browser size, and image height as well, but these steps are the very first to change the background image in your Tumblr.

Important Note:  I believe that the single most important thing to know here is if the body tag has a fixed width or not, if it does, just edit your image to fit that size, if it doesn’t I recommend going for a image width bigger than 1600pixels (it depends on the screen resolution you are using actually) and a height bigger than 700pixels. Beyond this, there are many other ways to make your image blend with your background, specially if it was crafted in an editor, but for photos I guess that the major tip I can give.

Please post your questions here and I’ll help you fully customize the image into your current theme.

Tumblr has a really extensive documentation on how to customize your Tumblr theme html if you want to read it.