Category Archives: Themes
Articles

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, or infinite scrolling , you just need to paste a line of code into your description, but please, pay attention to the tutorial.

UPDATE: We’ve received tons of mails telling us that the tumblr autopager script simply doesn’t work on some tumblr themes, so we added a couple of methods that should cover most layouts, though sometimes is just plainly impossible to make it work.


Tumblr with Infinite Scrolling Pages. Method 1.

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.

  1. Go To Customize Appereance >> Description and paste the following script:

  2. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  3. Save and Close and check if it works.


Tumblr with Infinite Scrolling Pages. Method 2.

  1. Remove the script you pasted in the description as indicated above
  2. Go to Customize Appereance >> Edit HTML
  3. Paste that same code right above the </head> tag.
  4. Test again if it works.


Tumblr with Infinite Scrolling Pages. Method 3.

  1. Keep the code you inserted in the description, do not erase it.
  2. Before each post type [e.g. {block:Posts }] tag within your theme html, paste the following code:

  3. <div class = "autopagerize_page_element" >
  4. After each closing post type tag [e.g. {/block:Posts}], paste the following code:

  5. </div>

Always copy your entire theme html and save it in a .txt file, just in case you mess up trying to install the tumblr endless scroll.
Articles

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.

Do you know that by adding some simple back to top button tumblr you could let your visitors navigate your site much faster?.
Articles

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.

You might also be interesting in adding a scroll to top button tumblr in addition to the background picture. Let’s get started

Keep Reading