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.

No related posts.

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.

No related posts.

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.

No related posts.

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:

No related posts.

Click here to view the embedded video.

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.

No related posts.

I heard from Justine Ezarik about the new SnapLayout.com site. She actually did a short video with MC Hammer about how great it is. Watch the video below to find out what SnapLayout.com is all about.

Summary: SnapLayout allows you to make your MySpace page look better in an easier way than before. I guess you could say it’s a snap! (I know, not very funny.) It features a drag and drop editor and a header slideshow that can add a nice touch.

Sorry, I don’t have any inside screenshots. I don’t have a MySpace account. Just trust MC Hammer and Justine Ezarik and try it for yourself. Check out their MySpace pages:

• MC Hammer
• Justine Ezarik

TechCrunch also talks about SnapLayout and includes a screenshot and more details about it.

No related posts.

Working on a client’s website, this was one thing that needed to be done. So, I looked all over Google for solutions and found several. Several solutions that didn’t seem to work. Because I don’t give up very easily on this kind of thing, I kept searching, going over the same solutions again thinking that I just might change something about them and get the footer to do what I wanted.

After a while of searching, I eventually came across one solution. Since I was desperate at that point I tried it out knowing that I could be wasting some more time. Entered in the correct CSS, refreshed the page and the footer was at the bottom of the window. Went to a longer page, the footer was below the content at the bottom of the page. I couldn’t believe it had actually worked!

If you have also had this problem before or just want to learn how it’s done for future reference, check out footerStickAlt. This is a very easy to understand solution!

No related posts.

If you would like to change that, just add this to the style.css under the appropriate section (sidebar) so you can find it later:

.trigger {cursor: pointer;}

All this does is styles the trigger class in the sidebar to display a hand, instead of the I-beam. If you have any problems, please let me know!

No related posts.

1. Using PHP to generate CSS is a great way to centralize your color definitions just by using variables. One fun and possibly useful thing to do with this is automatically generating a color gradient from just one base color! Read this tutorial to generate CSS using PHP.
2. Create a Lightbox effect with CSS, without using any JavaScript! This is one tutorial I am definitely going to try out, because I don’t like to use JavaScript for all those neat effects that are becoming more and more common on websites. Read this tutorial to create a Lightbox effect with CSS.
3. Want to create tables using CSS? There’s an easy to read tutorial over at Veerle’s blog. Read this first tutorial and then the second tutorial for creating tables using CSS.

No related posts.

Please note: the best designs may not be the best, but compared to the worst, they are the best!

I will start with the best designs, because they deserve to be at the top of the page, not the bottom.

Best Designs

1. Vitamin
2. 9rules
3. Design Snack
4. Elixir Graphics
5. Flash Life
6. Veerle’s Blog
7. WomensWallstreet
8. NetResults
9. Finch
10. Blogsolid

Worst Designs

1. Profile Glam
2. Cute Quote Graphics
3. Best MySpace Goodies
4. Worlds Worst Web
5. RogerART
6. Porla Puta
7. Hypotheticals
8. Worst Website
9. Freemap
10. AJFF

The reasons for the website under the worst designs should be obvious. I’m not trying to offend anyone, but too much animation, tiled backgrounds, bright colors, etc. just don’t work and make it hard to read the actual content. A couple of the links show you what you shouldn’t use.

No related posts.