Themes and Customisation
Hundreds of themes are available for Tumblr, most of them for free. Take some time to go through the theme options when you sign up, either to find one for your tumblr or to get ideas to create your own theme. One thing you may notice with Tumblr themes is that a lot of them have very narrow content areas. While wider themes are available, the vast majority are narrower than 800 pixels (and some even narrower than that).
Most Tumblr themes come with some customisation options that don’t require any HTML and CSS knowledge (if you plan to create some public themes, you’ll probably want to include some customisation options). There’s also an area to enter custom CSS that will override existing styles.You can customize the HTML in any theme, too. Click on the “Customise” link from your dashboard, and then click on “Theme” and “Custom HTML.” This is also how you would create a theme from scratch. You can link to an external style sheet, too (Tumblr has a static file uploader for uploading theme assets). Editing an existing theme is a great way to start designing for Tumblr. It also gives you complete control over how your theme looks and works without having to start from scratch.
Creating Custom Tumblr Themes
While Tumblr makes it easy to customize the HTML and CSS of almost any theme, you may want to start from scratch. If you’ve ever created a theme for another blogging platform or CMS, creating a Tumblr theme won’t be any more difficult. Even if you haven’t created a theme for another CMS, creating a Tumblr theme isn’t much more difficult than creating a standard HTML template.
Tumblr themes include the same basic parts as any website. There’s usually a header and main content area, as well as an optional sidebar and footer. Beyond that, Tumblr themes are broken down into blocks. Each block on your tumblelog contains some piece of data. For example, there are blocks for each of the post types (text, photo, audio, video, etc.), as well as blocks for things like your tumblelog’s description and “Previous” and “Next” page links.
The Tumblr loop has a huge number of variables to take advantage of. You’ll need to define blocks for each post type in order to display them properly in your theme. Beyond that, you choose what to include in your theme.
A complete list of Tumblr variables can be found on the Creating a Custom HTML Theme page on Tumblr’s website. The page also includes more information on creating Tumblr themes in general.
Tumblr Theme Variables
Variables allow you to do various custom things with your Tumblr themes. There are basic variables for things like the theme title, portrait URLs and favicons. There are unique variables for each of the post formats, too. Some formats (like text posts) have only a handful of variables, while others have over a dozen.
A Complete Guide To Tumblr (smashingmagazine.com)