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.
[...] that day did come shortly after, and managed to get back on my radar so I grabbed it. It wasn’t exactly how I wanted it so I modified it a little. The main modifications are the [...]
Hi, Alisha!
I followed your instructions to a T (thanks so much!) But something seems to be amiss with the appearance of it. The notebook area doesn’t look wide enough? Have I missed out on something v. important?
Thank you again, this is a lovely layout you’re sharing!
I’m not sure what happened there. I just looked at your tumblr blog and that’s the first time I’ve seen that happen.
If you changed any part of the CSS, that could have caused it to happen.
Please make sure the body in the CSS is similar to this (with the exception of the location being different):
background:url(images/page-back.jpg) no-repeat top center #3f808a;And the footer in the CSS:
Or just compare your code with the original file.
HI Alisha,
Thanks for helping with the tumblr theme. This is so cool. I am a newbie to HTML coding and tried to follow all your instructions but the end result had no images. Do you know where I went wrong? I unzipped all the files but do I need to import it somehow to my tumblr page?
Any help is greatly appreciated. Thanks a ton.
Shilpika
Hi Shilpika, you need to host the images somewhere. You can’t import images in tumblr. You’ll need to either upload them to your own FTP or a free image hosting site and then change each image location in the code to point to the correct location of the images.
Hi Alisha,
Thank you for that. I managed to find a site to host the images..I have one small problem though. The image on the top half of the page is distorted. Please check: http://www.shilpika.tumblr.com. I noticed someone else on your blog having a similar problem and I was wondering if she resolved it. I checked my CSS code like you mentioned in the comments section. I would really appreciate it if you could help me with this. Thanks a ton. Looking forward to hearing from you.
I really don’t know what could be going on, because others have installed it and aren’t having that problem. Put fresh code in again, without touching any of the code, see if it still does that. Just make sure you backup what you had changed.
Let me know how it goes. Good luck!
Thanks..fixed it..some problem with the image hosting site!
What should I change the settings to on feed informer to make my last.fm feed appear correctly?
You have to use the custom setting in feed.informer so it will only display the artist/title from Last.fm.
Hey Alisha,
With your search box when you search some thing there it sometimes comes up with things from digg, pownce, twitter and digg.
How do I get that to happen on mine?
This is such a GREAT theme! Thank you so much for sharing it with us! You’re very talented!
Jaxon: That is already inside the theme. You just need to add your feeds like I said above in the post.
ChaCha Fance: Thank you, but I can’t take credit for designing the theme. Credit is given in the post above. Evan Eckard designed it. I only take credit for converting the theme for use in tumblr.
Oh sorry! Well thanks for converting it =) I love it!
You are very welcome!
Thanx Alisha I didn’t know how to import themes but I check the help section.
And I have a newer twitter icon if anyone want to use it. It is the correct size and works on my tumblog if you want to check it out.
http://farm4.static.flickr.com/3156/2908529345_0a89d11e7c_o.png
sorry i meant feeds instead of themes
Thank you so much for making your edits available to everyone! I used it for my daughter’s art blog. Everything works great, but I wasn’t able to write anything on the little torn notepad with a thumbtack in the right column. It’s where you have your “I’m following.” I’m sure it’s something I’m doing wrong. Anyway, if you have a quick fix or any advice. I’d love to get it. Thanks again!
Hi Natalie, remove the following code from the section of code that appears at the bottom of this comment:
Instructions: Remove
{block:Following}and{/block:Following}from the beginning and end. Remove{block:Followed}and{/block:Followed}. You can optionally add a title for the section in the<h3 style="font-size: 12px;"></h3>tag, or just remove the first row which is between the first instance of<tr></tr>if you don’t want a title. Then, where the following line appears, just add whatever text you want to add:<a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" border="0" /></a>.Section of code:
Dear Alisha: Thanks for porting the theme! It’s a little girly but looks pretty cool and works flawless in tumblr. Question: How should I edit that section to have the people I’m following on Twitter, like in your blog? Thanks in advance ^^
So I just realized that following notepad is for people you’re following in tumblr. Do you happen to know if there’s a way to do the same with twitter or anything?
No, sorry I don’t know how to do that.
THANK YOU THANK YOU THANK YOU - U R A JEM!
You are welcome Natalie.
Why is the theme all jacked-up? Can you help?
I’m assuming you’re referring to the top portion. If so, some others have had this problem with the image hosting they used. You may have to host the images someplace else. Sorry.
And also, how do I remove the twitter, digg, and other junk? I just need the comment and rss widget thx :)
If you don’t want Twitter, Digg and other feeds to be displayed, then don’t add them in the Dashboard. If you want to remove the code that displays them as well because you aren’t using the feeds, then you will need to find the code.
There is too much code to list here to show you what should be removed for each one.
EDIT: I just realized that you might be referring to the feeds underneath the title. Please be more specific. Let me know if this is what you’re referring to.
Basically, I want everything on your blog except the links under the title and the lastfm widget on the right and the recently listened to thing next to the title. And also my navigation is messed up because when you hover over it, it pops up! And then the layout proportion isn’t right! Is it possible for you to edit my codes for me? Is there a way I can contact you and send you my code so you can edit it to be like yours except for the things I listed above? Thanks a lot! :]
The navigation at the top is messed up because the background image is not the correct size. You will have to host with another image hosting site in order to have that looking right.
To remove the links under the title, you will need to go into the theme code and look for this code:
and remove the following code:
Then, to remove the recently listened to feed, it appears right below the code for the links under the title. Remove the following code:
Last.fm isn’t included in the theme’s sidebar. There is only a comment telling you where to add the last.fm code.
Ok, I got that fixed! But IDK how to chanfe the URL for the navigation…and where do I find the url for my archives? THX
The navigation URLs are in the code. You will need to look somewhere after the
<style></style>tags. There will be a lot of scrolling down.I am not offering help for tumblr itself. For tumblr help, you will need to go to the tumblr site and look that up. But as far as I know, the archive URL is the same for everyone.
And also, how do I add text/widgets to be under the “I am following” thing?
You will have to look through a lot of code and figure out where things go.
If you look for a comment in the code that says something about Last.fm (similar to this <!– Add Last.fm code here –>), you can add anything you want there and it will appear under the followers section.
Since I deleted the Last.Fm code, I can’t find that place :(
Then you’ll need to look in the original file. If you don’t have it, download it again. =)
The code will be closer to the bottom of the file, where all of the other things that appear in the sidebar are.
hey there.., i really love this theme..
however I have a little problem, the top part of it doesnt seems to have the same size.. it’s abit off, i tried uploading the image at photobucket and imageshack but it’s still the same.. where do you upload yours?
I guess because of it, the menu above when I hover it’s reallllyyyyyyyy off too..
my tumblr is - hansheeda.tumblr.com
thank you and sorry bout my english if it sound so confusing..
Because of where you host it, this will happen to the top portion of the theme. Like ChaCha Fance said below, try uploading to Flickr, since that seemed to work.
@Sheeda - I uploaded mine to Flickr……. Photobucket resizes all images larger than a 1024×768, that’s why it’s not showing up right.
ohhh ok cool.. will try it… thank you very much Alisha & Chacha
I didn’t find the place to edit the navigation code and I didn’t understand the guide on Tumblr! Can you please help?
I don’t have a lot of time to be able to help you step by step to figure out where everything is in the theme code. You have to look through all of the code.
Do a search for “search” and the navigation code appears below the code for the search bar above it.
flickr is not good idea. use any other image host or wordpress.com medialibrary to upload your pics. and enjoy! you may check the alishagg.tumblr.com source to get image links.
Suggesting that people hotlink to images I host on my server that uses bandwidth I pay for by viewing the source on my tumblr blog to grab the image links is not right. No one is to use those links.
I am providing this theme port for free, but you are responsible to find your own image hosting provider.
Hi! Thank you for all of these instructions! I’m new at all of this, but I LOVE the theme and want to make it work.
I’ve got my images hosted but I dont know where to put them in the code. Could you give me an example or help me out here?
Thank You!
Click on the image in your Flickr photostream so that you can see it FULL SIZE then right click anywhere ON THE IMAGE & click on COPY IMAGE URL (or something to that effect - depends on which browser you use). Then go to the spot in the code & paste the URL that you just copied…… Hope that helps.
Ok, I’ve figured out how to get the images to show now. I used photobucket and the images aren’t positioned/sized correctly. I read here and see that I should be using flickr. However, I cant seem to get the correct URL I believe and the images dont show up again when I use flickr. I dont think I’m figuring out how to get the HTML from that site. The only thing I could figure to do was to copy and past the address from the address bar. Please help, I’m getting closer and closer! haha Just not close enough!
Having a ridiculous amount of trouble getting the Footer image to pop over into the correct column - it insists on being too far to the right. I think I’m using the correct code for the Footer portion, so it must be somewhere else … any ideas? I’ve almost got this whipped, after it whipped me for hours.
Problem solved, but don’t use Flickr to host your images!
I’ve had no problem with Flickr…….. had my site up for weeks now.
Hey Alisha,
Slightly off-topic, but I’m having trouble with my last.fm feed. I took the recenttracks.rss from my profile and created a digest for it with feed.informer, but that doesn’t seem to work.
What am I missing?
Hi Ross, I took a look at your tumblr blog and it looks like it’s working to me.
Hi, Alisha.
Yeah. I figured out where to alter the code about five minutes after posting.
Thanks.
That’s good. I’m glad you were able to figure it out on your own.
Hi Alisha,
I am having a little trouble trying to open the file. I have winzip, and was able to download it, but I’m not sure what to do from there. I read your directions, however I don’t have Notebook++ and I can’t download it on this computer. Is there any way you (or anyone here) can email me the text theme?
Thanks a bunch!
-Lina
After you open the file and then extract it, you will be able to view the files inside. You don’t need Notepad++, it was just a suggestion for easier editing of HTML files.
Thank you Alisha. This is a great starter project for me. I’m new to web design and new to blogging. I’ve been reading such wonderful free tutorials online. I’m going to brave the use of your translation from wordpress to tumblr as my lesson plan on another free theme from Smashing Magazine. Wish me luck, and thank you, Smashing Magazine, and Evan Eckard so much for the inspiration and “the way”.
You’re welcome. Good luck! =)
I don’t have anything to say really, I just think it’s very cool you’re so willing to help everyone.
Good on you and yours .. Happy Holidays.
Alisha,
I’ve followed along with the comments on here to tweak the bugs in my code and figure out what I’m doing wrong…but I’m not to the point of being stuck.
I’m totally not html savvy and trial and error has got me this far. I am doing something wrong with where I’m posting the “yellow post it” background links because they aren’t showing up…neither are the “categories” background images. I might be putting them in the wrong URL spot but since I’m new to this, I’m don’t understand all of the verbage to know where they should go.
Your help would be hugely appreciated! I echo the above sentiments…thank you so much for doing this!! I love Tumblr and now will love it even more (if I can get my links and background to work!)
-A
meant to say “now” to the point of being stuck.
And this just in, I can’t get the date tabs on the left in the right spots or how to change the links to the home, about and archive to my own URLs.
After the amount of time I realize I’ve invested in this little project tonight, I am now thinking I should take a basic html class. :)
Most likely, it’s an error with the URL or you’re using a service that isn’t working right. I’m assuming you’re using flickr and it’s probably not allowing you to do what you’re doing. You might need to find another image hosting site. A couple others have said not to use flickr.
To change the links for home, about and archive, you will have to look through the code and find the URLs (they should be closer to the top, but below the CSS styles). Sorry, I can’t help you much more than that.
it didn’t work
I really want to get this theme but i dont know a thing about HTML :(
Maybe it’s time for me to learn.
You really don’t need to know anything about HTML. Just be able to follow instructions. Most of what you need to customize are links.
I am currently using your theme, but I hope you didn’t mind me also finding the photoshop file for this and using it and my knowledge of css and html to trick it out even more. I hope you like!!
The theme isn’t actually mine - I would like to take credit, but I can’t. ;)
I ported the theme from WordPress to Tumblr. But you are free to make any modifications.
I love the theme and just finished setting it all up…it looks really great. My only issue is I can’t get the recently listened to track from last.fm working, I used the code from feed.informer but it gets way too big, how can I make it so it fits properly?
i love your theme! thanks for sharing! and i’m using it hehe
I really like this theme! Thanks for your work. I will try to make it work on my blog!