It's great that you allow .css to be included in posts but I've a suggestion. After writing my first (significant) post, I think people who want to make blog posts look nice will want to use style sheets. But there are probably many who don't know how to create them. I think you should have a community where people can share their style sheets so an author can just copy/paste and then modify from there. It's much easier than starting from scratch. I offer mine to start:

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

h1,h2,h3 {    padding: 4px 0;    margin: 4px 0;}

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

h2 {    color: #147794;    font-weight: normal;    font-size: 1.5em;    border-bottom: #147794 1px dotted;}

h3 {    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;}

blockquote {    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;}

blockquote a {    text-decoration:underline;}

blockquote span {    color: #933B39;    letter-spacing: 0.2em;}

blockquote p {    margin-bottom: 15px;    font-family: sans-serif;    font-size: 1.05em;}

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

.right {    float:right;}

.left-border {    float: left;    padding: 0 5px 15px 0px;    margin: 10px 30px 30px 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%;}


(And, yes, I understand that I call it right-border, but it is without border. I used to have a border, changed the .css, but left the name the same) :P

To use, simply click the Source button in your post and paste the above text, including the tags. To use the styles, you'll have to know a little about .css. But you can do things then like:

<div class="right-border">My text here will appear on the right</div> so it looks like this:

My text here will appear on the right

Written by permalink    plaintext

An excellent suggestion. I've just started the community /GettingStarted/csstemplates. Guess who I added as the first moderator?

Written by permalink    plaintext

(smirk) Making a novice .css expert a moderator of a .css community is never a good idea. Consider yourself warned, but I shall attempt to live up to your expecations.

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

About SuggestionBox


Yes, we know our UI isn't great. (And, to think if Twitter didn't make their awesome Bootstrap available?! Can you imagine how ugly our baby would be?) Yes, we expect there are lurking bugs around. (Oh! The hours we spent losing our battles with Javascript.) Yes, we tried to generate HTML that makes coffee, but acknowledge we weren't that talented. (The coffee turned out very bitter.)

Yes, we know we have some growing to do. Please do help us. Offer suggestions. Offer code. Offer ideas. Offer talent. We have a database setup to support the billions of ways you want us to help you improve your own communities and the value you each receive. How will we implement them all? We have no freakin' clue as our 3D printer is broken.

Latest Activity