Coloured Text on Tumblr

Bob Leggitt | Tuesday 28 February 2012
Here's a way to add to add visual variety to a Tumblr text post.

You can compose an entire text post in Hotmail, using Microsoft visual enhancements such as coloured text,
  • bullet points, and emoticons.
Then copy the whole thing over to Tumblr in seconds.

Coloured tect on a Tumblr blog

One of the problems with Tumblr is that it doesn't, by default, allow coloured text. But if you sign up for a free Hotmail account, you can use your email editor to compose text posts with coloured text and other fun visuals, then paste them straight into your Tumblr Text Post editor.

Preferences cog on Tumblr


Before you start, you will need to make one quick amendment to your Tumblr Preferences. Access your Tumblr Preferences by clicking on the little cog sign, as highlighted in the picture on the left. Then where it says Edit posts using, change the selection from rich text editor to plain text/HTML. This is how it should look...

Selecting the HTML editor in Tumblr

If you don't make that amendment, this won't work. You'll also need to remember to change your Tumblr Prefs back to rich text editor as soon as you've made your multi-coloured text post. Otherwise, any posts you make from scratch on Tumblr in future won't have the formatting you're used to.

So now it's time to open up Hotmail and make the post. If you're going to use emoticons, click on the Emoticons tab just above the toolbar. This will provide you with a host of click-to-insert smileys down the right hand side of your screen. Now simply write your post, using the options on Hotmail's formatting toolbar to add visual impact. You can colour the text by first selecting it, then clicking the little 'A' with a red line under it, and then picking a colour from the chart which appears. Here's the way my finished post looks in the Hotmail editor...

Visual display showing the coloured text in Hotmail

Bear in mind that Tumblr will display slightly bigger line breaks than Hotmail, so your post will probably look more spacious vertically on Tumblr than it does in the Hotmail editor. The next step is to copy the post into Tumblr. Really easy, when you know how...

Because Tumblr is now set to accept HTML rather than rich text, you need to copy the HTML code from Hotmail - not just the post as you see it on screen. To copy the HTML code, click the tab at the top of the Hotmail screen where it says Rich Text, then from the dropdown menu, select Edit in HTML. The process is illustrated below...

Full HTML code for the varying colours of text in Hotmail

You'll now be seeing code in your Hotmail editor, rather than the post as you made it. Select all of the code, taking care not to miss any, then right click on the selected code, and select copy from the context menu - as shown below...

Copying the code

All you do now, is open a new Tumblr Text Post, and paste the code from Hotmail straight into the Tumblr editor. It should look like this...

Pasting the code into the Tumblr editor

Now click Create Post, and you have your Tumblr post, with coloured text and whichever other enhancements you added in the Hotmail editor. One quick point I should mention in conclusion, is that the coloured text and enhancements will only show on your Tumblr blog. They won't appear in the feed which goes to your followers' dashboards. But comparatively few people have coloured text on their Tumblr blogs, so this is a great way to set yourself apart from the crowd and create talking points.

Tumblr users might also be interested in streaming audio to Tumblr, and adding emoticons to Tumblr.