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:
<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>
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>
I've added "thanks" karma to the community.
An excellent idea. Need I say it? Of course not - I just upvote it.
Short-term memory? It was your idea.
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).
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.