Tumblr Theme Base Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<!--

Okay, friend. So I heard you want to make a theme, but don't know where to start? You've come to the right place! Let's see how I do at explaining things.

First off, tumblr uses a combination code and variable system, so, when you code a theme, you're making what's already there look pretty rather than actually coming up with any of the basic "tumblr"-esque stuff, like the post types and ask page and archive, etc. etc. As we go through the code, I'll point out the different pieces to you, but, to start, let's review a bit what variables are vs. CSS and HTML.

Basically, variables are anything you see in the squiggly brackets. They're placeholders for something that will be input by another part of the code or by the main server, itself. They make sure that the colors you put in the customizer show up and that every post has an accurate permalink and that the title you type in will be that title, rather than just the word "title". They are the heart and soul of tumblr themes, just like HTML, CSS, and JQuery are the body, and posts are the clothes and jewelry and whatnot.

There's a pretty nifty guide of all the tumblr variables that the staff put up, but it's pretty tricky to find. I'll just put a link here:

http://www.tumblr.com/docs/en/custom_themes

Hopefully, by the time you read this, that page will still be there. It's hard to tell, sometimes, 'cause for some reason the staff feels the need to arbitrarily change stuff. But! I'm rambling.

Alrighty, onward!

-->

<head>

<title>{Title}</title>

 <!-- okay, so, down to business. Let's start with favicons, shall we? For fun, open a new tab. See that random little image up there? That's a favicon. Right below this, there's a variable for the theme's favicon. The variable automatically substitutes in the blog's icon for the default tumblr icon. If you want to change that (although, this is just for reference. Most bloggers like to change it themselves), simply replace the whole thing--yes, the whole thing, squiggly brackets and all--with the url of the image you want to add.-->

<link rel="shortcut icon" href="{Favicon}">

<link rel="alternate" type="application/rss+xml" href="{RSS}">

{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<!-- these thingies right here are Very Important--yes, capital letter worthy. They let your blogger customize things in your theme, like colors and images and post sizes and whatever else you decide they can customize. Basically, they control everything you see in the appearance section of the customizer, with the exception of the title, description, and custom css text boxes. They are what the variables you add in (note: not the tumblr-specific variables like the favicon one up above, but the ones you, yourself, make) grab their information from. You still with me so far? Good. Right now, you'll see six  variable sources, four of which are color, one of which is an image, and the last of which is an option. There are three kinds of meta-tags: color, image, and "if". If is what makes the options you'll see on some things. Like, checkable boxes.

The default content is put between the quotation marks. That's basically what you want to show up when someone puts the code first into their theme, before they make any custom changes. For images, if you want, you can put an image url. For "if"s, you put either a 1  or a 0, in which one means "yes" or that that option is turned on, and zero means "no", or that the option is turned off. The colors work by a basic RRGGBB color spectrum, which I suspect you know about already, you savvy theme maker, you.

(note: every time you add a new meta-tag and variable to your theme, you have to save and refresh your page. Especially with "if" tags. Trust me. Update your preview after you've put the variable in your code and see what happens, if you're curious. But I'm just warning you so you don't freak out the first time it happens.-->

<meta name="color:background" content="#ffffff"/>
<meta name="color:links" content="#ff0000"/>
<meta name="color:text" content="#000000"/>
<meta name="color:posts" content="#ffffff"/>

<meta name="if:500px posts" content="1"/>

<meta name="image:background" content=""/>

<style type="text/css">

/*basics*/

/*welcome to the wonderful world of CSS! I'm going to go out on a limb and say that you've probably already got a grasp of the basics if you're reading this, so we're going to skip all that. But! Now we're getting into the nitty-gritty of theme making. Basically, if you think of HTML as the skeleton of the theme (going back to our body analogy), CSS is the skin and hair and freckles.

I, personally, like to divide my codes into sections to they're easier to edit while I'm making them and easier for other people to customize. You'll see that we're in the "basics" section right now, which I always use to include all the really boring stuff that every theme has.

The body tag, which you'll see below, basically states the default look of your theme. If you don't specify anything for any of your other objects (like font family or font size or color or whatever), the internet will automatically pick up everything from here. You can see that I've set our  default font family to verdana, one of the basic font families that every computer everywhere in the world has, and our font size to 10. The line height bit is only really important if you decide to run around and use different fonts for everything, but I like to keep it there as a browser precaution. Everyone has a different screen size, you know? And by specifying the line height, we're making sure the text is the same size for everyone.

You'll also notice that we have three custom variables here. The background color, the text color, and the background image. In reality, the background image will override the background color option, but it gives your user the option of having an image or not, which is always nice.*/

body{
    background-image:url('{image:background}');
    background-attachment: fixed;
    background-repeat: repeat;
    background-color: {color:background};
    margin-left:0px;
    margin-top:0px;
    color:{color:text};
    font-family:verdana;
    font-size:10px;
    line-height:100%;
}

a{
    text-decoration:none;
    color:{color:links};
}

img{
    border:none;
}

blockquote{
    padding-left:5px;
    border-left:1px solid #C7C7C7;
}

/*posts*/

/*Now that we've established our defaults, we can start messing with the posts. I like to work with the posts before I start with the sidebar, because they're basically the whole point of this thing. To work, posts need two attributes: container and content. Right now, we have the id postmargin as our container, and the class posts as our content. Since our posts are automatically centered, regardless of screen size, we have our margin on the container set to 0 auto, and our width set to exacly the post size.

You'll notice right away that we have two width sizes for both the posts and postmargin tags. That's because of our "if" meta-tag. When you use an if, you have to define what will happen when it's checked AND when it's not. So, right now, if the thingie is checked, our posts will be 500px in width, and, if it's not, they'll be 400px. (note: always, always, always remember to close your blocks. Just like if you forget to close a CSS tag or an HTML tag, if you don't close your variable block, the attribute will never be turned off/on. Ever.*/

#postmargin{
    margin:0 auto;
    padding-top: 10px;
    {block:if500pxposts}width:500px;{/block:if500pxposts}
    {block:ifnot500pxposts}width:400px;{/block:ifnot500pxposts}
}

.posts{
    {block:if500pxposts}width:500px;{/block:if500pxposts}
    {block:ifnot500pxposts}width:400px;{/block:ifnot500pxposts}
    padding:10px;
    margin-top:10px;
    background-color:{color:posts};
}

.posts img{
    max-width:100%;
}

.posts iframe{
    max-width:100%;
}

#quote{
    font-size:15px;
    margin-bottom:5px;
}

#link{
    text-align:center;
    font-size:15px;
}

#permalink{
    width:100%;
    margin-top:10px;
    padding-top:10px;
    padding-bottom:10px;
    height:auto;
    text-align:center;
    background-color:white;
}

{CustomCSS}</style></head><body>


<div id="postmargin">{block:Posts}<div class="posts">

<!-- you'll notice here that every post type has it's own block. Nifty, huh? That'll lety customize aspects of each post type, like quotes and audio posts and stuff. You probably noticed up above that we've got ids set up for quotes and links, and down below you'll see that I've taken the liberty of applying them to the titles of text posts, big links, and quote text, respectively. I'm keeping things basic, so anything fancier you'll have to figure out on your own! Heh. This is a base code, after all.  -->

{block:Text}
<div id="link">
    {block:Title}{Title}{/block:Title}
</div>
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" width="500">{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Quote}
<div id="quote">
    {Quote}
</div>
{block:Source} —{Source}{/block:Source}
{/block:Quote}

{block:Link}
<div id="link">
    <a href="{URL}" {Target}>{Name}</a>
</div>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<t>{Title}</t>{/block:Title}
{block:Lines}
    {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
{/block:Lines}
{/block:Chat}

{block:Audio}
{AudioPlayerWhite}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:Answer}
<i>{Asker}: {Question}</i><br>{Answer}
{/block:Answer}

<!-- Almost done! Now, the last thing to worry about are permalinks. Right now, we have something basic basic basic set up within our posts. No hover effects, nothing fancy. Permalinks are where a lot of the default tumblr variables come into play, so feel free to reference the tumblr variable guide I put the link up above to. I still use it, 'cause there's no point in memorizing them all!

Anyway, you'll notice that, right now, the only things showing up are the posted date and times. That's because of the blocks. These blocks are different than the ones we used in the CSS to designate our meta-tag attributes. They're tumblr's Special Variable Blocks, and they only work when there are variables inside of them. Because the posts on these customize pages don't have any notes and are (technically) original posts (meaning they weren't reblogged from anywhere), the NoteCount and RebloggedFrom blocks make sure that the non-variable words don't randomly show up. If you don't get what I mean, remove the RebloggedFrom opening and closing blocks. The links show up, yeah? But if the post hasn't been reblogged from anywhere, the links will just link back to the same place.

Also, the blocks also make sure the random text doesn't show up on ask pages or other pages. The permalinks are always going to be there, but, if the stuff is inside blocks, in theory it'll just be a colored bar (in this case) rather than blank at blank with blank notes, etc. The variables like DayOfMonthWithZero and stuff won't show up on pages, but all the non-variable text will.-->

<div id="permalink">

{block:Date}
<a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</a>
at <a href="{Permalink}">{24Hour}:{Minutes}{AmPm}</a>
<br>
{/block:Date}

{block:NoteCount}
with <a href="{Permalink}">{NoteCount}</a> notes
<br>
{/block:NoteCount}

{block:RebloggedFrom}
<a href="{ReblogRootURL}">source</a> - <a href="{ReblogParentURL}">from</a>
{/block:RebloggedFrom}

</div>

</div>{/block:Posts}</div>

<!--So that's basically it. I didn't do anything with links or titles or description, because it's all relatively simple to figure out with a little effort. Like I said, this is a base code. An outline. A guide book. Something to get you comfortable with theme making before you dive right in. Play with it, see what you can make it do. There are some really great websites that are just giant reference sheets for CSS and HTML attributes just like the variable one for tumblr, so look for something interesting and try to add it somewhere. That's basically all I do, and apparently people seem to like the stuff that comes out.

Thanks for sitting through this whole thing! And cookies for you if you actually read all of my rambling information. If you have any questions, feel free to hit up my ask box and I'll do my best to answer them. I'm not a master by any means, but I do have some experience with this stuff, which is generally pretty helpful. So! Yes.

Happy theme-ing, young padawan, and may the force be with you.


(also here's the CSS directory A+ very helpful)
http://w3schools.com/cssref/default.asp

-->

</body></html>