Image of Template with blue headers, line underneath headers, div to move images right and left, blockquotes with dotted-lines and shading, footer gray

I'll be honest. I'm not sure the best way to go about putting templates up, titling them, describing their characteristics or how to use, etc. I hope someone who has ideas will post them so that we can have a useful standard (template!) to follow.

This is one I created for this post:

The Morality of Bitcoin (Or Why One Libertarian Has It All Wrong)

<style media="screen" type="text/css">

.header-1,.header-2,.header-3 {
    padding: 4px 0;
	margin: 4px 0;

.header-1 {
	color: #147794;
	font-family: sans-serif;
	border-bottom: #147794 solid 1px;
	font-weight: normal;
	font-size: 1.7em;
	letter-spacing: 0.08em;
	clear: both;

.header-2 {
	color: #147794;
	font-weight: normal;
	font-size: 1.5em;
	border-bottom: #147794 1px dotted;

.header-3 {
	color: #147794;
	font-weight: normal;
	font-size: 1.4em;

a img {
	border: none;

#user-content {
	font-family: sans-serif;
	font-size: 1.2em;
	padding-left: 16px;
	float: left;
	padding-top: 12px;

#user-content a:active,#user-content a:hover {
	color: #7009fd;

.block-quote {
	background-color: #f5f5f5;
	color: #222;
	padding: 10px 10px 30px 10px;
	border-top: #394132 1px dashed;
	border-bottom: #394132 1px dashed;
	margin: 10px 30px 10px 30px;

.block-quote a {

.block-quote span {
	color: #933B39;
	letter-spacing: 0.2em;

.block-quote p {
	margin-bottom: 15px;
	font-family: sans-serif;
	font-size: 1.05em;

.right-border {
	float: right;
	padding: 0 5px 0px 15px;
	margin: 10px 30px 20px 20px;

.right {

.left-border {
	float: left;
	padding: 0 5px 0 0;
	margin: 10px 30px 20px 0px;

.left {

.code {
	background-color: #F7F7F7;
	border: 1px solid #CCCCCC;
	border-radius: 3px 3px 3px 3px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #FFFFFF inset;
	color: #333333;
	display: inline-block;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 1.4;
	margin: 0 0.1em;
	padding: 0.1em 0.6em;
	text-shadow: 0 1px 0 #FFFFFF;
	white-space: nowrap;

.footer {
	margin-bottom: 1px;
	text-align: left;
	color: #686868;
	font-style: italic;
	font-size: 85%;


* Written by permalink    plaintext

I've added "thanks" karma to the community.

Written by   permalink    plaintext

An excellent idea. Need I say it? Of course not - I just upvote it. laugh

Written by permalink    plaintext
An excellent idea.

Short-term memory? It was your idea.

* Written by permalink    plaintext

I just noticed a problem with using templates that you might want to consider for your future articles and moderating the community. When you redefine a standard .css tag like you did above with <blockquote>, it carries all the way through the comments. So when someone uses a blockquote (by clicking on the quotation icon in the toolbar above) in order to quote what someone said, you see problems like this:

Thus, my suggestion is to be careful creating templates/css that redefine common tags others may use in comments. You can still create the styles you want by just using a different name for your class (e.g., my-blockquote).

Written by   permalink    plaintext

You see? This is what happens when you make someone a .css moderator who lacks experience. I am going to modify the css in my article and above. Additionally, I'll add a note to the community summary about what to avoid. Thank you for pointing this out.

You need to be logged in to comment.
search only within csstemplates

About csstemplates


Based on the excellent suggestion by digdug, this community is to share style sheets/.css templates you can use for posts. If you're a .css expert, we'd welcome some experienced experts to become moderators.

Please do not redefine standard html tags in your templates (e.g., don't do this: blockquote { font-size:30px; }), as it can cause problems with comments that use those tags. Always create your own classes - e.g.:

<style>.my-blockquote { font-size:30px; }</style>
<div class="my-blockquote">my very large blockquote</div>