IMPORTANT: Please please please do not distribute/copy any tutorials found here to any other tumblr sites. I have spent a very very long time making this for you and it would literally break my heart to see it's content splashed over any other tutorial blog. I know you wouldn't do that anyway, 'cos you're beauts. Please note that if you do decide to copy my tutorials you will be reported, there's not excuse for laziness.
What puzzles you about making a theme? What do you need help with?
If you have installed one of my themes, when you go to the customize page you’ll notice a few options in the appearance section like below…
How did I do this? You ask? By using meta tags.
To use a meta tag you’ll need what I call an ‘id’, a ‘name’ for it and a ‘default’ setting. The id in the case refers to the type of meta tag. The name is what you decide to refer to that meta tag as, it can be anything and is the name that will show in the appearance options. The ‘default’ setting is the what you want that tag to be set to when the theme is first installed, for example when you install one of my themes, it already has default colours etc. In the above pictures you’ll see different types of appearance options, to change the colour, the font, upload images etc, this is what meta tags do…
Here are the id’s I use most:
- image
This tag will let the user upload an image whether it be a background image or a sidebar image.
- color
This will let the user change the colour of something, whether it be the colour of the text, or the background.
- text
This will let the user add text, this is particularly useful when you want the user to be able to add custom links.
- font
This will let the user change the font of a particular area, whether it be the header or main text.
- if
This tag allows users to decide whether they want certain things on their theme, whether they want endless scrolling or not?
Step 1.
You need to decide what meta tags you’ll want to have in your theme, like below:
This is the initial design of the tag, you’ll see i’ve highlighted the id, name and default. So in the appearance options this would show up with an option to change the colour of the header and you’ll see that a colour has already be set for it by default. For an image meta tag, you’d use an image url as a default. For the if meta tag you’d use eith 1 or 0, in this case, one means Yes it’s on and 0 means off. For the font meta tag you’d set the default as the font you want the theme to have when it’s originally installed.
The above alone does not make the tags work, you need to incorporate them in to the actual theme, like below…
or…
You’ll notice the layout as {id:name}, the name needs to correspond with the meta tag name you first use.
Voila, your users can now easily customize your themes!
So maybe you want to show the notes of the post on the Index Page? Or maybe you want a direct link on the post to the reblog or permalink page? I’ll show you how!
You have two options…
1. Post links on the top/bottom
2. Hover over post links, where the links show up when you hover over the post.
OPTION 1
For this you’ll need to create the design on the links using css, do you want them to have a background? Did you want the font to be different? A simple example of this is:
#postlinks{
position:absolute;
font-size:10px;
padding:2px;
text-align:right;
}
Next, you need to add the ‘content’ of the post links, as you should already know I like to refer to the ‘body’ part of the theme as the content. You need to place it in a div box. Where you place this will depend on whether you want the post links on the top of your post or at the bottom.
…
OPTION 2
To make hover over post links please see my tutorial here.
THE LINKS.
So you have your post links sorted, but what links to what?
Here are a few of the common links and tags:
- Link to the permalink page: use {PermalinkPage} as the url, for example <a href=”{PermalinkPage}”>Permalink</a>
- Link to the reblog page: use {ReblogURL} as the url, for example <a href=”{ReblogURL}”>Reblog</a>
- Show the note count, you’d use that tag {NoteCounte}, for example ‘With {NoteCount} notes’.
- Show the date, you’d use the tags shown here (CLICK HERE) this is TUMBLR’s own list of date tags to use. For example ‘Posted on {DayOfWeek}’ would show as Posted on Monday/Tuesday….
Voila, you have links on your posts!
When you make a theme, you’ll want to let others know that you are the creator of this theme! To do this you can use this code (CLICK HERE) and place it at the very very top of your coding, before any tags or any coding. You can write whatever you want!
This credit is hidden on the theme & you can only see it when you view the source code.
Before you even attempt to make a theme, you should be fluent with html/css. Html and css are different. If you need help remembering a code or whatever, here is an amazing website with pretty much every css and html code you’ll ever need to design your theme.
How do you turn a single column theme in to a multi-column theme?
It’s A LOT simpler than people think, all you need to do is change three different widths, that’s it!
Step 1: decrease the post width
Step 2: increase the wrap width, you should start with having the center width at twice the post width & then keep on increasing the wrap width until you find two columns will fit in it.
Step 3: The final thing you need to change is the width of your photo posts to the exact same width of your posts, you’ll need to do this every time you change the width of your posts.
That’s it!
This is basic base code you can use to make a theme. It’s very basic, and just includes the important bits. It’s here so you can do weird and wonderful things to it but still call it your own as again like the structure, it contains the basics for every tumblr theme ever invented.
Every theme needs structure for many reasons. One, it’s easier for you to edit, two, if you don’t have structure, tumblr will tell you the html is invalid when you go to upload it! It’s annoying.
I’ve given you the basic structure below (along with explanation), as to be honest it’s pretty much the same for every theme… everything with a good ordered layout.
