The Tutorial 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">
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

    <!---base code by OFCUTEBOYS

This is my NOVICE BASE CODE

it is for use by beginner theme makers hoping to learn to write code. For this reason, there are extensive comments in the CSS and
some comments in the HTML as well, to indicate what each thing does.

Anyone can use this to learn to code, ALMOST no prior knowledge of theme making is necessary. Basic HTML understanding would help you a lot, though! I won't explain every little thing, and this is not me offering to teach everyone to code. However, I am happy to help with any questions that you may have!

I hope this can make coding a bit less daunting for those of you who have always wanted to try. That was me a few months ago. It can be really overwhelming at first, but if you put the work in, you will really enjoy it.

This base code walks you through the styling and coding of a basic tumblr theme and encourages you to change variables and make it your own.

Please remember that this is a base code, and so you MAY remove the credit.

HOWEVER: you may only remove the credit in the event that you make significant edits to this code and personalize it. If you do not change it, you may not release it as your own theme.

YOU ALSO MAY NOT, UNDER ANY CIRCUMSTANCES, RELEASE THIS AS YOUR OWN BASE CODE.

enjoy learning to code! my ask is open if you get stuck.

FOR THOSE OF YOU WHO ARE MORE EXPERIENCED CODERS: I will be releasing my expert base code soon, but until then, here are a few people who have base codes:
	-alexgaeskarth
	-hoenarry
	-tinyvagina
	-hogwat
--->


<!---META NAMES: DEFINING THE VARIABLES THAT SHOW UP IN THE STYLE SCREEN--->

    <meta name="color:background" content="#ffffff"/>
    <meta name="color:text" content="#000000"/>
    <meta name="color:link" content="#888888"/>
    <meta name="color:hover" content="#ffffff"/>
    <meta name="color:accent" content="#ffffff"/>



    <!---if you want to add a second sidebar image, copy the meta name below and change image:sidebar to image:sidebar2--->

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

    <meta name="text:link1" content="link1"/>
    <meta name="text:link1url" content="link 1 url"/>

    <meta name="text:link2" content="link2"/>
    <meta name="text:link2url" content="link 2 url"/>

    <meta name="text:link3" content="link3"/>
    <meta name="text:link3url" content="link 3 url"/>

    <meta name="text:link4" content="link4"/>
    <meta name="text:link4url" content="link 4 url"/>

     <meta name="text:link5" content="link5"/>
    <meta name="text:link5url" content="link 5 url"/>



    <!---if you're adding any javascripts, they go here--->

    <!---If you want to add more links, copy/paste one of the meta names above and change the numbers--->
    <style type="text/css">

/*---THIS IS WHERE YOUR CSS OR STYLE SHEET BEGINS---*/



/*----STYLING OF THE OVERALL PAGE---*/
body {
    background-color:{color:background};
    font-family:arial;
    font-size:12px;
    color:{color:text};
}



	/*---change the style of the links---*/
a {
    color:{color:link}; /*---text color---*/
    text-decoration:none; /*---text decoration e.g. underline, line-through---*/

    /*---This is what makes it change colors or any other variable over a duration of time---*/
    -webkit-transition-duration:.3s; /*---this line makes the transition work for Chrome---*/
    -moz-transition-duration:.3s; /*---this line makes it work for Mozilla---*/
    -o-transition-duration:.3s; /*---this line makes it work for opera---*/
}


/*---change what happens to the links when you hover over them--*/
a:hover {
    color:{color:hover};
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
}


/*---change the style of header text, including Post Titles---*/

h1 {
    font-size:2em; /*---makes it 2x the size of all other text---*/
    font-weight:bold;
    letter-spacing:-2px; /*---makes the letters closer together---*/
    color:{color:accent};
}



/*---the following variables make it so that the color of bold, italic, emphasized,big, and strong text is the "accent" color.
you may take this out without doing damage to the theme---*/
b {
    color:{color:accent};
}

i {
    color:{color:accent};
}

em {
    color:{color:accent};
}

big {
    color:{color:accent};
    font-size:2em;
}

strong {
    color:{color:accent};
}



/*---styles blockquotes (which you put in using the <blockquote></blockquote> tags---*/

blockquote {
    padding-left:5px;
    border-left:2px solid {color:accent};;
}

blockquote blockquote {
    padding-left:10px;
    border-left:2px solid {color:accent};
}


/*---The following style sheet refers to the title on the side of the blog. You may remove it if you wish---*/


#fresh {

    font-family:arial; /*---change the font---*/
    font-size:28px; /*---change the font size---*/
    color:black; /*--- change the font color ---*/
    letter-spacing:-3px; /*---change how close the letters are to each other (lower number=less space between letters)---*/
    text-transform:lowercase; /*---makes all text lowercase. can be changed to uppercase or none---*/
    font-weight:bold;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
}

#fresh a {
    color:black;/*--- this is so that when your title is a link to your home page, it still is black text---*/
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
}

#fresh a:hover {
    color:{color:accent};  /*---this makes it so that when you hover over the title, the text turns the color of the accent color---*/
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
}

/*---You need the transitions under #fresh, #fresh a, and #fresh a:hover so that it glides when you hover and then
glides back into place---*/


/*---SIDEBAR---*/
#sidebar {
    width:300px;/*---change the width of the sidebar---*/
    height:200px;/*---change the height of the sidebar---*/
    margin-left:200px;/*---move it left or right (lowering the number moves it left)---*/
    margin-top:120px; /*---move it up or down (lowering the number moves it up---*/
    position:fixed; /*---this is so that it stays in place when you scroll down---*/
}

#sidebarimage  /*---this is the block where the sidebar image goes---*/ {
    width:150px;


}

#sidebarimage img {
/*---this is the styling of the actual image---*/
    width:150px; /*---change the width: lower number makes it smaller---*/
    border:4px black solid; /*---change or remove the border around the sidebar image. The border can have any weight (change 4px
    to another number, higher=thicker), can be any color (change black), and can be different textures (change solid to dashed,
    double, or dotted)---*/
}

#desc {
/*---this is the styling of the description---*/
    width:155px; /*---change the width of the description---*/
    margin-top:15px; /*---defines the distance between the description and the links---*/
    color:black; /*---change the text color---*/
    text-align:justify; /*---change the text alignment---*/
    font-family:arial; /*---change the font---*/
    font-size:10px; /*---change the font size---*/
    font-weight:bold; /*---can be bold or normal---*/
}


#links {
    width:150px;
    word-spacing:2px; /*---change to separate words more or less: higher number=more separation---*/
    display:inline-block; /*---makes it so they are each their own button. if you add a border, for example, each word will have
    a border around it---*/
    font-family:arial;
    text-align:center; /*---change the text alignment---*/
    font-size:13px;
    padding:2px; /*---padding makes it so that the text is not smushed against the edges of the div. add more padding to put more
    space between text and the edge of the div---*/
    font-weight:bold;
    margin-top:10px; /*---change the distance between the links and the sidebar image---*/
    color:black;
    letter-spacing:-1px;/*--- change the space between the letters ---*/
    text-transform:lowercase; /*---makes all text lowercase. can also be "uppercase" or "none"---*/
}


#links a {
    color:{color:links}; /*---assigns the meta name color of links to the links in the sidebar---*/
}


#links a:hover {
    background-color:{color:accent}; /*---the space behind the word turns the color of the accent when hovered over---*/
    -webkit-transition-duration:.5s;
    -moz-transition-duration::.5s;
    -o-transition-duration:.5s;
    /*---change .5s to any number of seconds. Higher number=longer transition---*/
}

      #postcontainer {

      /*---defines the area where the posts will go. use this to move posts up/down and left/right---*/
          margin-left:450px;
          margin-top:50px;
          width:550px;
      }

      #post {

      /*---this is the styling of each individual post---*/
          text-align:left;
          width:500px;
          padding:5px;
      }

     .asker {
     /*---this is the styling of the NAME of the person who sent the message in ANSWER posts---*/
       background-color:{color:hover};
       border-bottom:4px solid {color:accent};
       width:100%;
       text-align:left;
       padding:5px;
        font-family:arial;
    font-size:16px;
    color:black;
    letter-spacing:-1px;
    text-transform:lowercase;
    font-weight:bold;
     }


     .asker a {
         border:none;
     }
     .question {
         background-color:{color:link};
         border-bottom:6px double {color:hover};
         color:white;
         width:100%; /*---sets the width of the question to 100% of the post width---*/
         padding:5px;
         font-family:arial;
         text-align:center;
         font-size:14px;
         min-height:20px;/*---makes it so that the question box is at least 20px large. it can be more if necessary, the
         computer will do that automatically---*/
         font-style:italic;

     }

     .reply {
     /*---styling for your response to the question---*/
       border-bottom:4px solid black;
       padding:5px;
       font-size:12px;
       font-weight:bold;
     }



/*---styling for the post information e.g. tags, date posted, notes---*/
#info {
    margin-top:10px; /*---distance from bottom of post---*/
    font-size:9px;
    color:white; /*---color of text---*/
    background-color:black; /*---color of the whole block---*/
    padding-top:7px;
    padding-bottom:7px;
    text-align:center;
    width:100%;
}

#info a {
    color:white;
    font-weight:bold;
    font-size:10px;
}


/*---makes it so that when you highlight text, the highlight is the color of your accent. anything that you put under ::selection
will occur when text/images are selected---*/
::selection {
    background-color:{color:accent};
}




/*--STYLE YOUR CREDIT HERE--*/
#cred {
    bottom:3px; /*---distance from the bottom of the page (higher number=higher up on the page---*/
    position:fixed; /*---doesn't move when you scroll---*/
    right:10px; /*---distance from the right of the page. Higher number=further left---*/
    float:right; /*---makes it so that no matter the size of the screen, the credit will always be in the right corner---*/
    font-family:arial;
    font-weight:bold;
    color:black;
    font-size:20px;
    letter-spacing:-2px;
    text-transform:lowercase;
}

#cred a {
    color:black;
}

#cred a:hover {
    color:{color:accent};
}

/*---IF YOU WANT HOVER INFO, THIS IS THE CSS YOU USE INSTEAD OF THE #info ABOVE---

#info {
font-size:9px;
text-align:center;
opacity:0;
width:100%;

#post:hover #info {
opacity:1;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-moz-transition-duration:1s;
}


 in order to use this code, first delete #info from above, then remove these comments---*/


/*---styling the pagination---*/
#pagi {
    margin-top:20px; /*---change its distance from the description---*/
}

.jump_page {
/*---style the box that allows you to jump pages---*/
padding: 4px 8px; /*---don't mess with this please---*/
border: 2px solid #888; /*---change the size/color/type of the border around the box---*/
background-color: #fff; /*---change the background color of each box---*/
color:#555; /*---change the text color---*/
font-family:century gothic; /*---change the font---*/
font-size:11px;
text-decoration:none; /*---could be underline or line-through, for example---*/
}

.current_page, .jump_page:hover {

/*---this is the styling of the box for the page that you're currently visiting---*/
padding: 4px 8px;
border: 2px solid #aaa; /*---change the border size/color/type---*/
background-color: #ddd; /*---change the background color---*/
color: #fff;/*---change the text color---*/
font-family:century gothic; /*---change the font---*/
font-size:11px;
text-decoration:none;
}

/*---styling for photosets---*/
.photoset {
    border:5px #ccc double;/*---puts a border around a photoset. can be removed without damaging the theme---*/
     -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
}


/*---SOMETHING NOT WORKING?

I'm more than happy to help you, but make sure to read these tips first:

-make sure you didn't forget a ; at the end of a section of css
-make sure that the css goes variable:defined-thing; and not variable;defined-thing:
-if you're using scripts, make sure that the "" marks are green and not white. the white ones do not work
-if your transitions are slow on hover and then snap back into place, add a transition on the original element
-if the posts are suddenly not in their container, you closed a div that you shouldn't have. Just delete one </div> until it works

if none of those things help you or you have a different question, you are free to ask me. I am always here to help!

---*/





    </style>

</head>
<body>

<!---THIS IS WHERE YOU CODE THE ACTUAL CONTENT OF YOUR THEME--->


    <!---everything inside of div id="sidebar" is in your sidebar--->

<div id="sidebar">
    <div id="fresh"><a href="/">{Title}.</a></div>    <!---the title--->

    <div id="sidebarimage">    <!---the sidebar image container--->

        <img src="{image:sidebar}">     <!---the sidebar image--->

    </div>    <!---closes the sidebar image container--->

    <div id="links">    <!---the text below are your side links--->
        <a href="{text:link1url}">{text:link1}</a>
        <a href="{text:link2url}">{text:link2}</a>
        <a href="{text:link3url}">{text:link3}</a>
        <a href="{text:link4url}">{text:link4}</a>
        <a href="{text:link5url}">{text:link5}</a>


    </div><!---closes the links--->
    <div id="desc">{Description}</div><!---the description (open, description, close)--->



<!---PAGINATION--->

<div id="pagi">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
{/block:Pagination}
</div><!---closes div id="pagi"---></div><!---closes the sidebar--->

<!---THIS IS WHERE THE POSTS GO--->


<div id="postcontainer">
<!---the posts go in here--->
{block:Posts}
<div id="post">
<!---TEXT POSTS--->
{block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}

<!---PHOTO POSTS--->

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

<!---PHOTOSETS--->

{block:Photoset}
<div class="photoset">{Photoset-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

<!---VIDEO POSTS--->

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

<!---AUDIO POSTS--->

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

<!---QUOTE POSTS--->

{block:Quote}{Quote}{block:Source}-{Source}{/block:Source}{/block:Quote}

<!---LINK POSTS--->

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

<!---ANSWER POSTS--->

{block:Answer}
<div class="asker">
{Asker} whispered . . .</div><div class="question">{Question}</div>
<div class="reply">
{Answer}</div>
{/block:Answer}

<!---CHAT POSTS--->

{block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}{Label}{/block:Label}{Line}{/block:Lines}{/block:Chat}

<div id="info">
<!---POST INFO--->
posted <a href="{Permalink}">{DayOfWeek} {MonthNumber}/{DayOfMonth}/{Year}</a> at {Time}
with <a href="{Permalink}">{NoteCountWithLabel}</a>
{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a> & {/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}"> source <a href="{SourceURL}"></a>{/block:ContentSource}{/block:RebloggedFrom}
<br>
{block:HasTags}filed: <i>{block:Tags}<a href="{TagURL}">{Tag}, </a>{/block:Tags}{/block:HasTags}</i>
</div></div>
{/block:Posts}</div>


<!---theme maker credit, feel free to change it to your own if you've made significant edits!--->
    <div id="cred"><a href="http://ofcuteboys.tumblr.com/"><!---the link address of the credit (aka where you want the link to go)--->
    ofcuteboys<!---the text of the credit that shows up on your blog--->
    </a></div>


</body>
<!---if you wanted to add a pop up ask box, you would want to put that in here--->
</html>