Tumblr’s Theme Options Explained

Tumblr is the place to express yourself. You can style everything in a unique way and make your blog completely your own. Sometimes you even want to create your own Tumblr theme to be the only person to have one particular design. In some cases, you even want to share the code that you create. Or you just want to be able to easily change colors or layouts in your own theme. This article is supposed to give you some insight into Tumblr Theme Options which you can employ to make your theme more customizable.
Tumblr Theme Options are those fields you see on the customization screen where you can enter custom links or change colors. All in all, you can enable these different options:

  • colors
  • fonts
  • booleans
  • drop-down lists
  • text
  • images

All of these seem pretty forward and you can use them to make your theme really your own. That is usually the ultimate goal. You do not want something that looks just like everyone else’s blog.

You can use these theme options in the CSS and the HTML part of your theme. (A little sidenote: If you plan to host the CSS file yourself and load it remotely to your Tumblr theme, you have to make sure that everything containing theme options is within the theme itself and not in the external file. Otherwise, Tumblr won’t load those options.)

Let’s take a look at the different options Tumblr offers us in more detail.

Colors

In order to use the color options, there are two steps you have to take. First, you need to go the CSS ID or Class and add the color (you can style both the color itself and the background color). This is a example on how to do this:

.sample {
    background-color: {color:Sample Background};
    border: 1px solid {color:Sample Border};
    color: {color: Sample};
}

As you can see, there is a structure to the option. Tumblr theme options (and blocks) are always put in curly brackets in the place where you want to use them. For the color options, you start the block with color, followed by a colon, and then the name you want to give the color and which appears in the customization screen later on.

The second step is to make the option actually accessible to the theme user. For this, you need to go to the head section of your theme.

<head>
     <meta name="color:Sample Background" content="#ffffff" />
     <meta name="color:Sample Border" content="#333333" />
     <meta name="color:Sample" content="#333333" />
</head>

Tumblr code offers you the option to include meta tags whose names start with color and then offers a color picker for your theme users. I have included the full HEX code in the content part of the meta tag. This is the theme’s default color for that particular instance. What Tumblr is doing with this is that it is replacing the block {color:Sample} with the HEX code you have defined in the content in the meta tag. You can, of course, also include the option in inline styling:

<div class="sample" style="color: {color:Sample}">Content</div>

Fonts

Font options in Tumblr themes work similarly to the color options. The only thing you need to do is replace “color” with “font” in your blocks. Just to make sure, we’re going to take a closer look at the font options as well.

.sample {
     font-family: {font:Sample};
}

Looks exactly the same as the color options, right? It is the same premise. The block in curly brackets is simply a placeholder for whatever content you put into the meta tag.

<meta name="font:Sample" content="Helvetica Neue" />

You have now defined the font that is to be used any time you put {font:Sample} in your CSS.

Booleans

Booleans in Tumblr theme options are those little buttons that you can toggle on or off and this triggers some kind of event/design option. If you only have two choices, booleans are the go-to-option for Tumblr. You can use them both in the CSS and the HTML parts of your theme. Let’s take a look at the structure of booleans:

.sample {
     display: block;
     {block:ifSampleLeft}float: left;{/block:ifSampleLeft}
     {block:ifNotSampleLeft}float: right;{/block:ifNotSampleLeft}
}

When you use booleans in your CSS or HTML, you always have to open the curly brackets with {block:if. That’s how Tumblr knows that a boolean is following. Then, with camelCase (the “if” is lowercase and every new word is capitalized while it’s all written in one word), the name you want to appear on the customization screen. One thing you need to remember is that you need to close the block again. You do this by copying the opening block and then just add a slash in front of block. To define code to be used when the option is toggled off, you include “Not” directly after the if.

In the meta tag, it’s a bit different. If you look at the name that you gave your option, you’ll see that it’s a bit difficult to read. You don’t want your option to appear like that in the customization screen. The meta tag can be written like this, then, because of the camelCase we used earlier:

<meta name="if:Sample Left" content="1" />

Now, the if moves in front of the colon and there is a space between the words in your name. That is how the option will appear in the customization screen. For the content, you only have two options. You can either put 0 or 1. 0 means the option is toggled off by default and 1 means the option is toggle on by default. In this example, the div with the sample class would float left by default. You do not need to define the {block:ifNotSampleLeft} in the meta tag.

Drop-Down Lists

If you want to offer more than two options and the use of booleans is not feasible, Tumblr offers the use of drop-down lists to customize the look of your theme. These lists can really contain everything: blocks of text usually, but also fonts or colors.

<div class="sample {select:Layout}">Content</div>

You can, for example, use the select feature to add a class to a div. Let’s say we would want to give our users the option to choose between a single-column layout, a grid layout, and a masonry layout. You define this in the meta tags again:

<meta name="select:Layout" content="single-column" title="Single Column" />
<meta name="select:Layout" content="grid" title="Grid" />
<meta name="select:Layout" content="masonry" title="Masonry" />

We have now defined the three options you want to offer. They’re all put together under the name “select:Layout”. That is what put in the HTML earlier. What happens is that, depending on the selection of your user, the block will be replaced with either, “single-column,” “grid,” or “masonry.” Now you can define the layout of your site with the help of these classes.

The first selection in the meta-tags will always be the default selection. In our case, the single-column layout would be the default for the sample div.

Text

Text blocks are, I think, the easiest of the theme options that Tumblr offers. Often, these are used for custom links or secondary descriptions. Usually, you put these blocks in the HTML part of your theme, because it’s something the user should be able to enter for the final look of the theme. The block itself looks like this (similar to the colors and fonts options):

<div class="sample">{text:Sample}</div>

Text blocks are pretty straightforward. Once you put it in the meta tags, there will be a text field for the user to use in the customization screen.

<meta name="text:Sample" content="Sample Text" />

The div containing the text block will now show the sample text you put in the content part of the meta tag.

Images

Images work almost the same exact way. The only thing is that you put the block in the source area of an image block in your HTML or in the CSS (when you define a background image for example).

HTML:

<div class="sample"><img src="{image:Sample} /></div>

CSS:

.sample {
     background-image: url('{image:Sample Background}');
}

The blocks are placeholders for the URL of the image you want to use and, to make it possible for the user to upload their own images, you need to put the block in the meta tags as well.

<meta name="image:Sample" content="" />
<meta name="image:Sample Background" content="" />

If you leave the content portion of the meta tag empty, then there won’t be an image by default. In the customization screen, the user gets the option to upload their own image.

We have looked at the different theme options that are built into Tumblr and that you can easily use to make your themes more customizable. To read up some more on these options, take a look at the documentation that Tumblr itself offers.

Leave a Reply

Your email address will not be published. Required fields are marked *