How To Create Your Own Custom Tumblr Theme?

how to create tumblr theme How To Create Your Own Custom Tumblr Theme?

Tumblr is one of great microblogging site that we have out there. The simplicity of using it, attract many people to sign up and have one Tumblr account. You also can freely customize your Tumblr the way you want. But, could you create your own custom Tumblr theme? Yes, it is possible for you to create your own custom Tumblr theme. In this post, I’ll help and guide you the way to create your own custom Tumblr theme.

Creating your custom Tumblr theme is just like how you create custom themes or template for other blogging platforms such as Blogger & WordPress. Tumblr allowed their user to create their own custom Tumblr theme with the use of XHTML & CSS code. Just like how you create the other blog CMS custom theme. The different in creating your own custom Tumblr theme is only the loop code that being use.

To create your own custom Tumblr theme, first design the mock up of the custom Tumblr theme using Adobe Photoshop. By having a mock up design of your custom Tumblr theme, you’ll be able to visualize how the final result of the custom Tumblr theme would look like. It also help you to manage the images that will be use to code up your own custom Tumblr theme soon.

Here’s some video on how to create a basic mock up design using Adobe Photoshop. Use you own creativity to create a much more awesome custom Tumblr theme mock up.

And then, slice your custom Tumblr theme mock up images that will be use soon. After that, code the basic XHTML structure of the custom Tumblr. Just code the HTML first. Then, spice it up using CSS. This part might require you to have knowledge in HTML and CSS. You can learn it at W3schools website.

After you have the complete structure and working HTML site, now it is time to insert the Tumblr loop code to create your own custom Tumblr theme. If you were familiar with creating WordPress theme, then creating your own custom Tumblr theme is the same way. Just insert the Tumblr loop code into the HTML that you have created before. For Tumblr loop code reference, check out Tumblr Custom Theme Documentation page.

tumblr custom theme How To Create Your Own Custom Tumblr Theme?

And that is how you can create your own custom Tumblr theme. Design the mock up in Adobe Photoshop first, then code it into XHTML & CSS and insert the Tumblr loop code. There you have your own custom Tumblr theme. You also can use jQuery to make your custom Tumblr theme look more awesome.

I know right, it is involve to many technical aspects in order to create your own Tumblr theme. For those who are not familiar with HTML & CSS language, this would be tricky for you guys. So, my advice is to start with any Tumblr theme that you can find it Tumblr Theme Garden. There are a lot of them. Then, try to tweak any of the Tumblr theme using W3school as reference.

tumblr theme garden How To Create Your Own Custom Tumblr Theme?

There is no shortcut in learning how to create your own custom Tumblr theme. It just practice make perfect. So just keep try and error in order to create your own Tumblr theme. If you have Tumblr account, do follow my Tumblr at HelloSyuxx :D

Comments

  1. Mikko

    i neet help i uploadded the pictures to photobucket but only the large header appears . i have knowledges of HTml and i do not know what i am doing wrong .

    Untitled-2

  2. Jarelle

    Dear Syuxx,

    Hey there! Can you please tell me where to download the full version of Photoshop Cs4? I downloaded it, but it won’t open. Did you buy it or you just downloaded it for free? Please answer. I really need it now! Thanks!

    -Jarelle

  3. Emiani

    @Jarelle
    You can’t download the whole version.
    You must buy it to really do everything.

  4. Angelique

    Hi Im a newbie. So instead of making a header I made a side bar or side menu. I followed the direction on the youtube videos and everything went well and I put the url in so when you click the title it redirects you to my link. But what I’m confused is how do I insert this code in my tumblr account so that it appears as a side bar.

  5. Magento Themes

    Thanks for this tutorial on Tumbler templates. I have sent this link to my designer and asked him to make some use of it.

  6. Val

    EXTREMELY HELPFUL. I have been looking for a good explanation on how to make your own tumblr themes for awhile and this helped the most. Thank you.

  7. Cherize

    THIS TOTALLY HELPS ME MAKE A TUMBLR THEME, THANK YOU<3

  8. Ali

    For using background images or anything that might stay on the page regularly like header images, do NOT upload to somewhere like photobucket.

    Go to your tumblr’s dash, click on new text post.
    Next, go to the small, greyish letters on the right-side under the title field.
    Click on that greyish link saying, “+ upload photo” and choose what you want to use in the theme.
    Lastly, it will upload and show you the image, which you’ll need to them grab the image URL from & then simply copy/paste into your code.

    It is much more efficient and seems to be smoother because tumblr already has the image & because the theme doesn’t rely on some other service.

    Good luck.

  9. Backlinks

    Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a nice blog like this one these days.. :)

  10. Patricia

    Can you use adobe photoshop cs3

  11. Binz

    “So just keep try and error in order to create your own Tumblr theme.”

    Trial and error?
    Well yes, anyone would have a lot of trouble attempting to edit an incredibly confusing fully style theme & make mistakes…
    Thats a ridiculous suggestion that will only help people to hack up and modify existing themes.

    You’re right saying there is no shortcut but people should learn to take babysteps before they half-run half stumble through a hackneyed and often times non compliant template code.

    ———

    People, I suggest you first learn the basics of XHTML 1.0 at w3schools.com and a little CSS – all you need is a basic understanding of how and why the code works like it does. no need to memorise all the commands – a ‘cheat sheet’ will help you with that.

    It will take you no more than a few hours to a day.

    Then, once you have a grasp and ideally have drafted up a rough page in CSS and HTML on your own have a read through this page which is linked in the above article:
    http://www.tumblr.com/docs/en/custom_themes
    pay particular attention to the ‘complete markup’ and examples.

    once you understand those three things (HTML, CSS and tumblrs ‘variables’) youll be able to make an excelent theme from scratch and fully understand what you are doing and why. Only then should you start looking into existing templates to ‘borrow’ ideas and explore new ideas.

    Yeup, its a little bit of learning but ill only take you a few hours a day for a week to learn what you need and it’ll be worth it, you can use HTML and CSS all over the web and itll even look great on future CVs!

  12. [...] given): http://www.tumblr.com/docs/en/custom_themes How To Create Your Own Custom Tumblr Theme?: http://thumlog.com/how-to-create-your-own-custom-tumblr-theme How To make a Theme in Tumblr (Video): [...]

  13. Steve

    I stopped reading this post because I got sick of reading “custom tumblr theme” all the time. Please write articles for humans not just search engines, then the humans will read it more.

  14. clariss

    I don’t know what i did wrong. I did it the first time, and it was ok. I changed the layout and tried it again, and now everytime i try to put “home.html” and hit refresh on the page, the words “home.html” show up and the button changes position.

    What did i do wrong?

  15. horris

    We that post is about as much use as tits on a bull.

    How to fix a car:

    Open bonnet

    Find problem

    Fix it

    Drive home

  16. horris

    you might as well have step 1/1:
    Go here http://www.tumblr.com/docs/en/custom_themes

  17. Hello there, just turned into alert to your weblog thru Google, and located that it’s really informative. I?m going to watch out for brussels. I?ll be grateful for those who proceed this in future. Numerous other people might be benefited out of your writing. Cheers!

  18. gossip news

    Thanks for another fantastic article. Where else may anybody get that type of info in such an ideal way of writing? I’ve a presentation next week, and I am on the search for such information.

  19. xoeve

    Go to your tumblr’s dash, click on new text post.
    Next, go to the small, greyish letters on the right-side under the title field.
    Click on that greyish link saying, “+ upload photo” and choose what you want to use in the theme.
    Lastly, it will upload and show you the image, which you’ll need to them grab the image URL from & then simply copy/paste into your code.

  20. web design

    My brother recommended I may like this blog. He was once totally right. This publish truly made my day. You can not believe just how a lot time I had spent for this info! Thanks!

  21. image stock

    Today, while I was at work, my cousin stole my apple ipad and tested to see if it can survive a twenty five foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!

  22. tony

    I customized the css for my tumblr to appear similar to my website. What I want to know is, how do I package my theme so that others may use it?

  23. Anna

    Ok i don’t feel like reading through all these to see if someone may have asked or already had this question answered but how do i set my tabs that say archive and ask me to what i want them to be. I’m trying to create just a page of pictures of me because people keep asking me?

  24. Carpathia

    :D Thanks for the article

  25. Boo bear

    can I use photoshop cs3?

  26. Emily-Rose

    i dont have the slicer tool on my adobe photoshop: i have adobe photoshop elements 6.0 and it has no slicing tool. as i have never worked with it before, i dont know what i can use a substitute. help!?

  27. Kathleen

    I don’t have the slice tool either… what can I use instead?

  28. LuminusArk

    I did everything you said, but when I got to the part where you change the border to zero, I did exactly that but it won’t change. help?

  29. Eleanor

    so, I got the photoshop PS5, and when I save it in JPEG High format, in the code it says gif, maybe you know why?

  30. Eleanor

    I know for you guys who have photoshop 6 , there’s a slice tool near the crop tool, just double click the right, I guess.. mine’s PS 5 and it’s like that

  31. Luana

    Well, I always wondered why when I go into my customize theme appears mistake? I can never get in my customize theme and I can not change my theme.
    I would like to help and know why I can not enter.
    Thank you!

  32. kaname2100

    well i’ve done all of it. what i want to know is in what particular area of the html of tumblr do i insert it?

Leave a Reply