Some of the best free tumblr themes to suit a variety of blogs. Whether you're hunting for a cute, simple or vintage layout there's something here for you.
A classic single column tumblr theme with a customizable 3 colour gradient background.
Features:
Have as many custom links as you want (got to my tumblr theme help)
Custom colours
Optional search
Optional avatar/portrait image next to the title
Reblog and like buttons on posts
Responsive design (adapts to the size of the screen you view it from)
Localization (any text in the theme changes to the language of the blog owner)
Install through tumblr - meaning you automatically get updates/bug fixes and are guaranteed the theme has all the elements you need
More info:
This theme uses the Google font ‘Open Sans’.
Posts are in their own neat container so viewers of your blog can focus on one post at a time.
On tag and search pages there’s a title displaying how many posts were found.
Customization options are: portrait image, text colour, background colours, post background, answer post background, accent 1, accent 2, search, archive link and random post link.
As with all my themes, link posts display an image, the title, host, author and an excerpt from the linked website so everyone knows exactly where they’re going.
The aesthetic:
This fluid, light theme will bring you delicacy and style. The posts float on a soft gradient background. Make it a subtle sunset or a dazzling display of colour. A smooth and circular theme that ensures readability, accessibility and style. There’s no claustrophobia with the spacious placing of elements and you can consume single posts by themselves.
Have as many custom links as you want (see my tumblr theme help page)
Custom colours
Optional search
Responsive design (adapts to the size of the screen you view it from)
Localization (any text in the theme changes to the language of the blog owner)
Install through tumblr - meaning you automatically get updates/bug fixes and are guaranteed the theme has all the elements you need
More info:
This theme uses google fonts - Open Sans for the body text and Montserrat for the title, navigation links and post dates.
It is a single column theme.
On tag and search pages there is a title displaying how many posts were found.
Customization options are: text colour, background color, answer post background, accent 1, accent 2, search, archive link and random post link.
The default audio player is plain, simple and good looking.
Link posts display an image, the title, host, author and an excerpt from the linked website so everyone knows exactly where they’re going.
The aesthetic:
This is a minimal, blocky tumblr theme. The header typography is simple but sleek and good looking. Let the focus be on whatever you post with the theme being the straight and smooth bedrock to your blog. Make it subtle and grey like in the theme demo, or make it bright and bold by changing the colours to whatever you desire.
Apart from (obviously) my own tumblr themes, I do rather like the the look of some other free themes out there and so I decided to make a post showcasing some of them. Here are, in my opinion, some of the best free tumblr themes available to install on your blog.
Most of these themes are available to install through tumblr.com/themes which ensures they are of good quality. They are mostly good, simple themes with a single column of posts, although there is a grid theme thrown in there. So if you don't know how to or can't be bothered to make your own custom tumblr theme, this is list of 8 great tumblr themes is for you.
Ragna
My favourite thing about this theme is the post containers - lots of padding, slightly rounded corners, a little bit of shadow, nice. Additionally, the reblog and like buttons are always a good feature, and the typography is simple but pleasing.
Vertigo
One of the best themes I’ve seen with a full width header image. The title, links etc over the top of the image looks great and it’s generally a slick looking theme. It is extremely functional and customizable.
Written
I really dig that title typography. I have a thing for simple, understated themes with a little bit of creative flair that sets it apart from all the others and I think this theme fits that profile.
UltraZen
A simple, clean easy to use tumblr theme.
Pulsar
Pulsar is a theme with no containers - the background is behind everything. That’s not something you see often and it works well here. It’s not an imposing, complicated theme, it is solid and simple.
Verticool
Verticool is a more avant-garde theme where you navigate posts horizontally (not sure why the name is a play on vertical). The design isn’t overstated - which I’m all about - and it lives up to it’s name in that it’s a cool concept.
Skyfall
As well as simple design, I’m all about the 80s aesthetic and bright colours and blues and pinks. Skyfall ticks those boxes and is high up on my “themes I would use if I ran an aesthetic blog” list. I don’t have many multiple column or “grid” themes on this post but this had to be here.
Geometric
I’m a big fan of Olle Ota’s themes just in general but this one caught my eye as just being simply wonderful. This would also be high up on my “themes I would use if I ran an aesthetic blog” list.
There are many thousands of tumblr themes out there to choose from, I have gleaned only a fraction of a percent of the number that exist in the world so if nothing here suits you, you will likely find one out there somewhere, whether you are looking for a cute, vintage or grid theme. There are themes made specifically for photographers, writers, musicians and anything you can think of so with a bit of research I'm sure you'll find a tumblr theme that is right for you and your blog's purpose.
Tumblr Theme Making Tip - Tag Pages and Search Pages
You can put titles (or anything you want) on tag pages (/tagged/something) and search pages (/search/something) using the “tagpage” and “searchpage” blocks made by tumblr. You can put the number of posts found for that particular tag or search query and of course the tag or search query itself. It’s quite a cool feature not many people use. Here’s how to put them in your theme, for people who are good with HTML, CSS and how tumblr themes work.
These are the blocks which you wrap around whatever you want to put specifically on tag and search pages on your tumblr theme:
{block:TagPage} {/block:TagPage}
{block:SearchPage} {/block:SearchPage}
Using localization strings (text you put in your themes that automatically will change to the language of the installer of the theme) such as {lang:Showing TagResultCount posts tagged Tag} will show how many results were found for that particular tag or search page. There’s also simply {SearchResultCount} for search pages. Additionally you can put text in for when there are no search results using {block:NoSearchResults} {/block:NoSearchResults} so users aren’t just met with a blank screen.
Put your tag page or search page title above the {block:Posts} in your theme and and h2 heading tag might be sensible, for example:
It’s a good feature to have in your theme as it gives the viewer of the blog added, valuable information about what page they are on. And now that tumblr has made it’s search feature MUCH better (searching all text in posts not just the tags), I expect more people might actually use it, meaning that adding the option for a search box and making search pages as awesome as possible is something you want to do.
This kind of attention to detail in a tumblr theme is what will make yours standout. Adding a tag page and search page title will make tumblr bogs easier to understand and navigate. It is cool and interesting to be able to see how many posts there are tagged with a certain thing and how many posts there are containing a certain search query. Tagging tumblr posts is a great way to keep all posts about a certain thing together on a tag page and he search feature is great because it gives viewers of your blog the tool to find a certain thing they are looking for. It’s for sure good practice to construct your theme with the assumption that tag pages and search pages will be used often on the tumblr blog, if not just to cover all bases and ensure it is an all round, functionally and aesthetically great theme. Don’t be afraid to check out my tumblr themes which all have the option for a search box and titles on tag and search pages!
This has been a tutorial on how to add titles to your tumblr theme’s tag and search pages, I hope it has been at least somewhat useful to you as you build your tumblr theme.
You can make all the built in text parts of your theme change to the language of the user which is pretty cool. Here is a tutorial on how to do that for those who have good knowledge of HTML, CSS and tumblr theme constructing in general.
Say you want to put the word “next” in your pagination. If you put {lang:Next} then the word will change to whatever the word “next” is in the language of the installer of the theme. Just like how when you put say {Source} in a theme and tumblr inputs what the post source is. Go to tumblr’s localization document for all the available strings. There’s tons of them and some include links to things, like posts sources. If you can’t find what you’re looking for then you can request a new string so that you can localize every bit of text you put in your tumblr theme code.
Why should you localize your theme? It is a good thing to do as people speaking a variety of different languages use tumblr, and if all their followers speak their language, then having a bit of English text like “source” in your theme wouldn’t make sense to them. They wouldn’t know what it was you are linking and who can be bothered to use Google translate. So by localizing your theme you make it so that they automatically have a blog that makes complete sense to them and readers of their blog as it written in the language they speak. As one of the guidelines for theme submission, tumblr suggests that you use localized strings of text where possible in your tumblr theme, so you should probably do it.
Localizing your tumblr theme is a great functionality to give it and will make your theme accessible to many more people. That’s what making themes is all about - making them usable and accessible by all. Your theme will be as good as can be. It will make it in the right language for the user of the tumblr theme. All good tumblr themes should be localized. It is simple to do and if you want to change whether it displays all in capital letters or lowercase letters then give it a class and use "text-transform:uppercase;" or "text-transform:lowercase;" in the CSS styling. So it really isn't restricting your creativity in anyway unless parts of your theme rely strictly on a word of a particular length, which is unlikely. If you really want, tumblr does have blocks to put in such as {block:English} or {block:NotEnglish} for added control so you can make sure your theme is localized but also looks good in all languages. So you could put a specific word or phrase in for when the user of the theme speaks English, but make it do something else for when the user doesn’t speak English. See, tumblr thought of everything. Localization is easy to code into your HTML and won’t ruin your theme’s aesthetic whether it be simple, vintage, cute or a grid theme.
Hopefully this was a helpful guide for tumblr theme makers for how to localize your tumblr theme and make it the best it can be. Don’t forget to check out my other tumblr theme making tips and tutorials.
You know that button that says “show a link to this page” when you edit a page you’ve made? Yeah. There’s a reason that’s there. Many of the tumblr themes I have seen and, once upon a time, used, have not made use of the operators tumblr made to make it easy to add custom links to themes. Easy for the user and easy for the maker. This is a tutorial on how to put them in your tumblr themes - for people who have experience with HTML, CSS and making tumblr themes.
Anything you want to link on your theme should be made as either a Standard Layout page, Custom Layout page, or Redirect (for links to external sites like twitter or something). Check out my tumblr theme help page for a more detailed explanation.
So, first of all, you have the “Has Pages” block which will render what it’s wrapped around if the user has custom pages/links:
{block:HasPages} {/block:HasPages}
Then you have the “Pages” block which you wrap around each individual link:
{block:Pages} {/block:Pages}
And finally {URL} for the link URL and {Label} for the name of the link.
For ask and submit links, of course they need to be enabled in settings, and then there are separate operators specifically for those links.
For submit links you have {SubmitLabel} which is the name of the submit link and can be changed in your blog settings, and the block:
And there you have it, easy to code, easy to use, tumblr didn’t waste their time making those operators, everyone’s happy. Once you have that basic code you can style the links to be however you want using ul (unordered list) and li (list item) in CSS. You probably want to get rid of the default list styling, so you need to put “list-style:none; margin-left:-40px;”. You may want to make each link have it’s own background colour, in which case you need to put “display:block;” if you want them to display one under the other, or “display:inline-block;” if you want them to display next to each other. Then give them whatever padding you want and whichever background colour you want. To change the text colour you may need to put “li a { color: [insert colour]; }” to specify that you want to change the “a” colour in the list items. You can go wild with styling you navigation links. For example, make the background change colour on hover or use the “:nth-of-type()” thing to alternate the colours of the links. You also could use Javascript to make a pop up menu for your tumblr theme links. The possibilities are endless.
Having customizable navigation links is essential for most people who use tumblr themes. They want to be able to have as many links in their tumblr theme as they want so that readers of their blog can easily be directed to their tags, twitter or other social media, About Me page, etc. Hopefully this tutorial was useful in explaining how to make it as easy as possible to add the option for custom navigation links to your tumblr theme and also how to style them.
Tumblr Theme Backgrounds, Headers and Sidebar Images
If you’re looking for an image to insert into your tumblr theme to perfect your blog’s aesthetic this post may be of use to you. Basically this is a list of my favourite sites for free images and such like.
Some tumblr themes have header images or the option to upload and insert another image of your choice. You might have a gif of your fave celeb lined up ready to use or you might have no idea what to put in the gap where an image should be in your theme. There may also be the option to add a background image to your theme but you do not know where to find a free, HQ, aesthetically pleasing picture or pattern. You don’t want your blog to look tacky but you don’t know where to find some great backgrounds or headers or images. In this post I will hopefully solve that problem with a list of HQ free background/image sites.
subtlepatterns.com:
True to its name Subtle Patterns has hundreds of subtle patterns for you to use as a background or anything you want. They are simple, stylish and professional looking. I even use a pattern from them on this website. There are black and dark patterns, light grey patterns and pastel coloured patterns. You can find random geometric shape patterns, wave patterns, pretty patterns, dotty patterns, a grainy background, anything for any kind of blog or website. There are large, high quality files or smaller ones you can get to repeat on your site.
unsplash.com:
Unsplash has a plethora of high-resolution, stunning photographs of anything and everything. The fact that they are completely free to use is astounding and I very much recommend this website. There are collections of photos to browse through so you can easily find, say, pictures of the ocean, or pictures of animals. There are all high resolution and are stunning examples of photography. You can use them as your tumblr theme background, header or sidebar image.
superfamous.com:
Like Unsplash, Superfamous has tons of high-res, beautiful images and really is worth a look. The photographs on Superfamous tend to focus on natural patterns rather than images of whole things. This could look really cool as a background for your tumblr theme or however you want to use the image.
colourlovers.com:
Colourlovers has some great patterns for website backgrounds etc, but my favourite part of the site is the colour palettes section. You can find a palette you love and change the colours in your theme to it for stunning results. Have link colours, accent colours, sidebar colours you need to decide on in your theme? Find a palette you like the look of on Colourlovers and you’ll have a beautiful looking tumblr blog to go with your beautiful background/header/sidebar image.
There are probably other great sites out there with awesome images and resources for your tumblr theme, however, those are the 3 I have come across and thought were exceptional. Images on your tumblr theme can completely change the feeling and style of your blog. A Personally, for backgrounds I usually think the simpler the better, however, in some instances a photograph can look stunning as a theme background. Headers where text is overlaid look beautiful with a great image underneath them also.
If you don’t want to use any of the thousands of existing tumblr themes made for you to use (including my themes) and want to try your hand at making one for yourself, then I have prepared a helpful guide for people with no knowledge of web development whatsoever.
To make a Tumblr theme from scratch the first things you must know about are coding languages HTML and CSS. They are what Tumblr themes and most of the web are made out of and you really aren’t going to get far without them. HTML is basically the structure of a website and CSS gives it colours, borders, spacing and other styling. A site I would recommend for learning HMTL and CSS is Codecademy. Create an account and do the “HTML & CSS” course to begin with to get your head around what they’re all about. The cool thing is you’ll have learnt a super transferable skill in learning those languages as like I said, most of the world wide web is made out of them so you’re not only learning how to make a Tumblr theme but a lot of the internet as well.
Once you’ve done that you should have enough knowledge to start putting together a basic theme. Go to your blog (creating a sideblog to play around with might be a good idea), click “Edit theme” in the top right hand corner and then click “Edit HTML”. You probably have a theme installed on that blog so delete all the code that’s there and voilà - you have a blank canvas on which to construct your own tumblr theme. In the Codecademy course you should have learned the basic structure of a website is something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
</body>
</html>
So now’s a good time to put that code in. The way that you insert things like blog titles and actual tumblr posts is using the special operators tumblr has made for us, for example {Title} will insert the title of the blog using the theme. Read through tumblr’s theme documentation to learn about this. Now you can go through putting in all the things you want and styling them how you want. Here’s a simple base code you can use if you want to skip ahead:
Remember there’s a lot more stuff you can put in than is in this code though - for example custom links and post sources. Do read through the linked documentation. I would also recommend checking out w3schools for loads of cool stuff you can do with CSS.
Once you’ve played around with it and really gotten to grips with how HTML and CSS work there are many ways to make your theme cooler. For example:
You can learn Javascript and Jquery (Jquery is essentially Javascript but made easier). With Javascript you can do things like make pop-up menus and make smooth scroll “back to top” buttons. Codecademy have courses, however, I found that it’s not a super nice course, so perhaps do some of it to get the gist and then turn to other sites for tutorials on how to do what you want to do with it.
Learning how to make responsive websites that adapt to different screen sizes is really a must in the days of smart phones and tablets - although most people have the default mobile theme switched on so when it comes to tumblr it doesn’t matter so much. It is cool having something else other than the default theme though, so you might want to learn about the whole @media(min-width:500px) { } thing. Searching “How to make a responsive website” might be good place to start. You can also learn about Bootstrap which makes it easy to create slick looking, responsive websites/themes.
Another thing that’s usually on a web developer’s mind is coding so that the website loads as fast as possible. No-one wants to be sitting there waiting for your blog to load. Things like reducing the size of your image files and optimizing JS and CSS files can make your page load faster, check out some tips here.
Also check out my tumblr theme making tips for how to best use tumblr’s built in operators.
There’s much more in the world on web development so don’t be afraid to go out and explore all possibilities and remember that when all is said and done the main thing is that coding and design are all about trial and error and googling your problems. I hope this guide has been at least somewhat helpful in your quest to build your own tumblr theme.
This theme features unique retro typography and allows for bold expression.
Other features:
Have as many custom links as you want (see my tumblr theme help page)
Custom colours
Optional search box
Reblog and like buttons on posts
Responsive design (adapts to the size of the screen you view it from)
Localization (any text in the theme changes to the language of the blog owner)
Install through tumblr - meaning you automatically get updates/bug fixes and are guaranteed the theme has all the elements you need
More info:
This theme uses google fonts - Open Sans for the body text and Bungee for the cool title text.
It is a single column theme which displays links simply.
Posts are in their own container so readers of your blog can focus on one post at a time.
On tag and search pages there is a title displaying how many posts were found.
Customization options are: text colour, title text color, background color, answer post background, accent 1*, accent 2* and search.
The default audio player is plain, simple and good looking.
Link posts display an image, the title, host, author and an excerpt from the linked website so everyone knows exactly where they’re going.
*Accent 1 is the colour of: post date backgrounds, the first shadow on the title text, all links and the search button background. Accent 2 is the colour of: the second shadow on the title text, links when they are hovered over, blockquote borders, link post backgrounds and the pagination backgrounds.
The aesthetic:
The two tone shadow of the title to this theme gives it a dazzling 3D feeling. It gives off a retro space/alien movie title vibe. The 80s and 90s eras come to mind with the bright blue and pink colours. There is a unique display of notes in the bottom left hand corner of posts, with a block coloured background curving with the container of the post. This theme mixes sleek and simple current web design with a retro, video game-y feel. It is also reminiscent of the bright K-pop and anime aesthetics.
Have as many custom links as you want (see my tumblr theme help page)
Custom colours
Optional search box
Responsive design (adapts to the size of the screen you view it from)
Localization (any text in the theme changes to the language of the blog owner)
Install through tumblr - meaning you automatically get updates/bug fixes and are guaranteed the theme has all the elements you need
This is a single column, plain and simple tumblr theme that allows you to be colourful and cool. The design is understated with a flicker of creative flair in the bold title and colour scheme. It shows tags with a hashtag next to them under posts. Posts are 500px in width and this theme uses Google fonts - Roboto. All post types are supported including audio posts, answer posts, panorama posts and chat posts. Choose two accent colours which will change the title background colour, link colours and more. With a responsive design, if you switch the default mobile tumblr theme, your blog will look good and be readable on the smallest of device when viewed on a web browser.
The aesthetic:
With a title styled in a way that is reminiscent of the “Supreme” logo (italic sans-serif font on a rectangular coloured background), this is a theme of high fashion. The default colour scheme of bright pink and blue gives 80s and 90s vibes from which it gets a bit of an edge - a hipster, retro sort of edge - softened with a smooth sans-serif font bringing it back into the 2010s. Cassette tapes, windbreakers, fuzzy televisions, all in pink and pastels. It is smooth and well spaced tumblr theme with corners and edges. It is readable but against the border radii and largeness of web design outside of the underground tumblr blogs and inside the mainstream professional web design trends. Functionality such as a search box and proper use of the “pages” operators tumblr has makes the theme, well, functional but it isn’t too fancy with unnecessary widgets and share buttons no-one will use.
