who puts jimmies on their ice cream?!

Designer's Comments

Look carefully for specific instructions

I received so much positive feedback (and a small pointer on what users may like) so here's another minimalist template, this time two column.

Remember to separate the CSS from the template!
Please read the comments within the template preview if you're interested in using this! Danke schön!

If you have any sort of professionalism you'll leave the teeny little credit link.

Layout Code

Copy and paste to Template HTML

Help

<!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>who puts jimmies on ice cream?!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

*	{
	margin: 0;
	padding: 0;
	cursor: default;
	text-decoration: none;
	}

body	{
	background-color: #90918c;
	}

h1, h1 a:link, h1 a:visited {
	font-family: "Times New Roman";
	font-size: 20px;
	color: #222a32;
	text-indent: 20px;
	letter-spacing: 3px;
	}

h1 a:hover, h1 a:active {
		color: #270f0f;
		}

h2	{
	font-family: Georgia;
	font-size: 9px;
	text-transform: lowercase;
	font-weight: normal;
	text-indent: 35px;
	color: #90918c;
	letter-spacing: 1px;
	}

h2 a:link, h2 a:visited {
		color: #90918c;
		border-bottom: 1px dotted #90918c;
		}

h2 a:hover, h2 a:active {
		border-bottom: 1px solid #90918c;
		}

b, i	{
	font-family: Georgia;
	color: #00a4c8;
	}

u	{
	border-bottom: 1px dotted #00a4c8;
	font-family: Georgia;
	}

big	{
	font-family: Georgia;
	color: #00a4c8;
	line-height: 100%;
	}

small, sup, sub {
	font-family: "Times New Roman";
	color: #90918c;
	}

#wrap	{
	width: 750px;
	height: auto;
	margin: 0 auto;
	}
/*
	border-width: 0 5px 0 5px;
	border-style: solid;
	border-color: #f6e32d;
*/

#header {
	width: 550px;
	height: 375px;
	background: transparent url('http://cbimg6.com/layouts/09/03/34252aa.png') top left no-repeat;
	}

.nav	{
	float: left;
	width: 490px;
	margin: 65px 0 0 25px;
	text-align: right;
	text-align: center;
	text-transform: uppercase;
	}

.nav a:link, .nav a:visited {
		margin: 0 0 0 10px;
		padding: 5px 10px 5px 10px;
		font-family: Georgia;
		font-size: 9px;
		color: #131a20;
		letter-spacing: 2px;
		background: transparent url('http://cbimg6.com/layouts/09/03/34252ab.png') center repeat;
		}

.nav a:hover, .nav a:active {
		color: #2b2d39;
		background: transparent url('http://cbimg6.com/layouts/09/03/34252ac.png') center repeat;
		}

.name	{
	float: left;
	width: 475px;
	overflow: hidden;
	margin: 75px auto 0 25px;
	padding: 5px 5px 5px 20px;
	text-align: center;
	font-family: Georgia;
	font-weight: normal;
	font-size: 20px;
	color: #2b2d39;
	display: block;
	text-transform: uppercase;
	line-height: 8px;
	letter-spacing: 7px;
	}

#main	{
	float: left;
	width: 470px;
	height: auto;
	padding: 20px 40px 20px 40px;
	font-family: "Times New Roman";
	font-size: 11px;
	color: #554d45;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 180%;
	background-color: #c5b0ad;

}

#main p	{
			margin: 0 0 10px 0;
			}

#main p a:link, #main p a:visited {
				color: #222a32;
				padding: 2px;
				text-decoration: none;
				font-family: "Times New Roman";
				font-weight: bold;
				border-bottom: 2px solid #bee3a5;
				}

#main p a:hover, #main p a:active {
				background-color: #bee3a5;
				border-bottom: 2px solid #222a32;
				}

#main p.cmnt {
				font-weight: bold;
				text-align: right;
				letter-spacing: 1px;
				}

#main li {
		margin: 0 0 0 10px;
		}

#main ul {
		margin: 0 0 0 10px;
		}

#main ul.rules {
		margin: 0;
		list-style: none;
		}

#main ul.rules li {
		margin: 0 0 10px 0;
		}

#side	{
	float: left;
	width: 200px;
	height: 100px;
	margin: -200px 0 0 0;
	font-family: "Times New Roman";
	font-size: 11px;
	color: #554d45;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 180%;
	}

#side .sec {
		width: 190px;
		margin: 5px 0 25px 10px;
		}

#side h3 {
		display: block;
		text-transform: lowercase;
		color: #222a32;
		font-weight: normal;
		font-family: georgia;
		font-size: 10px;
		background: transparent url('http://cbimg6.com/layouts/09/03/34252ad.png') top left repeat-y;
		padding: 0 0 0 20px;
		line-height: 200%;
		letter-spacing: 3px;
		}

#footer {
	width: 470px;
	height: auto;
	padding: 0 40px 20px 40px;
	font-family: Georgia;
	font-size: 10px;
	color: #90918c;
	text-align: center;
	letter-spacing: 1px;
	background-color: #c5b0ad;
	}

#footer a:link, #footer a:visited {
	font-family: "Times New Roman";
		font-size: 10px;
		color: #90918c;
		border-bottom: 1px dotted #90918c;
		}

#footer a:hover, #footer a:active {
		color: #90918c;
		border-bottom: 1px solid #90918c;
		}

hr, hr.break {
	height: 1px;
	width: 80%;
	margin: 15px auto 15px auto;
	color: #90918c;
	background-color: #90918c;
	border: none;
	}

blockquote {
	width: 90%;
	background: transparent url('http://cbimg6.com/layouts/09/03/34252ae.png') center repeat;
	margin: 5px auto 5px auto;
	}

span.bqh {
		display: block;
		text-transform: lowercase;
		font-family: georgia;
		font-size: 9px;
		background: transparent url('http://cbimg6.com/layouts/09/03/34252af.png') center repeat;
		padding: 0 0 0 25px;
		letter-spacing: 3px;
		}

blockquote p {
		text-align: justify;
		padding: 5px 10px 5px 10px;
		}

</style>

</head>

<div id="header">
		<div class="nav">
			<a href="#">home</a><a href="#">about</a><a href="#">contact</a><a href="#">archives</a><a href="#">feed</a><a href="#">etc</a>
		</div>
	</div>

<div id="main">
		<h1><a href="#">css examples</a></h1>
			<h2>optional sub heading, blog stats maybe?</h2>
		<p><b>bold</b> <i>italic</i> <u>underline</u> <big>big</big> <a href="#">link</a> <small>small</small> <sup>sup</sup> <sub>sub</sub></p>

<blockquote>
			<span class="bqh">blockquote heading</span>
			<p>Oh like the salt of the earth  //  each correction makes us stronger  //  absconder in happiness, yeah  //  voyage up my river  //  full of tears it's yerking  //  lookout now, doctor's unleashing...</p>
		</blockquote>

<h2>posted on <a href="#">{date}</a> by <a href="#">{user}</a> under <a href="#">{cat1}</a>, <a href="#">{cat2}</a></h2>
		<p>It's the 31st of March, two thousand and nine and I'd just like to thank you for taking an interest in this template.  I was given a tip to maybe put in a highly customisable column, and hey - the customer is always right, hm?  However, if you could be so kind as to leave my link in the footer I'd be especially glad to help you if you ever run into trouble.  If not, then I'm afraid I'm going to have to start watermarking things!</p>
		<p>This template can easily be moved to fit FanUpdate!  If you'd like this template as a website popup or a MySpace 1.0 type and don't know how to do it, just say the word and I'll convert it.  If you'd like to move it elsewhere (Blogger, Xanga, etc) the most I ask of you is that you e-mail or PM me telling me you're going to.  If I see this on CB in another format and you didn't ask my permission first, I'll make sure you get banned.  :)</p>

<p class="cmnt"><a href="#"># comment(s)</a></p>
		<hr class="break" />

<h1>Terms of Use</h1>
			<h2>violate and I shank you.</h2>

<ul>
			<li>Redistribute and die.</li>

<li>Leave the credit link.</li>
			<li>Do not alter the stylesheet.</li>
			<li>That is all.</li>
		</ul>
	</div>
	<div id="side">
		<h3>important!</h3>

<div class="sec">
				<p>If you want a new sidebar section, remember to copy ALL of an already existing one, you need the .sec class for it to work properly!  If you don't, it doesn't add padding properly and there's no space between the end of one and the header of another.</p>
			</div>
		<h3>header</h3>
			<div class="sec">
				<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
			</div>

<h3>header</h3>
			<div class="sec">
				<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
			</div>
	</div>
	<div id="footer">

<p>© year name etc | template by <a href="http://heartofpandora.com">Aerith</a> | valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>, <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p>

</div>
</div>
</body>
</html>

Layout Comments

Showing latest 9 of 9 comments

This is really pretty. I'm using it for my website :)
I have a question though: How would people be able to comment on each post? (i noticed there's a number of comments link.)

By guide101 on Jul 28, 2009 12:52 pm