Tutorial: Part04

<!DOCTYPE html>
<html>
<head>

<!--Notes are written like this. So long as they are enclosed in tags like these, your browser will not read them.-->

<!--Customisation Options (part 2)-->

<meta name="color:Background" content="#cccccc" />
<meta name="color:Primary Colour" content="#03999b" />
<meta name="color:Secondary Colour" content="#4cc3c5" />

<meta name="font:Body" content="Georgia" />

<meta name="image:Background" content="http://i41.tinypic.com/wvztsk.png" />
<meta name="image:Sidebar" content="" />

<!--Things that go in the tab (part 1)-->

<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<!--Custom font (part 4)-->

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>


<style type="text/css">

/*Notes in CSS look like this. If you use <!--these--> it will not work*/

/*The Background (part 3)*/

body {
	background-color: {color:Background};
	font-family: {font:Body};
	background-image: url({image:Background});
	margin: 0;
	word-wrap: break-word;
}

/*The Sidebar (part 4)*/

#sidebar {
	background-color: white;
	width: 260px;
	position: fixed;
	top: 150px;
	left: 100px;
}

/*The Sidebar: Title*/

#sidebar .title {
	font-family: 'Great Vibes', cursive;
	font-size: 30px;
	text-align: center;
	padding: 10px;
}

#sidebar .title a {
	color: {color:Primary Colour};
	text-decoration: none;
}

#sidebar .title a:hover {
	color: {color:Secondary Colour};
}

/*The Sidebar: Image*/

#sidebar .image {
	width: 260px;
	height: auto;
}

/*The Sidebar: Description*/

#sidebar .description {
	color: black;
	font-size: 11px;
	text-align: justify;
	padding:10px;
	line-height:100%;
}

#sidebar .description a {
	color: {color:Primary Colour};
	text-decoration: none;
}

#sidebar .description a:hover {
	color: {color:Secondary Colour};
}

/*The Sidebar: Links*/

#sidebar .links {
	background-color: {color:Primary Colour};
    	color: white;
	font-size: 11px;
	text-align: center;
	padding: 3px 5px;
    	margin: 2px;
   	float: left;
	width: 116px;
}

#sidebar .links a {
	text-decoration:none;
}

#sidebar .links:hover {
	background-color: {color:Secondary Colour};
}

</style>

</head>
<body>

<!--The Sidebar (part 4)-->

<div id="sidebar">
<div class="title"><a href="/">{Title}</a></div>
<img class="image" src="{image:Sidebar}" />
<div class="description">{Description}</div>

{block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}

</div> <!--sidebar-->
<!--I like to label my closing divs like I did above to make the code easier to read. It is not compulsary-->


</body>
</html>