Need help? Check out our Support site, then


Sandbox Spartan

  1. Here is a stylesheet that I created for the Sandbox. Please feel free to use it, change it, steal it, destory it, et al, as you see fit. Please note, though, that the CSS has been written specifically for the default sidebars of the Sandbox, so if you're using Widgets, you might need to alter the CSS to fit your needs.

    This is something I've called Spartan and it's an easy-to-read, minimalist skin (that conincidentally also happens to be simple, for learner's benefit I hope). It might provide useful to some, though, so enjoy:

    Here is a stylesheet that I created for the Sandbox. Please feel free to use it, change it, steal it, destory it, et al, as you see fit. Please note, though, that the CSS has been written specifically for the default sidebars of the Sandbox, so if you're using Widgets, you might need to alter the CSS to fit your needs.

    This is something I've called Spartan and it's an easy-to-read, minimalist skin that conincidentally also happens to be simple. It might provide useful to some, though, so enjoy.

    --- BEGIN COPYING BELOW THIS LINE ---

    body {
    background:#fff;
    color:#111;
    font-size:125%;
    line-height:140%;
    margin:2em 1em 1em 2em;
    padding:0;
    }

    div#container {
    float:left;
    width:100%;
    margin:0 0 0 -200px;
    }

    div#content {
    margin:0 0 0 200px;
    }

    div.sidebar {
    float:right;
    overflow:hidden;
    width:150px;
    }

    div#secondary {
    clear:right;
    }

    div#footer {
    clear:both;
    width:100%;
    margin:0 -2em 0 0;
    }

    p.access,div#globalnav {
    display:none;
    }

    div#header {
    margin-bottom:3em;
    margin-top:1em;
    }

    div#header a,div#header a:link,div#header a:visited {
    background:#fff;
    color:#000;
    text-decoration:none;
    }

    div#header a:hover {
    background:#fff;
    color:#505555;
    }

    h1#blog-title {
    font:3em/140% arial, helvetica, sans-serif;
    margin:0;
    }

    div#blog-description {
    font-family:verdana, geneva, sans-serif;
    font-size:0.8em;
    }

    div#content a,div#content a:link,div#content a:visited {
    border-bottom:2px solid #b8c4ce;
    color:#000;
    text-decoration:none;
    }

    div#content a:hover {
    border-bottom:2px solid #d9e6f2;
    color:#505555;
    }

    h2.entry-title {
    font-size:1.5em;
    margin:0;
    }

    body.single h2.entry-title,body.page h2.entry-title {
    clear:both;
    font-size:1.6em;
    margin:0 0 -0.4em;
    }

    abbr.published {
    border:none;
    display:block;
    font:0.6em/normal verdana, geneva, sans-serif;
    margin:0.5em 0 0;
    }

    div.entry-content p {
    margin:1em 0;
    }

    div.entry-meta {
    font:0.7em/150% verdana, geneva, sans-serif;
    margin:0 0 5em;
    }

    body.single div.entry-meta {
    background:#fff;
    border:1px solid #b8c4ce;
    color:#505555;
    padding:0.5em;
    }

    body.single div#content div.entry-meta a,body.single div#content div.entry-meta a:link,body.single div#content div.entry-meta a:visited {
    background:#fff;
    border:none;
    color:#000;
    }

    body.single div#content div.entry-meta a:hover {
    background:#fff;
    border-bottom:1px solid #b8c4ce;
    color:#000;
    }

    div.entry-meta abbr.published {
    display:inline;
    font-size:1em;
    }

    dl.author-metadata,dl.archive-metadata {
    font:0.7em/150% verdana, geneva, sans-serif;
    margin-bottom:3em;
    background:#fff;
    color:#505555;
    }

    dl.author-metadata dt,dl.archive-metadata dt {
    font-weight:bold;
    }

    dl.author-metadata dd,dl.archive-metadata dd {
    margin:0;
    }

    div#content div.content-column {
    float:left;
    width:45%;
    }

    div.entry-content ul#linkcats,div.entry-content ul#linkcats li,div.entry-content ul#linkcats ul {
    list-style:none;
    margin:0;
    padding:0;
    }

    div.entry-content ol {
    margin:0 0 0 1.2em;
    padding:0;
    }

    div.entry-content ul {
    margin:0 0 0 1em;
    padding:0;
    }

    div.entry-content span.more-link {
    font:bold 0.7em/130% verdana, geneva, sans-serif;
    }

    div.entry-content div.page-link {
    font:bold 0.7em/130% verdana, geneva, sans-serif;
    margin:-0.5em 0 1em;
    }

    div#content div.page-link a,div#content div.page-link a:link,div#content div.page-link a:visited {
    background:#fff;
    border:2px solid #d9e6f2;
    color:#505555;
    margin:-0.5em 0 1em;
    padding:0.2em;
    }

    div#content div.page-link a:hover {
    background:#fff;
    border:2px solid #b8c4ce;
    color:#000;
    }

    code,pre {
    font-family:"courier new", courier, monospace;
    font-size:0.9em;
    }

    blockquote {
    background:#eeefef;
    color:#000;
    margin:0;
    padding:0.1em 1em;
    }

    blockquote blockquote p {
    border-left:2px dotted #505555;
    padding:0 0 0 0.5em;
    }

    abbr,acronym {
    border-bottom:1px dotted #88807c;
    cursor:help;
    }

    strong {
    font-weight:bold;
    }

    em {
    font-style:italic;
    }

    strong.caps,em.caps,span.caps {
    text-transform:uppercase;
    }

    div.entry-content img {
    border:none;
    }

    div.entry-content img.center {
    display:block;
    margin:0.5em auto;
    }

    div.entry-content img.alignright {
    margin:0.5em 0 0.5em 1.2em;
    }

    div.entry-content img.alignleft {
    margin:0.5em 1.2em 0.5em 0;
    }

    div#content div.entry-content a img.center,div#content div.entry-content a:link img.center,div#content div.entry-content a:visited img.center,div#content div.entry-content a img.alignleft,div#content div.entry-content a:link img.alignleft,div#content div.entry-content a:visited img.alignleft,div#content div.entry-content a img.alignright,div#content div.entry-content a:link img.alignright,div#content div.entry-content a:visited img.alignright {
    border:1px solid #505555;
    }

    div#content div.entry-content a:hover img.center,div#content div.entry-content a:hover img.alignleft,div#content div.entry-content a:hover img.alignright {
    border:1px solid #b8c4ce;
    }

    h2,h3,h4,h5,h6 {
    font-family:arial, helvetica, sans-serif;
    font-weight:normal;
    line-height:130%;
    }

    body.home h2.entry-title {
    font-size:1.6em;
    margin:0;
    }

    body h2.page-title {
    font-size:1.6em;
    }

    body.category h2.page-title,body.author h2.page-title {
    margin:0;
    }

    body.date h2.page-title {
    margin:0 0 1em;
    }

    body.archive h3.entry-title,body.single h3.entry-title {
    font-size:1.3em;
    margin:0;
    }

    body.single h3.comment-header {
    font-size:1.4em;
    margin:3em 0 1em;
    }

    body.single h3#respond {
    font-size:1.2em;
    margin:3em 0 0.5em;
    }

    div.entry-content ul#linkcats li h3 {
    margin:1em 0 0;
    }

    div.entry-content h2 {
    font-size:1.2em;
    margin:1.5em 0 -0.7em;
    }

    div.entry-content h3 {
    font-size:1.1em;
    margin:1.5em 0 -0.9em;
    }

    div.entry-content h4,div.entry-content h5,div.entry-content h6 {
    font-size:1em;
    margin:1.5em 0 -1.1em;
    }

    div.entry-content div.content-column h3 {
    margin:0;
    }

    ol.commentlist li {
    font-size:1.2em;
    margin:0 0 2em;
    }

    ol.commentlist li div,ol.commentlist li p {
    font-size:0.8em;
    }

    ol.commentlist div.comment-author {
    font:0.8em/130% arial, helvetica, sans-serif;
    margin:0 0 0.2em;
    }

    ol.commentlist li div.comment-metadata {
    font:0.5em/130% verdana, geneva, sans-serif;
    }

    ol.commentlist li p {
    margin:0.5em 0;
    }

    ol.commentlist li.bypostauthor {
    border-left:10px solid #eeefef;
    padding:0 0 0 0.5em;
    }

    form#commentform,form#commentform p {
    padding:0;
    }

    form#commentform span.req-field {
    background:#fff;
    color:#c30;
    }

    form#commentform .form-label {
    margin:1em 0 0;
    }

    input#author,input#email,input#url,textarea#comment {
    font-family:verdana, geneva, sans-serif;
    font-size:0.7em;
    padding:0.2em;
    }

    input#author,input#email,input#url {
    width:50%;
    }

    textarea#comment {
    height:15em;
    overflow:auto;
    width:66%;
    margin:0 0 0.5em;
    }

    div.sidebar a,div.sidebar a:link,div.sidebar a:visited {
    background:#fff;
    border-bottom:2px solid #d9e6f2;
    color:#505555;
    text-decoration:none;
    }

    div.sidebar a:hover {
    background:#fff;
    color:#000;
    border-bottom:2px solid #b8c4ce;
    }

    body.single div#secondary ul li,body.page div#secondary ul li {
    display:none;
    }

    body.single div#secondary ul li.blog-search {
    display:block;
    }

    div.sidebar div,div.sidebar h3,div.sidebar ul,div.sidebar li {
    text-align:right;
    margin:0;
    padding:0;
    }

    div.sidebar li {
    list-style:none;
    margin:0 0 1em;
    }

    div.sidebar li form {
    margin:0.2em 0 0;
    padding:0;
    }

    div.sidebar h3 {
    font-size:1em;
    }

    div.sidebar ul ul li {
    margin:0;
    }

    div.sidebar input#s {
    width:5em;
    }

    div.sidebar li img,div.sidebar li a img {
    border:none;
    }

    div#footer a,div#footer a:link,div#footer a:visited {
    background:#fff;
    border-bottom:2px solid #d9e6f2;
    color:#505555;
    text-decoration:none;
    }

    div#footer a:hover {
    background:#fff;
    color:#000;
    border-bottom:2px solid #b8c4ce;
    }

    div#footer p {
    font:bold 0.5em/normal verdana, geneva, sans-serif;
    text-align:right;
    }

    .alignleft {
    float:left;
    }

    .alignright {
    float:right;
    }

    .clearer {
    clear:both;
    }

    div.navigation {
    font:0.7em/normal verdana, geneva, sans-serif;
    width:100%;
    }

    body div#content div.nav-next a,body div#content div.nav-next a:link,body div#content div.nav-next a:visited,body div#content div.nav-previous a,body div#content div.nav-previous a:link,body div#content div.nav-previous a:visited {
    border:2px solid #d9e6f2;
    padding:0.5em;
    }

    body div#content div.nav-next a:hover,body div#content div.nav-previous a:hover {
    border:2px solid #b8c4ce;
    }

    body.single div#content div.nav-next a,body.single div#content div.nav-next a:link,body.single div#content div.nav-next a:visited,body.single div#content div.nav-previous a,body.single div#content div.nav-previous a:link,body.single div#content div.nav-previous a:visited {
    background:#fff;
    border-bottom:2px solid #d9e6f2;
    border-left:none;
    border-right:none;
    border-top:none;
    color:#505555;
    text-decoration:none;
    margin:0;
    padding:0;
    }

    body.single div#content div.nav-next a:hover,body.single div#content div.nav-previous a:hover {
    background:#fff;
    color:#000;
    border-bottom:2px solid #b8c4ce;
    }

    body.single div.navigation {
    padding:0 0 3em;
    }

    div.nav-next,div.nav-previous {
    display:inline;
    }

    body.single div.nav-next {
    margin:0 0 0 1em;
    }

    body.single div.nav-previous {
    margin:0 1em 0 0;
    }

    --- END COPYING ---

    Remember that you'll need to have the Custom CSS upgrade enabled to apply this CSS. And be sure to select "No stylesheet" from the Sandbox Skins menu, otherwise these styles will battle with the other skin you have selected.

    Anyhow, hope you like it.

    scott

  2. Sweet!

  3. Andy, maybe we should start posting these somewhere (ie either the FAQ blog or maybe I'll do it at the Pimp My Blog blog) so they don't get lost amoung the clutter of the forum.

  4. I am considering creating a Wiki for the Sandbox, since users on WordPress.com and hosted WordPress users would find these skins equally useful. Still considering it. But please feel free to compile them, though it may be more prudent to centralize Sandbox stuff at some point, given how much content is likely to be generated. Let's see.

  5. If you want, I could throw up a wiki in about five minutes.

    Might be a good idea for the WordPress community in general, not just WP.com users.

  6. @ drmike
    and the mouse in the corner squeaked saying : build it and they shall come (and use it) - after all this is exactly what a wiki is for;)

  7. Wow, TT knows what a wiki is. She's getting good at this internet stuff. :)

  8. oops! she said scurrying away and muttering "newbie, newbie I am a newbie" ;)

  9. Herr Doktor: Drop me an email at Scott at and we can talk Wiki details. Thanks.

  10. It's going to have to be tommorow as I've got five minutes until the library closes and I've got a volenteer protect this evening.

    Someone please bump so I can see this when I come in.

    Thanks,
    -drmike

  11. Why not keep it in house with something like templates.wordpress.com?

    Pages and posts would work a treat...

  12. Um, let's not create another site or wiki for WordPress stuff. Since this has use across the spectrum of WordPress, let's add it the WordPress Codex. One stop shop for all things WordPress.

    If you need help with this, let me know.

  13. Good point, lorelle - there's already a wiki set up for WordPress. Maybe a page there (http://codex.wordpress.org/SandBox_Theme) might be good enough?

  14. huh... i was just saying to scott that he might as well stick to html docs until Lorelle was ready to roll the stuff into the official wiki. given matt's comments 'until' could be very short.

  15. Agreed! I like simplicity.

  16. Agreed but I didn't know if the Codex was the place for work pretaining to individual themes like that.

  17. Nothing's been set yet. Herr Doktor, go ahead and drop me an email ;-)

  18. drmike, I eagerly await your email re: wikis. swallick at gmail. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic