2
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 {
	text-decoration:underline;
}

.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 {
	float:right;
}

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

.left {
	float: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%;
}

</style>

* 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

gettingstarted/csstemplatesc_prompt

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>