How to Customize an Existing Tumblr Theme

Your Tumblr theme sets the appearance and formatting of all the content on your blog, from the size of the pictures to the style of the fonts. You can tweak any Tumblr theme, whether free or premium, by visiting the customization screen. Some HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) knowledge is useful, but you can make basic edits even if you're not familiar with website coding.

The Customization Screen

Click on the "Customize" link to enter the customization screen, which enables you to change your blog title, its description and all of the options available in your current theme. Select "Browse Themes" if you want to switch to a different theme. Note the "Add a Page" option which you can use to create static pages and links alongside your blog posts. The "Advanced Options" link enables you to set the number of posts shown on each screen, force links to open in a new window and activate Tumblr's default mobile view for your blog.

Built-in Theme Options

Theme authors can include a set of options integrated into their themes -- this means you can change colors, fonts and other variables without changing the actual code of the theme itself. The options listed to the left of the customization screen have been provided by the author. These vary from theme to theme, but may cover font colors and sizes, background and header images, sidebar and layout options, infinite scroll, the display of tags and notes and widget options. In addition, there may be fields for you to enter username codes for Google Analytics, Typekit, Instagram, Twitter and other third-party services.

Adding Custom CSS

Tumblr themes make use of CSS to set the style of body text, images and heading on your site. They work in the same way as stylesheets in a word processor, allowing the user to come up with a uniform set of font formats that are applied across the site. Click "Edit HTML" on the customization screen to study the theme's existing HTML: the CSS should be either embedded in the HTML itself or there will be a link to a .css file hosted elsewhere on Tumblr. Use the Add Custom CSS section on the Advanced Options page to enter your own CSS code if you want to overrule the theme's default stylesheet.

Editing Theme HTML

As well as adding custom CSS, you can also edit the theme HTML directly via the "Edit HTML" link on the customization screen. HTML code is typically used to define the page layout and structure, controlling which elements are shown and where they are placed; CSS code is more concerned with the appearance and style of text, borders and images. If you edit the HTML theme directly, Tumblr disables the theme auto-update feature in order to preserve your changes -- this means that if a theme update is released in the future, you'll need to install it manually (and then reapply your HTML tweaks).

How Do I...?

The exact CSS and HTML code you need to make changes depends on the way the theme has been written by its author. Different Web developers use different HTML and CSS structures, but if you spend some time looking at the existing code, you should be able to see the way that colors and styles have been applied. If you need some basic tuition on the kind of HTML and CSS tweaks you can make, there are plenty of tutorials online at sites such as W3Schools, Webmonkey and HTMLDog. There are also relevant resources in the Tumblr Help Center, and you could also contact the theme author directly for pointers.