UPDATED: Notepad Chaos Tumblr Theme

UPDATE: 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.

Features

• 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.

Instructions

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!

To see the theme in action, view the demo (my own tumblr blog). If you’re ready, go ahead and download the theme!

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

Note: For those of you having issues with the top portion of the theme not looking right, try using Flickr for image hosting. This seems to be a common problem. Thanks to ChaCha Fance for mentioning this in the comments.

Tumblr and Themes

After having seen the Notepad Chaos WordPress theme by Evan Eckard on Smashing Magazine, I wished I had a blog to use it on. Then I realized I had a Tumblr blog that I was using a plain looking Tumblr theme on and have been wanting to make it look better.

I had never touched the code in Tumblr themes, so I didn’t know if I could port a theme over to Tumblr. Fortunately, it was very easy because the theme author had created a single file that had all of the theme code in it, minus the CSS of course.

The Tumblr code is pretty easy to understand and they provide a useful help page that explains each variable and even includes some page examples.

I did eventually learn that I couldn’t upload images on Tumblr, so I had to upload the images elsewhere and point them to the right location in the code.

Once the theme was ready on Tumblr, others started noticing it. In less than 24 hours, my blog was on the Sweet Themes Tumblr page.

So, if you are tired of the Tumblr themes provided, seek out a theme that wasn’t made for Tumblr and customize it for Tumblr! I’m glad mine doesn’t look like everyone else’s (except for the WordPress blogs using the theme). Here are a few sites that offer Tumblr themes:

• Tumblr Themes
• Free Tumblr Themes
• Custom Tumblr Themes

Interested in a custom Tumblr theme? Check out tumblize.

How to Load Animated Flash Header One Time During the Session

After a client had made a request for a Flash header to not animate every time a new page is loaded, I needed to figure out how to do this. Not for this one request, but for any future requests. I have previously looked this up, but came up empty. It seemed there was one solution, but it really wasn’t the greatest, because when you return to the home page, the animation would play again.

I eventually came across a solution that had no comments from other people, so I didn’t really know if it would work. The person who provided the solution also provided a link to his/her website with it in action, so I was able to see that it worked.

This solution uses PHP sessions. It works by displaying the full Flash header only if never viewed during the current session. If it has already been viewed, it will display the second (non-animated) header until the session ends, which is on browser close. The next time the website is viewed in a new session, it will display the original animated header.

The first code you need to add is placed at the top, before any other code (DOCTYPE & HTML), in the header. This code checks to see if there are any views during the current session.

< ?php
session_start();
if (isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;

else
$_SESSION['views']=1;
?>

The next code is for displaying the Flash, just as you would normally, except it’s using PHP.

< ?php if ($_SESSION['views']>1) //if session views are more than one
echo "Flash embed code here";
else //if session view is one
echo "Flash embed code here";
?>

This code is just saying: If views are more than one, display the second (non-animated) header. If views are one, display the full animated header. It is really simple.

Make sure to remove the space that appears at the beginning of the PHP code: < ?php. Also, when adding the Flash embed code to be echoed, escape any quotes with a ‘\’ (without the single quotes).

Full credit for this solution goes to www.addisoncountyeagles.com. The actual solution is in the Coffee Cup forums.

Redesign Natali Del Conte’s Site

Here’s a little challenge for those of you who can design sites. WordPress ones to be exact.

For those of you who don’t know who Natali Del Conte is, she appeared on the TeXtra shows and now has a new show, Loaded, on CNET TV. She posted up a challenge on her blog today. She is challenging anyone to design her site and she will pay you $100 via PayPal. That might sound like a low amount, but you will receive credit for designing the site and you can put her on your resume as a reference.

I think designing Natali’s site would be enough to do it! Hurry and start designing, this ends on February 29, 2008!

This is what she says she is looking for:

Here is what I am looking for: I would like to get rid of this aquatic-looking color scheme. Perhaps something a bit more gender-neutral. Even a gray scale would be nice. I don’t like the font that my name is written in above either. I would also like to use either one of the two photos below in the header. I’m not really all that picky about it but one is quite formal and the other is more casual. I’m sorry I can’t give too many more guidelines. Like I said, I have no vision.

I hope someone will take up this challenge, because I’d like to see what it will look like redesigned. She deserves a redesign. Here is what it looks like now:

How To Create a Basic Website Layout

This video shows you how to create a basic website layout using Photoshop. If you’re familiar with Photoshop, it shouldn’t be hard to follow the video. If you’re new to Photoshop, it might be a little more difficult, because the video is so small that you can’t see some of what is shown. It doesn’t go into showing you how to slice and then code it. It only shows you how to create the design.