Semmatic for Sandbox-10

This is a simple semi-monochromatic 3 column fixed width skin for Sandbox-10.

It doesn’t matter if you have widgets or using the default sidebar, all elements should look consistent.

The posts column has a width of 575 pixels so, it is recommended to use images no bigger than 500px wide. The side bar has a width of 200px, so images bigger than 180px are not recommended.

Semmatic

This skin is also compatible with Sandbox 1.2 on self-hosted blogs.



CC-GNU GPL

This software is licensed under the CC-GNU GPL.


Creative Commons License

This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

Where possible, please include a link to this page for attribution.

The CSS Code:

/*
* Semmatic for Sandbox-10 (v.1.0.0)
*
* CREDITS:
*
* Design, CSS code, background and other images:
*	Juan Wong
*
* Skin URI: http://sandboxskins.wordpress.com/2008/12/07/semmatic-for-sandbox/
*
* Release date: 20081207
*
*/

@charset "UTF-8";
/* CSS Document */

body {
	background:#acacac;
	font:normal 1em Arial, Helvetica, sans-serif;
	margin:0;
}

blockquote {
	border:solid 1px #e5e5e5;
	background:#fcfcfc;
	font:normal 95% Geneva, Verdana, Helvetica, sans-serif;
	color:#888;
	padding:5px 10px;
}

blockquote p {
	margin:0;
}

img {
	border:solid 1px #999;
	margin:7px;
}

img#wpstats {
	position:absolute;
	top:-99px;
}

#wrapper {
	width:1000px;
	height:100%;
	background:#545654 url('http://sandboxskins.files.wordpress.com/2008/12/ns-contents-bg.gif') 0 0 repeat-y;
	clear:both;
	overflow:hidden;
	font:normal .75em Arial, Helvetica, sans-serif;
	border-left:solid 1px #333;
	border-right:solid 1px #333;
	margin:auto;
	padding:0;
}

#header {
	background:#555;
	border-top:solid 3px #BDB6A3;
	border-bottom:solid 2px #5f5f5f;
	width:1000px;
	height:75px;
	display:block;
	overflow:hidden;
	margin:0;
}

#blog-title {
	margin:10px 0 2px 10px;
}

#blog-title a {
	color:#999;
	text-decoration:none;
}

#blog-description {
	color:#ccc;
	font-weight:bold;
	font-size:1em;
	margin:0 0 5px 10px;
}

#menu {
	width:1000px;
	height:25px;
	border-top:solid 1px #383838;
	border-bottom:solid 1px #999;
	background:#717171;
	overflow:hidden;
	clear:both;
	margin:0;
	padding:0;
}

#menu ul {
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
}

#menu ul li {
	height:25px;
	width:auto;
	float:left;
	margin:0;
	padding:5px 0 0;
}

#menu ul li a {
	color:#e9dfc6;
	font-weight:bold;
	text-decoration:none;
	height:25px;
	margin:0;
	padding:5px 10px;
}

#menu ul li a:hover {
	background:#333;
}

#nav-above {
	display:none;
}

#container {
	width:100%;
	background:transparent;
	float:left;
	clear:both;
	overflow:hidden;
}

#content {
	background:#fff;
	width:576px;
	border-top:solid 1px #383838;
	margin:0 0 0 202px;
	padding:10px;
	overflow: hidden;
}

#content h2 {
	font-size:1.5em;
	margin:0 0 15px;
	padding:0;
}

#content p {
	text-align:justify;
}

#content pre,#content code {
	font:normal 1em 'Courier New', Courier, Fixed, monospace;
	color:#039;
}

#content pre {
	border:solid 1px #ddd;
	overflow:auto;
	width:530px;
	height:auto;
	margin:5px 15px;
	padding:5px;
}

#content a {
	color:#5F6A86;
	text-decoration:none;
}

#nav-below {
	clear:both;
	overflow:hidden;
	margin:20px auto;
}

#comments {
	clear:both;
}

#comments-list,#trackbacks-list {
	width:500px;
	clear:both;
	margin:10px 0 10px 20px;
}

#comments-list ol,#trackbacks-list ol {
	margin:0 0 0 10px;
	padding:0;
}

#comments-list li,#trackbacks-list li {
	list-style:none;
}

#trackbacks-list li {
	border-bottom:dotted 1px #ccc;
}

#primary,#secondary {
	float:left;
	overflow:hidden;
	width:180px;
	background:transparent;
	border-top:solid 1px #383838;
	color:#ddd;
	padding:5px 10px;
}

#primary h3,#secondary h3 {
	color:#BDB6A3;
	text-align:center;
	font-size:1.2em;
	margin:10px auto 5px;
	padding:0;
}

#primary a,#secondary a {
	color:#9AABBC;
	text-decoration:none;
}

#primary {
	margin:0 0 0 -1000px;
}

#secondary {
	margin:0 0 0 -200px;
}

#primary ul,#secondary ul {
	margin:0;
	padding:0;
}

#primary ul li,#secondary ul li {
	list-style:none;
}

#pages,#categories,#archives,#search,#rss-links,#meta,.linkcat,.widget {
	border-bottom:dotted 1px #ccc;
	padding:0 0 10px;
}

#wp_tag_cloud a:hover,#tag_cloud a:hover {
	text-decoration:underline;
}

#s,#searchsubmit,#error404-s,#error404-searchsubmit,#cat,#noresults-s,#noresults-searchsubmit {
	border:solid 1px #999;
	background:#777;
	color:#ddd;
	font-size:90%;
}

#s {
	width:130px;
	height:auto;
	padding:2px 5px 1px;
}

#searchsubmit {
	width:30px;
}

#wp-calendar {
	margin:auto;
}

#archives select {
	width:170px;
	height:auto;
	overflow:hidden;
}

#archives select,#archives option {
	border:solid 1px #999;
	background:#777;
	color:#ddd;
	font-size:90%;
}

#header,#footer {
	clear:both;
}

#footer {
	height:35px;
	text-align:center;
	background:#717171;
	border-top:solid 2px #999;
	border-bottom:solid 1px #333;
	color:#fff;
	margin:0;
	padding:10px 0 0;
}

#footer a {
	color:#e9dfc6;
}

.skip-link {
	display:none;
}

.current_page_item {
	background:#555;
}

.post {
	clear:both;
	overflow:hidden;
	border-bottom:dotted 1px #ccc;
	margin:0 0 20px;
	padding:0 0 20px;
}

.entry-meta {
	background:#e4e8ed;
	font-size:85%;
	padding:5px;
}

.entry-date {margin: -10px 0 15px; padding: 0;}

.entry-date .published {color: #777; border: none; font-size: 95%}

.edit-link a {
	color:#f00!important;
}

.wp-smiley {margin: 0 4px; border: none;}

.nav-previous {
	float:left;
}

.nav-next {
	float:right;
}

.nav-previous,.nav-next {
	margin:5px 2px 10px;
}

.form-textarea textarea,.form-submit input {
	border:solid 1px #999;
	background:#777;
	color:#ddd;
}

.unapproved {
	background:#FFFBCC;
	border:solid 1px #E6DB55;
	display:block;
	margin:5px;
	padding:5px;
}

.comment {
	clear:both;
	border-bottom:dotted 1px #ccc;
	margin:0 0 20px;
	padding:5px 10px;
}

.comment .avatar {
	float:left;
	margin:0 5px 5px;
}

.comment .fn {
	float:left;
	display:block;
	margin:5px 10px 0;
	padding:0;
}

html > body .comment .fn {
	margin:20px 10px 0;
}

.comment .comment-meta {
	background:#ededed;
	clear:both;
	font-size:85%;
	padding:5px;
}

.bypostauthor {
	background:#f2f0ec;
}

.xoxo {
	border:none;
	overflow:hidden;
}

.xoxo .children,.xoxo .blogroll {
	border:none;
}

.xoxo li ul,.recentcommentsavatar {
	padding:7px 5px 0;
}

.recentcommentsavatar {
	font-size:90%;
}

.recentcommentsavatar td {
	padding:2px;
}

.children {
	padding:0 2px 5px 5px !important;
}

If you find bugs or have some feedback, just comment here.

Enjoy!

2 Comments

  1. Posted January 11, 2009 at 4:47 am | Permalink

    I just activated sandbox-10 and copied the style. It’s not working somehow…

  2. Posted January 11, 2009 at 9:29 am | Permalink

    Hi, I just saw your blog and looks fine to me.

Post a Comment

Your email is never shared. Required fields are marked *

*
*