Tumblr's edit HTML menu

You need to have a basic understanding of HTML and CSS for this post. 

Tumblr’s edit HTML menu display a mixture of classic HTML and CSS as well as some tumblr-specific things. 

These are called variables, blocks, and meta variables. 

Here is an example of a tumblr variable at work. I’ll only write the code once, because it’s not that short, so I won’t copy-paste it every time I explain changes in it. 



<meta name=”color:sidebarcolor” content=”#ffffff”/>

<style type=”text/css”>

#sidebar {

background-color: {color:sidebarcolor};





<div id=”sidebar”>



<div id=”post”>


(Here will be the code for all your blog’s posts, including several other blocks and variables.)





Let’s start with the simplest. 

  • {description}

This is your blog’s description. It is a specific block that tells tumblr to put your blog’s description exactly here. 

It’s only a word, because your description is just one single thing. Your description is a short text, and this block tells tumblr where you decided to put this text. 

As you can see, I put it in a div with the id selector sidebar. Everything in the div will have its properties defined in the CSS under sidebar, including whatever you put in your description. 

When the {description} block is used, it means you will be able to change everything going there by changing your tumblr description, in tumblr’s menus.  

However, you could also replace that block and directly write your description in the HTML, between <div id=”sidebar”> and </div>. It would display the exact same way on a computer screen

The preview and phone version will be different, though. What goes in the preview and phone version will be the content of your description, since I haven’t the foggiest about how it’s actually coded, but there’s probably the {description} block in there somewhere. 

(Actually I know where and more or less how it’s coded, but it’s not simple and I wouldn’t change it manually, since you can do it extremely easily via tumblr’s menu and I don’t have a phone so I don’t care about going in depth on that.)

{description} is not a variable you choose yourself. It’s a variable created by tumblr. You have to use it to display your description and you can’t choose to use any other word instead of description. 

  • background-color: {color:sidebarcolor};

This line of code is in the CSS, in the selector #sidebar. It’s a line that adds a property to my div called sidebar, which is where the description is. 

background-color is the property for… the color of the background! (I know, I know…)

What’s interesting is the variable. 

A classic CSS would go like this : background-color: “#ffffff”; 

"#ffffff" is hexadecimal for the colour white. are not necessary. A rule of thumb is that if there is a space somewhere in your value, like if your want to put the name of a font like Courrier News, you will need to put it between

In my CSS post, I said that spaces in CSS are used to indicate something withing something else (like #sidebar a for the links in the sidebar element) a bit like russian dolls. So you can’t add spaces in a value, ever, without fucking up your code. 

NEVER add spaces when you don’t need a space. 

And always put because it’s a good habit to take for when you’ll need them. 

However, here, I want to add an option in my customization menu to change my background colour without going through my CSS

To do that, I create a variable called {color:sidebarcolor} and put it instead of "#ffffff". I could keep the though. It would still work, CSS isn’t too picky. 

Here, the color: part means you’re going to define a color. You’d use font: to define a font. It’s used to tell tumblr if you’re going to give him a colour hexadecimal code, a number of pixels, or a font, or other things. You can also build menus for your customization menu like this, but it’s a bit more complicated. 

sidebarcolor is just the name given to that color. You can choose anything you want. It’s what is going to appear in your customization menu. 

Better not to put useless spaces in there. Your menu will look uglier, but code doesn’t like useless spaces so don’t. 

This part of the CSS code is like saying “ok, I need to give properties to the sidebar element, but instead of doing it here in the CSS, I’m going to give my theme’s user an option to do it via menu instead”. 

  • <meta name=”color:sidebarcolor” content=”#ffffff”/>


It’s in the <head>, but not in the CSS. Extremely important. It’s HTML language, not CSS, so if you put that in the CSS, it won’t work

It’s what will create a menu option in your customization menu. 

Note: you do not need the content=”#ffffff” part in this case. It decides what colour you choose, and since you will do it in your menu, you can take it off. 

In some cases, like if you want to create a switch or an option menu in your customization screen, you will need to put things such as content and title

You can keep the content=”#ffffff” here, though. It’ll just be ignored. 

The rest is pretty self-explanatory. Meta means it’s a meta variable, the name is the name you gave it. 

  • {block:posts}

    (Here will be the code for all your blog’s posts, including several other blocks and variables.)


This is a block, a little like {description}. It’s used to tell tumblr you’re going to put all your posts in there. 

Now, unlike your description which is a simple text, your posts are full of many things. That’s why you need to use a block formulated this way: 

{block:posts} {/block:posts}

Everything between those will be seen by tumblr as your posts. You’ll find tons of things in there: div, other blocks, etc. 

Everything except CSS and meta variables. 

That’s the basics you need to understand a simple tumblr theme. 

Finally, as a last note, remember that CSS goes in the <head>, meta variables also go in the <head> but not in the CSS, and all blocks go in the <body>. 

Theme 18: Irresistible By Godamniall

So the plan was that I would publish a redux theme on my birthday, but I’ve been so busy that I couldn’t find the time. I’m really sorry that this theme is three days late. This theme is my first redux theme. I worked really hard for it. It took me a month, since there were some glitches with the notes, but it’s all good now. I’m really proud of this theme and I hope you guys like it as much as I do!

Live Preview Code | Theme Blog

  • 400px posts 
  • Small cursor
  • 160px sidebar image
  • 3 customizable links
  • Links are cute little fruits 
  • Ask background color is customizable
  • Details (post info) background color is customizable
  • Description is best if it’s 4-5 lines, can be as long as you want. 

Please like or reblog if you use/or are planning to use.


HTML is a structure. 

An extremely straight-forward structure. 


This is, obviously enough, what HTML starts with. Everything below that is HTML. 

(Told you it was straight-forward.)


This is what HTML ends with. Everything above that is HTML. 

HTML is 100% about saying where things begin and where they end. If you mess this up, and forget to specify where something ends, you fail at HTML. 

It always works the same way. Things begin with <x> and end with </x>

<> is here because reasons. 

/ is here to mark the end of something. 

Every web page is coded like this: <x>content of x</x> 

For instance, if you open google.com, you’ll notice the corresponding tab or your browser window is called “Google”. That’s the title of the page. 

Now, open the source code (right click, view page source) and do not panic. Yes, google’s source code is super fucking complicated. In the first few lines, though, you should find something like this:


This is the part of the HTML code that displays “Google” on your browser tab. 

As another example, if I want to write “I love video games” somewhere on my page, I will write this: 

<p>I love video games.</p> 

<title> is your pages’s title, and <p> is any paragraph written on the page. 

HTML works like a menu system. If you open your edit HTML page, you’ll see many of the HTML tags like <html> or <body> have other tags in them. 

Think of it as big boxes with smaller boxes in them. 

Everything I will write here works on any website. If something is specific to tumblr, I’ll signal it. 

<html></html> is used for HTML. Everything you’ll want to add goes in there. 

<head></head> is used for a bunch of things, including all your CSS, the page’s title, meta variables, and most javascript

<body></body> is used for your page’s content. Everything displayed on your page, like posts, menus, etc, is in the <body>. 

<title></title> is your page’s title, as I showed you earlier. 

<style type=”text/css”></style> is your CSS. (1) It’s in your <head>. It’s all in your <head>. 

<div></div> is the HTML equivalent of a box or a division. Most pages are programmed by putting <div> and giving those <div> a name, then giving them special properties through CSS (2). 

<ul></ul> is for lists. Whole lists go between those two. Do not ask me why this is called ul

<li></li> is for a line within a list. Separate lines all have their own <li> tag. (3)

<a></a> is for links. It’s written this way: <a href=”url of the link”>text of the link that will be displayed on your page</a>.

<center></center> is used to center text. 

Pro-tip: don’t use it. You can define how a text looks in HTML, but it’s tedious, and much more convenient to do it via CSS instead. 

<p></p> is used for paragraphs or you can also not use it and your text will display just fine. 

<img src=”url of the picture”> (YOU DO NOT ADD </img> ANYWHERE, THIS IS ONE OF THE ONLY CASES WITH NO END TAG) is used to insert pictures. 

<br/> is used to skip a line. It looks like a fucked up end tag, but works on its own. You can also just use <br> but it doesn’t work with some HTML versions so play it safe. 

Pro-tip: in your customization menu, in the description box, you can add some HTML such as <br/> to skip a line. It helps to have neater descriptions. 

<span></span> work a lot like <div> except it’s a smaller box. <div> is used for entire portions of websites, while span can be used within a paragraph. It’s really just a smaller box, and serves the same kind of purposes (giving properties to everything between the tags). 

Everything else you can find in your HTML is either self-explanatory or something you won’t need to change if you’re just trying to modify how your theme looks. 

(1) Here the base tag is <style></style>, but to specify which language you’ll be introducing, you need to add type=”text/css”

You can specify a lot of things in a tag the same way. You can add things like style=”font-family:streetscript; font-size:15px; text-align:center;”. I took this at random from my page, but based on the code I’d say it’s my blog’s title. 

style=”x” defines the style of what’s going between the HTML tags. The font, font size, and the center effect in the code just above will apply to everything between the tags that piece of code is in. 

If I want to write a paragraph in Arial font size 11, I’ll write this: 

<p style=”font-family:arial; font-size:11px;”></p>

A general rule in HTML is that everything after an = must be between " because reasons.

A general rule in most languages is that things end with a ; also because reasons. 

This is a lot of information to absorb, so don’t try to remember it all. The best way to start coding is to first understand how to read HTML. As long as you know what <> means, what / means, what ; means and a bunch of other things, you’ll be able to understand most basic code you read. 

Instead of trying to remember everything to write code out of nowhere, open your theme edit HTML page, and read it. If you want to change something in your theme, find where it is defined in the code, and then change it. 

Finding the proper line of code to obtain a specific result isn’t hard to do on the internet, as long as you understand your page’s structure. Understanding the language’s structure is way more important than remembering how to do specific things with it. 

(2) A common way to give a name to a <div> is to write <div id=”name”></div>. Then, in the CSS, you can use #name to add properties to your <div> which is neato. More on that in a tutorial about CSS. 

(3) A list will be written this way: 


<li>First item on the list</i>

<li>Second item on the list</i>

<li>Third item on the list</i>


How to get started on theme customization

For this post, I’m going to assume you just created your tumblr account and have no idea how to customize your theme. So I’ll explain everything, including things most of you probably know. 

I’ll also assume you’re all doing this on a computer, because my phone is an old cheap shit that can’t even take pictures, much less go on the internet.  

The first step is, obviously enough, to click customization to the right of your dashboard. 

You’ll end up with a preview of your blog and an edit menu. From there you can select and install pre-built themes, but also edit HTML

HTML is a base language used to code websites. If you want to see the HTML behind a website, simply right-click anywhere on the page and click “view page source” or something like that. It will open a window with the HTML code behind the page you’re on. 

Google chrome also has a “view frame source” option, which probably allows you to see HTML of specific frames, but I never tried. 

More importantly, google chrome has an “inspect element” option, which displays HTML code in the lower third of the window, and highlights what specific portions of the code do on the page when you move your cursor over them

It’s an invaluable tool to learn code without actually buying books about it. 

It doesn’t work on most tumblr blogs for specific reasons, so you won’t be able to study other people’s themes with it. You can do that with other websites, though. 

What you have to remember is that the source code is the HTML behind the web page.

However, the HTML you will find by clicking on “edit HTML” in the customization screen is not the source code. 

Long story short, the code behind tumblr is kept hidden probably for copyright reasons, and you’ll only see a bunch of java scripts in the source code. 

The “edit HTML” screen, however, is made to allow users to navigate their theme and change things around. As such, parts of the code in the edit HTML screen is specific to tumblr, and won’t work anywhere else. 

Back into the classic edit menu, you’ll see appearance options and theme options. These things are options anybody can change, such as your blog description, your picture, your blog title, and a bunch of options in the theme options menu. 

Most of these things are created by the edit HTML screen. 

Most themes use what is called meta variables, which forces the theme options menu to give you customization options. 

In short, you can add a customization option to your theme options menu through the edit HTML screen. If you want to change around colours in your theme, for instance, you can use meta variables to add an option to change, let’s say, your posts’ font colour, and it’ll appear in the theme options menu.

Since the theme options menu comes with previews for fonts, colours, and a rather handy colour palette, it’s a very convenient method to customize things without having to know a specific colour or font’s name. Plus, it allows you to change things without having to edit your HTML every time. 

So far, I’ve tested adding to the theme options menu options to change font, font size, colour, links, and background pictures. I think much more can be done. More on that later. 

The add a page option allows you to create a specific page on your blog that will not be a post. It’s handy to create masterlists or an about page. These pages can’t be reblogged, liked, or commented on. They’re just blog pages. My about, FAQ and notable posts masterlist are pages added that way. 

Finally, the advanced options page is rather self-explanatory, except for the option to add custom CSS. Adding custom CSS here will add the CSS code directly to the source code, bypassing tumblr’s compilation of the edit HTML page. 

My guess is that some things can’t be modified or added through edit HTML, so you’ll have to add custom CSS. That, or it’s for beginners who want a specific place to copy-paste scripts they found on the internet without having to go through the edit HTML page. 

Lastly, keep in mind that HTML is the language websites are coded in, but not the only one used. It’s what makes up the whole page. 

- HTML is like a huge shelf or a skeleton. It takes care of displaying your page and basic things on it, but it also incorporates every other code language you use. Every time another code language is used, you will see the HTML equivalent of a sign saying “here begins x language” and another sign saying “here ends x language”. 

HTML works by saying “here begins x” and “here ends x”, exactly like the chapters of a book or the partitions of a shelf. It’s the armature of your page, and once you understand that, it makes it easier to read and code. 

- CSS is a language used to customize specific things. It’s what you’ll be changing if you want to change your theme’s appearance. It’s most of what my tutorials will be about. 

CSS is always introduced by an HTML sign such as <style type=”text/css”>. As you can see, it’s rather self-explanatory. CSS works very differently from HTML. 

It’s shorter to use than HTML, and a little more complicated, but the many shortcuts it allows makes it very convenient to use. 

- Javascript is a language used to add scripts to a page. You can use that to disable right-clicking on your blog, for instance. 

It’s more complicated than CSS, and you probably will limit yourself to copy-pasting pre-made scripts unless you really want to spend time studying the language. 

Just like CSS, javascript is introduced in the HTML code, so you’ll be able to notice it. And not touch it. 

There exists a bunch of other languages, but they’re either too complicated for basic changes or aren’t used for tumblr themes. 

mrsgrump said:

How do you add the AC sprites to your description? Sorry to bother you!!

hi! youre not bothering me at all! heh, i had trouble figuring out how to do it myself actually, but its quite simple.

First, paste this code: <img src=image url> into your description box, where you want the picture to be (i.e, above the text, under the text, whatever) Find the picture you want in your description, open it in a new tab and copy the url. Replace the words image url of the code with (believe it or not) the actual image url.

Thats it! Save the changes you made to your blog, and exit the customise tab, and your image will be in your description ^+^






If you have any trouble with this theme or want any html help message me on my MAIN blog

This theme includes:

2 columns

5 links

transparent picture

updates, social, stats and music drop down box (right top corner)

banner, lace and a white box behind post if options


like this post if you are thinking about or you are going to use this theme