Now since this tutorial will be longer than most of the tutorials in this blog, it will be divided into parts so you can follow what’s actually happening. So let’s start with Planning.
Planning
You may think that this part is useless but trust me, you wouldn’t want to be stuck halfway the tutorial just because you’re not sure where you’d put the dates. So grab a pen and paper and at least try to sketch your idea for your theme. You don’t have to make it really detailed. As long as you know where everything goes, you’re good to go. For this tutorial, we’ll be using this simple layout:
So as you can see, the theme will have 3 main parts: The Side bar, the Header, and the Content section. The Side bar would include your Photo, your description, and maybe some more links. The Header Section would of course, contain your Blog’s title or if you want, a banner for your blog. The Content section would be where all your posts would appear.
You would also see, that I’ve decided to put the dates, the tags and the notes under every post, and after that, a horizontal divider would separate posts from each other. At the bottom of the very last post, arrows will be placed to serve as the Next and Previous button.
Putting in Colors
Colors would be important. You’ll have to choose your color palette wisely because if your reader’s eye can’t withstand your choice of really bright colors, they might just close your blog and never comeback. You may even get a dog reader! And you should understand that a dog’s color range isn’t as high a human’s, so it may not be able to read your blog!
Kidding aside, you can choose a nice color palette at Colourlovers if you haven’t thought of one yet. Remember that you will need the Hexadecimal value of the color. It’s the 6-digit thing that starts with a # sign. An example is #FF0000. Colourlovers provides the Hexadecimal value of a palette you want some where below it.
For the theme in this Tutorial, we’ll use this palette:
color 1= #D6D1B7-background color 2= #F0E9CC -text color 3= #F4E798-dates and other miscellaneous color 4= #A0B398-boxes color 5= #B4C6C7-links
Making the skeleton
So here comes the exciting part. Now that we have an idea of what we will do and colors to use, we can start making the body of the theme.
Note: As you may have noticed in the link I provided, it’s the old Customize page. Well, as cool as the new customize page may look, it would be hard showing you a tutorial when half of the page is hidden. So to save all the effort of having to re-size everything, we’ll be using the old Customize page. But if you’re comfortable in using the new one, you’re free to do so.
So now, if you’re already in the old customize page, click on the Theme tab, click on the Use custom HTML button and delete everything in it.
Once, you’ve deleted them all(yes, all of them), paste this codes inside the box:
<html>
<head>
</head>
<body>
</body>
</html>
If you have knowledge on HTML, you’ll be able to recognize these codes. But if you aren’t, then here’s an explanation:
The very first line of the code is the <html> tag. Anything that goes after that tag and before the </html> is a part of your page/theme/website.
The <head></head> is where all the CSS will go. CSS codes are the one that has curly brackets and are declared by the tag <style type=”text/css”> and</style>.
The <body></body> is the main part of your theme. And all the other HTML tags will most likely go here. For now that’s all you have to know about it.
Moving on, if you click on the Update Preview Button, you should get a blank page.
Please make sure that you’re able to copy all of this codes. To highlight all of the codes, try highlighting the first line, then use your scroll bar to scroll down without releasing the mouse.
So first, let me explain.
The first element (body), you can consider that as the “wholeness” of your theme. Meaning, any style inside the curly bracket after the body, is a style for the whole theme. The background is there, the font-family, the font-size, the font color(color) and so on.
The second and third element(a, a:active, a:visited; a:hover) are the styles for the links.
The fourth element(#main) will be some kind of wrapper to center your theme in whatever screen resolution your theme should appear. This is transparent so you won’t be able to see this division. The # sign before the element name means it’s an ID. If you want to know more about IDs and Classes, check this out. But you can do that later.
Now, let’s add some styles for the sidebar, header, and the content section.
Add these codes at the end of your other CSS or just above </style>. Remember that from now on, all the other CSS codes in this Tutorial shall/should be added before the </style> tag regardless of what you just put in there.
The #sidebar element, as you can see, has a background-color of our fourth color in the palette, an absolute position, has a width of 180px, a padding of 10px, and was positioned 10px from the left and 5px from the top of #main(which is transparent so you can’t see).
The #header element has a background-color of our fourth color in the palette, too, an absolute position, has a width of 180px, a height of 200px, a padding of 10px, and was positioned 220px from the left and 5px from the top of #main.
The #content element, on the other hand, has a background-color of our fourth color in the palette(#A0B398), an absolute position, has a width of 500px, a padding of 10px, and was positioned 220px from the left and 235px from the top of #main.
Next, we’ll be making the divisions appear in the theme. Add these codes in the body tag:
Press the Update Preview button. If you’re doing this properly, you should get something like this:
For some summary, in case you haven’t noticed it out yet, I’ve used most of the colors in the palette as a background-color for the elements like I’ve labeled them earlier in the tutorial. The Sidebar, the Header and the content box is now also in place.
Putting Some Contents in
So since the layout is now done, It’s time to put in the contents. We’ll start with making the posts appear. But first, add this to your CSS codes:
This element would be our posts’ division styles. Anything inside the post div would be aligned to the left, have a margin on the top and bottom of 5px, and dashed lines at the bottom to separate it from the next post. You can add attributes here if you want. But for now, let’s just stick with that.
Next, add these codes AFTER the <div id=”content”> in the Body tag:
By now, the posts should appear in your theme once you press the Update Preview button. There should be broken lines under each posts, too.
If you want to learn what all those codes mean, you can check at the Theme Docs. I won’t be tackling them one by one in this Tutorial.
Putting styles on some posts
So you may think that the posts are actually looking okay, but there are some few more things to add. As you may have noticed(or not), some parts of the previous codes are inside some more divisions(<div></div>). That’s to make styling them easier. We don’t need to style every one of them though because some looks fine already.
So first, in the text post, we’ll have to fix the blockquote and the header/title. Add these at the bottom of the rest of your CSS codes(just before </style>).
After this, the Chat post part should now look like this:
Miscellaneous
Now since we’re done with the posts, it’s time to put the dates, notes, and the tags.
So in the plan, we want to show the dates, notes, and tags under each posts. So all you’ll have to do is put these codes right before/above {/block:Posts}:
Notes: Here are some notes for those who are interested:
If you want to put something above every post, you can add it right after {block:Posts}. For anything you want to add under each post, you can put it right before {block:Posts} just like what we did in this tutorial..
And also, if you want to put anything inside a certain type of post, be sure to put it inside its type tag. For example, if you want to put something above every TEXTPOST, you can add it right after {block:Text} or before {/block:Text} if you want it below every TEXTPOST. The same goes for the other kind of posts.
Paginations
Now to end the content part, lets put in the Next and Previous button. To do this, add these codes just after {/block:Posts}:
After putting that, Press Update Preview, and some numbers and the NextButton should appear after your posts. The Previous button wouldn’t show up because there aren’t any Previous page yet.
The Sidebar
Now that the contents are in, It’s time to put your Photo, your description and add some links on your theme. Put these codes immediately after the <div id=”sidebar”> in your theme codes:
This would make your Photo and Description to appear in your Theme. You can edit your Description in the Info tab or, if you’re using the new Customize page, under the Description. You can also use other photos other that your default picture by replacing the {PortraitURL-96} in the code into the URL of a photo.
To add links after your Photo, just add it under the <img src=”….”><br> part. For example:
<center> <img src="{PortraitURL-96}"><br>
<a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> <br>
{Description} </center>
The <br> part makes the text after it start in a new line. So if you don’t want your links to be in line with the rest of the texts, be sure to add a <br> at the end. You can try removing the <br> so see the difference.
You can also add more things after the {Description} like ads, some more links, and other whatnot.
Header
We will now add the header. You could actually play with this part. If you want to make a header using just your Blog name, here’s how:
First, add this to your CSS codes:
h1{
font-size: 70px; margin: 20px 0px 0px 0px;
font-family: 'Comic Sans MS', 'Comic Sans MS5', 'cursive';
}
You can also play with this part. You can change the font of the text by changing the font name in the font-family attribute. You may want to check this page out, too. The font-size can also be changed as desired.
Then add this after <div id=”header”>:
<h1>{Title}</h1><br> Some witty caption goes here
Press Update Preview and voila! You’re theme is almost good to go!
By the way, if you want to put an image in your header instead of text, you can use the
<img src="image_URL_here">
Just replace the image_URL_here part with your image’s URL. Be sure it has the same dimension as your header so it wouldn’t look off. You can of course change you header’s size to suit your liking.
The other stuff
So before I end this Tutorial, just add this bits of codes just after the <head> tag.
The first line is your Page’s title. This would be the name that would appear in the Title bar of your browser. If you want a fancier Title bar, check this tutorial out.
The second line is the image that appears next to the title in your Title bar. It’s also the some kind of icon for your blog. An icon version of your default pic would be your icon.
The third line is a declaration for your RSS feeds and the last line is the Metadescription. This is what show would up in search engines like Google once it turns up as a result.
That’s it! If you haven’t been saving your progress the whole tutorial, do so now!
If you have been following everything in this tutorial, your theme should look something like this:
Here’s the source code for the theme, too, so you can check and compare if you had problems. DOWNLOAD THE SOURCE CODE.
Here are also some more Tumblr theme tutorials from other people in the web:
14thave’s Tutorial- this tutorial was adapted from her tutorial btw. She has an in-depth explanation on the post types so you may want to check her tutorial out.
1stwebdesigner- this blog explains most of the codes used in making a Tumblr Theme. If you’re really serious about understanding all the codes used in a Tumblr theme, you can start here.
So there it is! if you have questions about the tutorial, you can send me a message at my askbox. Please refrain from copying this tutorial.
</div>
By now, the posts should appear in your theme once you press the Update Preview button. There should be broken lines under each posts, too.
If you want to learn what all those codes mean, you can check at the Theme Docs. I won’t be tackling them one by one in this Tutorial.
Putting styles on some posts
So you may think that the posts are actually looking okay, but there are some few more things to add. As you may have noticed(or not), some parts of the previous codes are inside some more divisions(<div></div>). That’s to make styling them easier. We don’t need to style every one of them though because some looks fine already.
So first, in the text post, we’ll have to fix the blockquote and the header/title. Add these at the bottom of the rest of your CSS codes(just before </style>).
blockquote{ background-color: #808f79; border-left: 1px dashed #F4E798; padding: 3px; margin: 5px; } h3{
font-size: 18px;
font-weight: 700;
}
It should look like this after you put those:
Next is the quote post. Just add these again to the rest of your CSS codes.
.quote{ font-size: 20px;
font-style: italic; } .source{ text-align: right; }
The quote post should now look like this:
Next, Chat posts:
ul.chat {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.chat li {
list-style-type: none;
margin-left: 0px;
padding: 3px;
}
.chat li.odd {
background-color: #808f79;
}
.chat li.even {
background-color: #B4C6C7;
border-left: 5px solid #808f79; } .label { font-weight: bold; }
After this, the Chat post part should now look like this:
Miscellaneous
Now since we’re done with the posts, it’s time to put the dates, notes, and the tags.
So in the plan, we want to show the dates, notes, and tags under each posts. So all you’ll have to do is put these codes right before/above :
<div class="info">
<div class="date">
</div>
</div>
And add these at the bottom of your CSS codes:
.info {
padding: 2px 3px 2px 3px;
border-bottom: 1px dashed #F0E9CC;
margin-bottom: 5px;
text-align: left;
}
.tag {
font-weight: normal;
margin-right: 2px;
font-style: italic;
text-transform: lowercase;
}
.date {
font-size: 10px;
color: #666;
text-transform: uppercase;
font-weight: bold;
}
Notes: Here are some notes for those who are interested:
If you want to put something above every post, you can add it right after . For anything you want to add under each post, you can put it right before just like what we did in this tutorial..
And also, if you want to put anything inside a certain type of post, be sure to put it inside its type tag. For example, if you want to put something above every TEXTPOST, you can add it right after if you want it below every TEXTPOST. The same goes for the other kind of posts.
Paginations
Now to end the content part, lets put in the Next and Previous button. To do this, add these codes just after :
<div style="width: 100%; display: block">
</div>
After putting that, Press Update Preview, and some numbers and the NextButton should appear after your posts. The Previous button wouldn’t show up because there aren’t any Previous page yet.
The Sidebar
Now that the contents are in, It’s time to put your Photo, your description and add some links on your theme. Put these codes immediately after the <div id=”sidebar”> in your theme codes:
<center>
<img src="http://24.media.tumblr.com/avatar_568ef30feb90_96.png"><br>
</center>
This would make your Photo and Description to appear in your Theme. You can edit your Description in the Info tab or, if you’re using the new Customize page, under the Description. You can also use other photos other that your default picture by replacing the http://24.media.tumblr.com/avatar_568ef30feb90_96.png in the code into the URL of a photo.
To add links after your Photo, just add it under the <img src=”….”><br> part. For example:
<center> <img src="http://24.media.tumblr.com/avatar_568ef30feb90_96.png"><br> <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> <br> </center>
The <br> part makes the text after it start in a new line. So if you don’t want your links to be in line with the rest of the texts, be sure to add a <br> at the end. You can try removing the <br> so see the difference.
You can also add more things after the like ads, some more links, and other whatnot.
Header
We will now add the header. You could actually play with this part. If you want to make a header using just your Blog name, here’s how:
First, add this to your CSS codes:
h1{
font-size: 70px; margin: 20px 0px 0px 0px;
font-family: 'Comic Sans MS', 'Comic Sans MS5', 'cursive';
}
You can also play with this part. You can change the font of the text by changing the font name in the font-family attribute. You may want to check this page out, too. The font-size can also be changed as desired.
Then add this after <div id=”header”>:
<h1>TutoBx</h1><br> Some witty caption goes here
Press Update Preview and voila! You’re theme is almost good to go!
By the way, if you want to put an image in your header instead of text, you can use the
<img src="image_URL_here">
Just replace the image_URL_here part with your image’s URL. Be sure it has the same dimension as your header so it wouldn’t look off. You can of course change you header’s size to suit your liking.
The other stuff
So before I end this Tutorial, just add this bits of codes just after the <head> tag.
<title>TutoBx</title>
<link rel="shortcut icon" href="http://25.media.tumblr.com/avatar_568ef30feb90_16.png"/> <link rel="alternate" type="application/rss+xml" href="http://tutobx.com/rss">
This wouldn’t show up in your theme.
The first line is your Page’s title. This would be the name that would appear in the Title bar of your browser. If you want a fancier Title bar, check this tutorial out.
The second line is the image that appears next to the title in your Title bar. It’s also the some kind of icon for your blog. An icon version of your default pic would be your icon.
The third line is a declaration for your RSS feeds and the last line is the Metadescription. This is what show would up in search engines like Google once it turns up as a result.
That’s it! If you haven’t been saving your progress the whole tutorial, do so now!
If you have been following everything in this tutorial, your theme should look something like this:
Here’s a live demo.
Here’s the source code for the theme, too, so you can check and compare if you had problems. DOWNLOAD THE SOURCE CODE.
Here are also some more Tumblr theme tutorials from other people in the web:
14thave’s Tutorial- this tutorial was adapted from her tutorial btw. She has an in-depth explanation on the post types so you may want to check her tutorial out.
1stwebdesigner- this blog explains most of the codes used in making a Tumblr Theme. If you’re really serious about understanding all the codes used in a Tumblr theme, you can start here.
So there it is! if you have questions about the tutorial, you can send me a message at my askbox. Please refrain from copying this tutorial." />
Lots of people would probably want to learn how to make their own themes so they can show/express their own brand or style. Some probably just want to get rid of those credits and put something of their own. Well, whatever your reasons are, I’m sure this step-by-step tutorial on how to make your own Tumblr Theme would get you one.
Before we start though, here’s a very short list of what you will need for this tutorial:
At least basic Knowledge on HTML. CSS would be a plus but isn’t required since I’m going to explain most of it to you anyway.
Lots of patience.
But If you want to get some knowledge beforehand, you can study HTML here andCSS here.
Now since this tutorial will be longer than most of the tutorials in this blog, it will be divided into parts so you can follow what’s actually happening. So let’s start with Planning.
Planning
You may think that this part is useless but trust me, you wouldn’t want to be stuck halfway the tutorial just because you’re not sure where you’d put the dates. So grab a pen and paper and at least try to sketch your idea for your theme. You don’t have to make it really detailed. As long as you know where everything goes, you’re good to go. For this tutorial, we’ll be using this simple layout:
So as you can see, the theme will have 3 main parts: The Side bar, the Header, and the Content section. The Side bar would include your Photo, your description, and maybe some more links. The Header Section would of course, contain your Blog’s title or if you want, a banner for your blog. The Content section would be where all your posts would appear.
You would also see, that I’ve decided to put the dates, the tags and the notes under every post, and after that, a horizontal divider would separate posts from each other. At the bottom of the very last post, arrows will be placed to serve as the Next and Previous button.
Putting in Colors
Colors would be important. You’ll have to choose your color palette wisely because if your reader’s eye can’t withstand your choice of really bright colors, they might just close your blog and never comeback. You may even get a dog reader! And you should understand that a dog’s color range isn’t as high a human’s, so it may not be able to read your blog!
Kidding aside, you can choose a nice color palette at Colourlovers if you haven’t thought of one yet. Remember that you will need the Hexadecimal value of the color. It’s the 6-digit thing that starts with a # sign. An example is #FF0000. Colourlovers provides the Hexadecimal value of a palette you want some where below it.
For the theme in this Tutorial, we’ll use this palette:
color 1= #D6D1B7-background color 2= #F0E9CC -text color 3= #F4E798-dates and other miscellaneous color 4= #A0B398-boxes color 5= #B4C6C7-links
Making the skeleton
So here comes the exciting part. Now that we have an idea of what we will do and colors to use, we can start making the body of the theme.
Note: As you may have noticed in the link I provided, it’s the old Customize page. Well, as cool as the new customize page may look, it would be hard showing you a tutorial when half of the page is hidden. So to save all the effort of having to re-size everything, we’ll be using the old Customize page. But if you’re comfortable in using the new one, you’re free to do so.
So now, if you’re already in the old customize page, click on the Theme tab, click on the Use custom HTML button and delete everything in it.
Once, you’ve deleted them all(yes, all of them), paste this codes inside the box:
<html>
<head>
</head>
<body>
</body>
</html>
If you have knowledge on HTML, you’ll be able to recognize these codes. But if you aren’t, then here’s an explanation:
The very first line of the code is the <html> tag. Anything that goes after that tag and before the </html> is a part of your page/theme/website.
The <head></head> is where all the CSS will go. CSS codes are the one that has curly brackets and are declared by the tag <style type=”text/css”> and</style>.
The <body></body> is the main part of your theme. And all the other HTML tags will most likely go here. For now that’s all you have to know about it.
Moving on, if you click on the Update Preview Button, you should get a blank page.
Please make sure that you’re able to copy all of this codes. To highlight all of the codes, try highlighting the first line, then use your scroll bar to scroll down without releasing the mouse.
So first, let me explain.
The first element (body), you can consider that as the “wholeness” of your theme. Meaning, any style inside the curly bracket after the body, is a style for the whole theme. The background is there, the font-family, the font-size, the font color(color) and so on.
The second and third element(a, a:active, a:visited; a:hover) are the styles for the links.
The fourth element(#main) will be some kind of wrapper to center your theme in whatever screen resolution your theme should appear. This is transparent so you won’t be able to see this division. The # sign before the element name means it’s an ID. If you want to know more about IDs and Classes, check this out. But you can do that later.
Now, let’s add some styles for the sidebar, header, and the content section.
Add these codes at the end of your other CSS or just above </style>. Remember that from now on, all the other CSS codes in this Tutorial shall/should be added before the </style> tag regardless of what you just put in there.
The #sidebar element, as you can see, has a background-color of our fourth color in the palette, an absolute position, has a width of 180px, a padding of 10px, and was positioned 10px from the left and 5px from the top of #main(which is transparent so you can’t see).
The #header element has a background-color of our fourth color in the palette, too, an absolute position, has a width of 180px, a height of 200px, a padding of 10px, and was positioned 220px from the left and 5px from the top of #main.
The #content element, on the other hand, has a background-color of our fourth color in the palette(#A0B398), an absolute position, has a width of 500px, a padding of 10px, and was positioned 220px from the left and 235px from the top of #main.
Next, we’ll be making the divisions appear in the theme. Add these codes in the body tag:
Press the Update Preview button. If you’re doing this properly, you should get something like this:
For some summary, in case you haven’t noticed it out yet, I’ve used most of the colors in the palette as a background-color for the elements like I’ve labeled them earlier in the tutorial. The Sidebar, the Header and the content box is now also in place.
Putting Some Contents in
So since the layout is now done, It’s time to put in the contents. We’ll start with making the posts appear. But first, add this to your CSS codes:
This element would be our posts’ division styles. Anything inside the post div would be aligned to the left, have a margin on the top and bottom of 5px, and dashed lines at the bottom to separate it from the next post. You can add attributes here if you want. But for now, let’s just stick with that.
Next, add these codes AFTER the <div id=”content”> in the Body tag:
By now, the posts should appear in your theme once you press the Update Preview button. There should be broken lines under each posts, too.
If you want to learn what all those codes mean, you can check at the Theme Docs. I won’t be tackling them one by one in this Tutorial.
Putting styles on some posts
So you may think that the posts are actually looking okay, but there are some few more things to add. As you may have noticed(or not), some parts of the previous codes are inside some more divisions(<div></div>). That’s to make styling them easier. We don’t need to style every one of them though because some looks fine already.
So first, in the text post, we’ll have to fix the blockquote and the header/title. Add these at the bottom of the rest of your CSS codes(just before </style>).
After this, the Chat post part should now look like this:
Miscellaneous
Now since we’re done with the posts, it’s time to put the dates, notes, and the tags.
So in the plan, we want to show the dates, notes, and tags under each posts. So all you’ll have to do is put these codes right before/above {/block:Posts}:
Notes: Here are some notes for those who are interested:
If you want to put something above every post, you can add it right after {block:Posts}. For anything you want to add under each post, you can put it right before {block:Posts} just like what we did in this tutorial..
And also, if you want to put anything inside a certain type of post, be sure to put it inside its type tag. For example, if you want to put something above every TEXTPOST, you can add it right after {block:Text} or before {/block:Text} if you want it below every TEXTPOST. The same goes for the other kind of posts.
Paginations
Now to end the content part, lets put in the Next and Previous button. To do this, add these codes just after {/block:Posts}:
After putting that, Press Update Preview, and some numbers and the NextButton should appear after your posts. The Previous button wouldn’t show up because there aren’t any Previous page yet.
The Sidebar
Now that the contents are in, It’s time to put your Photo, your description and add some links on your theme. Put these codes immediately after the <div id=”sidebar”> in your theme codes:
This would make your Photo and Description to appear in your Theme. You can edit your Description in the Info tab or, if you’re using the new Customize page, under the Description. You can also use other photos other that your default picture by replacing the {PortraitURL-96} in the code into the URL of a photo.
To add links after your Photo, just add it under the <img src=”….”><br> part. For example:
<center> <img src="{PortraitURL-96}"><br>
<a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> | <a href="this_link.com">Some link here</a> <br>
{Description} </center>
The <br> part makes the text after it start in a new line. So if you don’t want your links to be in line with the rest of the texts, be sure to add a <br> at the end. You can try removing the <br> so see the difference.
You can also add more things after the {Description} like ads, some more links, and other whatnot.
Header
We will now add the header. You could actually play with this part. If you want to make a header using just your Blog name, here’s how:
First, add this to your CSS codes:
h1{
font-size: 70px; margin: 20px 0px 0px 0px;
font-family: 'Comic Sans MS', 'Comic Sans MS5', 'cursive';
}
You can also play with this part. You can change the font of the text by changing the font name in the font-family attribute. You may want to check this page out, too. The font-size can also be changed as desired.
Then add this after <div id=”header”>:
<h1>{Title}</h1><br> Some witty caption goes here
Press Update Preview and voila! You’re theme is almost good to go!
By the way, if you want to put an image in your header instead of text, you can use the
<img src="image_URL_here">
Just replace the image_URL_here part with your image’s URL. Be sure it has the same dimension as your header so it wouldn’t look off. You can of course change you header’s size to suit your liking.
The other stuff
So before I end this Tutorial, just add this bits of codes just after the <head> tag.
The first line is your Page’s title. This would be the name that would appear in the Title bar of your browser. If you want a fancier Title bar, check this tutorial out.
The second line is the image that appears next to the title in your Title bar. It’s also the some kind of icon for your blog. An icon version of your default pic would be your icon.
The third line is a declaration for your RSS feeds and the last line is the Metadescription. This is what show would up in search engines like Google once it turns up as a result.
That’s it! If you haven’t been saving your progress the whole tutorial, do so now!
If you have been following everything in this tutorial, your theme should look something like this:
Here’s the source code for the theme, too, so you can check and compare if you had problems. DOWNLOAD THE SOURCE CODE.
Here are also some more Tumblr theme tutorials from other people in the web:
14thave’s Tutorial- this tutorial was adapted from her tutorial btw. She has an in-depth explanation on the post types so you may want to check her tutorial out.
1stwebdesigner- this blog explains most of the codes used in making a Tumblr Theme. If you’re really serious about understanding all the codes used in a Tumblr theme, you can start here.
So there it is! if you have questions about the tutorial, you can send me a message at my askbox. Please refrain from copying this tutorial.
/ask
Questions! Questions!
Before asking a question, make sure to check the FAQs page or the Answers page first incase it's already answered there. If it isn't then ask away!
All questions/TAs, anon or not, will be published on the Answers page so check it if it's already there. The post will be tagged under your URL , too, so tracking your URLs would be a nice way to notify you.
Also note that I may not be able to answer questions ASAP since unfortunately, I also have this evil stuff called "Real life" and it requires me to do things like "Working" and "Socializing". Rest assured though, that I will be answering all questions whenever I go online and if there's any.
DONATE! On a related note, You could also increase the chance of getting answered immediately by Donating! You see, if you donate, that would mean more moolah. If there's moolah around, I don't have to work that much. And if I don't have to work that much, that would mean more time in answering your queries! I mean, that's the only thing that's keeping me away from here anyway. So yeah, a buck wouldn't hurt, right?
