UPDATED: Notepad Chaos Tumblr Theme

tUPDATE: I have updated this theme (download link at bottom of post). Please read all instructions and comments below before asking for help.

See changes in the list below:

  • More comments in the code to make it easier for those of you having trouble looking through the code.
  • Removed references to Pownce since it is no longer available.
  • You are not required to find hosting for the images. But, I do recommend that if you can host the images somewhere else yourself, please do. There is no guarantee that the images will always be available. They are all currently being hosted at ImageShack. The zip still includes the images for those of you who want to upload them somewhere.

A lot of you have been waiting for this theme to be made available for Tumblr. I had requested permission to make it available to the public! I wouldn’t have done this if I hadn’t received so many comments about it on my Tumblr blog, Random Alisha. Thanks to Smashing Magazine and Evan Eckard, you can download the theme!

Because I am new to Tumblr and how the code works, please do not direct Tumblr questions to me. There is help for that on the Tumblr site. If you need any help regarding setting up the theme, I will do my best to help you. If you need to customize any part of the theme such as the images, please download the original WordPress theme. There is a PSD file included.


  • Tumblr’s custom colors
  • Feed icons. If you import any feeds from RSS Feed, Last.fm, Digg, Twitter or Pownce, the theme will display an icon. For example, if you say something on Pownce, on your Tumblr page there will be a little Pownce icon on the left side.
  • Disqus comments per post and in the sidebar.
  • Last.fm recently listened to next to blog title via feed.informer.


To use this theme, download the zip file and extract it. Open up notepad_tumblr.html with an editor. I use Notepad++ if you would prefer not using plain Notepad. You will need to replace all instances of “yourdomain.com/tumblr/images” in the URLs with your actual domain/location of where you will place the images.

For the about link underneath the search, you will need to edit the link in the code. If you don’t have an about page, then just create a post and then get the link to the post and insert it into the correct place in the code.

Then, at the top, underneath the title of your blog, there are a few links for Twitter, Pownce, etc. You will need to replace those as well with your own.

You will need to replace “yourname” where Disqus comments appear with your own when you sign up. I have left comments in the code. There are two places where it needs to be changed. And then if you want the recent comments in the sidebar, I’ve left a comment of where to place that code towards the bottom of it. You will have to get the code for that from your Disqus account.

For the recently listened to Last.fm song next to the blog title, you will need to go to the feed.informer website and create your own code and replace it with the one between the comment.

For Tumblr’s custom colors, if you go to your dashboard to customize the theme, you will see a Colors tab. The following can be customized: Title (blog title), Description (appears in the footer), Nav Links (recent posts list in the sidebar), Date, Post-Title, Text (main text throughout), Inline Link (links inside a post). None of the others will change anything in the theme. If you need anything more custom than that, you will need to look through the code and edit it.

After you have edited the theme, copy and paste it into Tumblr!

If anything at all was confusing with the instructions, please let me know and I’ll try to help you.

Posted in: Web Design