HOWTO: Make Your Own Stylish Dark Blog Layout
on Sat Jul 05 08:32:50 GMT 2008 in XHTML and CSS and viewed 21650 times
Blogs have, in the past few years, become a standard of internet marketing, reputation building, or a place to get thoughts out. Whatever your goal of having a blog, (or weblog or online journal) is, one thing it needs is a stylish layout. That’s exactly what this tutorial serves to teach: how to create a stylish blog layout. This tutorial doesn’t serve to teach new concepts, just to show how to go about creating a very simplistic, very nice looking blog layout and some new tricks to put in your XHMTL/CSS grab bag.
Blog Concepts
Before jumping into coding a layout, you should think what it is you need to have from the layout. Most blogs have a system to categorize your posts, an archive to view past posts, and a search feature, so all these features you are most likely going to need in your layout. Of course it’s also going to be a table-less design just because your blog will be that good, and also a footer. And just for fun, why don’t you keep the whole template under 10 KB to load nice and fast for your visitors?
Step One: Starting Out With the HTML Outline
One nice feature of a blog is that all visitors should be able to read it, whether they have Firefox, Internet Explorer, Opera, or even a browser that displays pages without any style (like spiders). So before you go styling your blog, start off by coding all of the HTML so you know what goes where, and what will be viewed first by any kind of bot.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-us">
<head>
<title>A Cool Blog Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
</style>
</head>
<body>
<!--head-->
<div id="head">
<h1>Your Blog Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Something</a></li>
</ul>
</div>
<!--/head-->
<div id="body">
<!--content-->
<div id="content">
<!--post-->
<div class="post">
<h2><a href="#">Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut orci ut nibh facilisis aliquam. Quisque eget elit. Vivamus ut est. Vestibulum ut arcu. Integer dictum sem quis lorem. Nullam mauris justo, viverra et, hendrerit dictum, lobortis vitae, nunc. Duis id tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam odio. In gravida mi non orci. Vestibulum vitae ipsum. Integer vestibulum, sem sit amet sagittis rhoncus, odio est tincidunt ante, in ultrices ligula sapien vel ipsum.</p>
<a href="#">More...</a>
</div>
<!--/post-->
<!--post-->
<div class="post">
<h2><a href="#">Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut orci ut nibh facilisis aliquam. Quisque eget elit. Vivamus ut est. Vestibulum ut arcu. Integer dictum sem quis lorem. Nullam mauris justo, viverra et, hendrerit dictum, lobortis vitae, nunc. Duis id tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam odio. In gravida mi non orci. Vestibulum vitae ipsum. Integer vestibulum, sem sit amet sagittis rhoncus, odio est tincidunt ante, in ultrices ligula sapien vel ipsum.</p>
<a href="#">More...</a>
</div>
<!--/post-->
</div>
<!--/content-->
<!--right-->
<div id="right">
<h3>Categories</h3>
<ul>
<li><a href="#">My Life</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">My Website</a></li>
</ul>
<h3>About Me</h3>
<p>I'm just so cool because of this layout.</p>
</div>
<!--/right-->
</div>
<!--/body-->
<!--footer-->
<div id="footer">
Footer body
</div>
<!--/footer-->
</body>
</html>
When you finish with this, you should have a page looking somewhat like this: Step 1 Of Blog Layout
Basically what you have here is the makings of your blog. It starts off with a <div> with an id of head (which you’ll use later to start the styling). Inside is a header that announces to the world a funny little catch phrase that’s also keyword stuffed. It’s all good though, your blog will still be interesting. Next comes the search form, and after that a few links in an unordered list ( <ul> ) and that finishes off your header.
Just beneath that is a div element identified by “body”. Inside you have another div (this time content for future floating), two posts (with the classic “Lorem Ipsum” text) contained in <div>s with a class of post (classes can be reused, unlike ids), and another div (this time just “right”) with a few more links in it for your categories and a little blurb about you.
After all this pizzazz is your footer. It’s pretty basic. Just one <div>. Nothing special.
So at the end of step one, your blog is just 2.3KB!. Not bad, not bad… But now let’s add some structure with CSS.
Step Two: Adding The Structure Of Your Page With CSS
Now this step won’t actually add anything in the way of aesthetics or style, but your page will look much better as you will see the outlieing structure before you start adding all the frills of the style.
So take a look at the simple CSS you’re starting with:
* { margin:0; padding:0; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
line-height:160%;
font-size:14px; }
h1 { margin-bottom:10px; }
h2 { }
h3 { padding:.2em;
margin-top:5px; }
input { padding:.1em; }
li { list-style:none; }
#head { padding:1em; }
#navigation { margin-top:5px; }
#navigation li { display:inline; }
#navigation li a { padding:.3em; }
#body { padding:1em; }
#content { float:left;
width:70%;
padding:.3em; }
#right { margin-left:73%;
padding:.3em; }
#right ul { margin-left:3%; }
#footer { padding:1em; }
And there’s also one HTML addition to make. Just before the end </div> of the body <div>, add:
<br style="clear:both;" />
This clears the floating content div and right div.
Now the result of your efforts: Step 2 of your blog layout
Not bad looking is it? And only 2.KB!
The CSS is of course very basic to keep the layout simplistic.
Starting out with the first line: ”* { margin:0; padding:0; }”. The * selector tells the browser to apply this style to all elements. Next is the BODY styles. The font is a nice looking Trebuchet, the line-height is 160%, giving your blog a very nice open feel, and the font size is a nice 14px for a good readability. Next are the three styles for the three header elements you use: h1, h2, and h3. The h1 header is given a space to the bottom of 10 pixels just to make sure that it’s not sitting directly on top of the links. The h2 style is there just for code prettiness. The h3 header is given a padding as to slightly separate it from the main flow of the text, and a margin to separate it again from the links or text above it. The inputs are given a slight padding, and there’s also the <li> selector, which just makes all the lists display without the annoying block beside it.
The next styles start the actual page and the structure of it. The first rule is for the head <div>. This is just a simple padding. Looks a lot better for a future color and to separate it from the window. Next up is the styling for the navigation. The navigation style just gives it a margin at the top for some more space. Then each <li> is displayed in a line, and each link inside is given a little padding to separate them from each other.
Then it gets into the body and content. The body is given a padding of 1em, again, to get the content away from the wall of the window. The content is floated left and given a width of 70%, as well as a small padding. The right style has just a padding, and margin to the left of 73% to give a bit of extra space. (And it’s these two divs that the
clears).
And the last style is for the footer, which has just a padding.
Step Three: Coloring and Finishing Touches
Ah, the fated step three, when everything comes together. And it’s all style.
* { margin:0; padding:0; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
line-height:160%;
font-size:14px;
color:#FFF;
background-color:#000; }
h1 { margin-bottom:10px; }
h2 { }
h3 { background-color:#CFDCE6;
color:#000;
padding:.2em;
margin-top:5px;
border:2px solid #647D8F; }
input { background-color:#CFDCE6;
border:2px solid #647D8F;
padding:.1em; }
li { list-style:none; }
a { color:#CFDCE6;
text-decoration:none; }
a:hover { color:#CFE6DC;
text-decoration:underline; }
a img { border:0; }
#head { padding:1em; }
#navigation { margin-top:5px; }
#navigation li { display:inline; }
#navigation li a { border-bottom:1px #6096BF solid;
padding:.3em;
color:#CFDCE6; }
#navigation li a:hover { border-bottom:1px #BF9060 solid;
color:#CCAE8F; }
#body { padding:1em;
background-color:#596F80;
color:#FFF;
border-top:10px solid #647D8F;
border-bottom:10px solid #647D8F; }
#content { float:left;
width:70%;
padding:.3em; }
#right ul { margin-left:3%; }
#right { margin-left:73%;
padding:.3em; }
#footer { padding:1em; }
The wildcard selector is exactly the same. It starts to differ from the previous iteration with the BODY. For one thing, the background is now black, with the color of the font being white. Then it gets to the h3 headers. The background color becomes a nice light blue with a darker blue border and a black font color. The h3 headers are the headers for the “About Me” or the “Categories” inside the body <div>. Next is the input styling. The background color and border is just given a bit of styling as to improve upon the annoying white on black form.
Them there’s the link styling. It’s just like most link stylings. There’s a color now and the underline is taken off, but when you hover over a link, the color is changed and the underline is put back. Also the border for any image inside a link is taken off. That border is always annoying.
Then it’s time to get into the meat of the style. The head div stays the same. The navigation is the same until the links. They’re given a color and a border underneath them for some cooler style, but other than that, there’s not much else new.
The body has a bit more style than the others. It’s given a nice dark blue background color and a white font along with a lighter blue border on the top and bottom for aesthetic purposes. And that’s the whole style. Why don’t you see what your result is?
Now of course when you add actual posts it’ll become a bit bigger, but for now it’s not bad at all.
Ideas to Extend It
- Add a Live Search
- Green Color Scheme
- A Backend
doesn’t work well on IE7
by stelios