How to Edit the Text Color for a Theme in Tumblr

By Allen Bethea

Older followers of your blog may not be able to focus well enough to read low-contrast text.
i Jim_David/iStock/Getty Images

If you don't like the color your Tumblr theme uses for its text, you can change it. Tumblr's HTML editor gives you the ability to change the CSS or Cascading Style Sheet code that determines the appearance of your blog's text. Some themes, however, use CSS code from sources that you can't directly view or edit. Nevertheless, the HTML editor allows you to add new CSS code to the HEAD section of your theme that may override any other text color style regardless of its source.

Replace Existing CSS Code

Log in to your Tumblr blog, click the "Customize" button and then "Edit HTML."

Press "Ctrl-F" and then type "color:" in the search box. The editor will automatically highlight the first instance of the search term within the code.

Click the down arrow until you locate the search term within a text-related HTML tag like <p>, <li>,<ol>. <h1>,<div> or <blockquote>. For example, the Kalalalani theme sets the color for all H3 tag hyperlinks within the content section of its posts using the following line:

content .regular h3 a { color: #111; }

Replace the current color value with the one you prefer. Tumblr themes usually use color values that have three or six-digit hexadecimal numbers. Some colors, however, have standard names you can use like red, blue, green, azure or seashell. For example, if you want to change the color of all H3 links within the content section of your blog to red, your code would look like the following:

content .regular h3 a { color: #f00; }

or

content .regular h3 a { color: red; }

Click "Update Preview" button. The preview mode enables you to see how your blog will look before the changes are made permanent.

Click the "Save" button when you are done with your text color changes.

Add a New Text Color Style

Press "Ctrl-F" and then type "</head>" in the search box. The editor will automatically scroll down and highlight this tag.

Add a blank line for your custom CSS code by clicking your mouse in front of the </head> tag and then pressing "Enter" once.

Type "<style>" in a blank line you just created above the </head> tag and then press "Enter" twice. The editor will automatically add the closing style tag for you.

Type the code that will change the color of text within the content section of your blog posts. For example, if you wanted to make all H3 header and paragraph text within the content section purple, your code will resemble the following:

<style> #content h3,p { color:purple}; </style>

Click the "Save" button when you are done with your text color changes.

Warnings

Choose font colors that not only look good but make your text easy to read. Your blog's background color, however, may limit your choice of text colors. For example, purple text on a black or red background may be difficult for some of your followers read.

×