First stage Tumblr Theme Making is Easy!

Chapter 1: Theme Making is Easy!

I’m going to make this plain and simple: Most theme makers do not start from scratch. Unless you really know what you’re doing, you’re going to want to start with a base code.

The base code I provide has a few major things:

General Things

1. The tags I told you about in the preface

CSS Things

1. The body element (body{…})
2. The main post background (#cent{…})
3. The posts element (#post{…})
4. An example element (in this case, a description) (#description{…})

HTML Things

1. The body tag
2. The main post tag
3. The posts tag
4. The example tag

You can find the base theme HERE! To learn how to manipulate it, keep reading!

Chapter 3: What does all that stuff mean?
So what do all the lines inside of this example description element mean? Let’s label them all and go over them one by one.

#description{ (1)
background-color:#fff; (2)
width:230px; (3)
height:100%; (4)
margin-top:-8px; (5)
margin-left:250px; (6)
position:fixed; (7)
padding:3px; (8)
} (9)

Before we start, always remember: You need to leave the little semicolon after the line. If you don’t, it’ll mess up your theme.
Now, let’s start with number (1).

• This is the title of the element. As explained in the previous chapter, this is what the element tag depends on to know which tag corresponds with which element.
• Keep it short: One word only!
• Remember that a . (period) in front of the word means it’s tag should be div class, and a # (hashtag) means it’s tag should be div id.

Number (2).

• This is the background colour of the element. Pretty obvious, right? A lot of the lines are pretty obvious. This can be changed using hex colour codes. Obviously you’re not expected to know every single one of the colour codes possible, so you can find a colour you like and copy it from here.
• If you don’t want a background colour, erase the hex code (Note: Don’t forget to erase the hashtag!), and replace it with transparent. Remember this does not work with the body element.
• You can add a background image using the following code: Paste it under the background-color line.

background-image:url('URL');

Onto number (3)!

• This is the width of the element. You can make it smaller or larger by decreasing or increasing the number of pixels.
• You can also change the size of the pixels by using percents, although this isn’t recommended for beginners.
• You can make an element cover the whole page by changing the size to 100%. 

Numbah (4)…

• This is the height of your element! You can adjust the height the same way as you adjust the width.
• You can also use percentages for this, but once again, it is not recommended for beginners.
• And like width, you can make an element the height of a whole page by making it’s height 100%.

Number (5)!

• This is the distance of the element from the top of the webpage. Not the top of your screen, but the top of your webpage.
• Remember: There is a bit of padding (which I’ll explain later) at the top of the webpage that causes the element to not reach the top of the webpage if you set the top margin to 0px, so if that’s what you want, make it -8px! You can do negatives! This is how you do drop down tabs, which I’ll explain in a later chapter.
• This can also be measured as distance from the bottom of the webpage. This would require changing the code to the one below (in other words, removing line 5 completely and replacing it with this one):

bottom: 80px;

Number (6) ..

• This is the distance of the element from the left side of the webpage.
• All the same rules as number five apply to this one! Including the -8px rule :)
• The code is also the same: However you would change bottom to left or right, depending which side you want the distance to be from.

Number (7).

• This is the positioning of the element. What this means is what the element does when the user is scrolling.
• If you want the element to move with the posts while you scroll, the element must be fixed.
• If you want the element to be in one place on the blog and you can scroll past it, it must be absolute.
• If you want the positioning to be relative to another object, which is recommended for more advanced coders, place it as relative.

Number (8) almost there!

• This is the amount of padding on the element. Padding is the space between the absolute edge of the element and the text or images/objects inside of the element.
• If set to zero, therea 

Chapter 2: How do CSS and HTML Correspond?
The way CSS and HTML work together to make what you see is a pretty simple concept to explain. First of all, an element, for example, #description{…}, would be displayed as the following:
<div id=”description”>…</div>
(PS: remember the “…” signifies anything inside)
The two go together because the name is the same, but ALSO because the element has a # next to the name, and the tag has the corresponding opening, div id. This is important because there is another type of corresponding element and id, which is an element that has a . (period) next to the name, and has the opening div class in the tag. That probably sounds really confusing, but it’s easier if I show you in a situation.
Let’s say this is my description element:

#description{
background-color:#fff;
width:230px;
height:100%;
margin-top:-8px;
margin-left:250px;
position:fixed;
padding:3px;
}

Then this would be my tag:

<div id="description">{Description}</div>

However, if THIS were my description element:

.description{
background-color:#fff;
width:230px;
height:100%;
margin-top:-8px;
margin-left:250px;
position:fixed;
padding:3px;
}

Then THIS would be my tag:

<div class="description">{Description}</div>

Do you see the difference between a id and class element? It’s underlined in the examples. When you make a description element, the element won’t show up in your theme preview until you put the tag into the <body> section.
In the next chapter, we will discuss what each line of the element does!