Step 4: Create CSS file

We have written a lot of HTML stuff, right.  Our website must be great.  Take a look:

vernon@slick:~/project/zing/template$ firefox base.html

Vernon, that isn't cool:

Zing Blog

{% block under_title %}The blog{% endblock %}

{% block content %} Here be blog stuff {% endblock %}

Copyright your_name © 2010

Okay, and CSS isn't going to save us yet either, bear with me.  We just want to add some simple css for the time being.  When we upload the site we are going to change things, but for now just add the CSS to the file itself. 

Open the base.html file in your text editor again "emacs base.html"

Just ignore this line:
<link rel="stylesheet" type="text/css" href="/media/css/style.css">
for now.  We'll get back to it. 

Add the bit in red to your site. 

<doctype html>

<html>

<meta charset="UTF-8">

<title>{% block title %}Zing Blog{% endblock %}</title>

<link rel="alternate" type="application/rss+xml" title="rss for zing" href="#### We'll come back to this ####"≷
<link rel="stylesheet" type="text/css" href="/media/css/style.css">
<link rel="icon" type="image/gif" href="/media/zing.ico">
<meta name="description" content="My wonderful blog">
<meta name="robots" content="all">

<style type="text/css">

/* Page */
body{padding:0;margin:0;font-family:Arial, Helvetica, Tahoma, sans-serif;}
/* Title section */
#title{float:left;width:100%;padding:0;margin:0;border:0;border-bottom:1px solid #cccccc;}
#title h1{padding:10px 0 0 50px;font-size:60pt;margin:0;font-family:"Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;}
#title h2{margin:0;padding:0;text-align:center;}
/* Content section */
#content{float:left;border:0;margin:0;padding:10px 2% 0 2%;width:75%;}
/* Sidebar section */
#sidebar{float:left;border:0;border-left:1px solid #cccccc;padding;10px 2% 0 2%;width:20%;margin:0;}
/* Footer section */
#footer{float:left;border:0;border-top:1px solid #cccccc;padding:0;margin:0;width:100%;text-align:center;}

</style>
</head>
<body>


<!-- Start title -->
<div id="title">

<h1>Zing Blog</h1>
<h2>{% block under_title %}The blog{% endblock %}</h2>

<!-- End title -->
</div>


<!-- Start content -->
<div id="content">

{% block content %} Here be blog stuff {% endblock %}
<!-- End content -->
</div>


<!-- Start sidebar -->
<div id="sidebar">


<!-- End sidebar -->
</div>


<!-- Start footer -->
<div id="footer">
<p>Copyright your_name &copy; 2010</p>
<!-- End footer -->
</div>

</body>
</html>

Okay, that's not very fancy, but I'll leave the rest of that up to you.  For the tutorial, just leave it like that before you spend hours trying to get your site looking just right; Lets get back to Django…


Share |
« Previous Page  |  Return To Contents Page  |  Next Page »

 

Thank you for visiting

This is my personal blog, but I try to write things that you may find interesting or useful.  I'm currently working on a six month long project digging into the elements that make a blog meaningful. For more on that, visit MEANINGFUL BLOG PROJECT page. 

You may want to know a little about me personally, so start at the about page. 

If you find some of what is here interesting, or you want to follow the project through, why not subscribe.

Tweet