HeadsetOptions Web Design, SEO, WordPress, Etcetra

This ‘how to’ tutorial was written for beginners/users designing a Sandbox based theme/CSS redesign using minimal CSS hacks and imagery. The objective of this exercise was to do “as little work as possible” while ensuring the result appears “significantly different” from the starting template. This is not the end-all strategy to design a Sandbox theme/skin, but merely a guide to get started. Enjoy.

Tools needed: Notepad, FTP (SmartFTP or similar) and PhotoShop or similar (any image editor should do).

In less than a couple of weeks, the Sandbox theme competition will decide a winner, but if you are anything like I am, you would probably wait to the very last day to create and submit your entry. So I feel it’s the perfect time to have a “how to” demonstrating the endless possibilities of CSS redesigning for those procrastinators waiting for a sign to get started. And no, this demo theme will not be submitted to the competition but will be released freely for Sandbox users sometime soon. Here’s a quick reminder of the rules.

Just to briefly touch on the Sandbox theme, as described by its creator(s), “The real feature of the Sandbox is its markup. The use of class-generating functions in key elements (the body, post div, and comment li elements) creates the most extensible WordPress theme available”. So all you need is some basic understanding of CSS and you should be ready to roll.

Step 1- Getting Started:

To start off, you need to download the Sandbox theme, extract and upload the theme files to your server (you can work offline if you prefer and have the necessary tools).

On install, the site will look like the image below:

Step 2 – Choosing Layout:

Then browse through the various included CSS files and pick the format you would like to use as a base (2 column, 3 column, left sidebar, right sidebar, whatever). I personally chose 3 columns, with a sidebar on each side of the main content. I find this format very popular among bloggers as well as users who use WordPress as more than just a blogging tool. So in short, I chose the ’sandbox-layouts/3c-b.css’ as the base layout.

Open style.css to learn about the style that shape the contents, in the case of Sandbox, the classes are semantic, which means each element is defined by names literally describing the content. For example (from author site), a category named “breaking news” would be styled (CSS) using a class

.category-breaking-news {…

since it will render as class=”category-breaking-news” when used, making it easier even for users with very little CSS background to identify a certain element and change it if the need be.

Here’s what I found in the style.css at the very top:

/* Two-column with sidebar on left from the /sandbox-layouts/ folder */
@import url(’sandbox-layouts/2c-l.css’);

You can change that to import the 3-column version I described earlier.

/* Three-column fluid layout with two sidebars on both sides of content from the /sandbox-layouts/ folder */
@import url(’sandbox-layouts/3c-b.css’);

The other way (my preferred) is to simply copy the content of 3c-b.css and paste it to style.css in place of the @import call.

So the stylesheet should look like this:

/*
LAYOUT: Three-Column
DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
*/
div#container { float: left; width: 100%; }
div#content { margin: 0 200px; }
div.sidebar { float: left; overflow: hidden; width: 180px; }
div#primary { margin: 0 0 0 -100%; }
* html div#primary { left: 20px; position: relative; }
div#secondary { margin: 0 0 0 -200px; }
div#footer { clear: left; width: 100%;}

/* Just some example content */
div#header{text-align:center;margin-bottom:2em;}
div#access div.skip-link{position:absolute;top:1em;right:1em;}
div#menu{font-size:0.9em; height:1.5em; padding-top:0.3em; background:#eee; width:100%;}
div#menu ul a{font-weight:700;text-decoration:none;}
div#menu ul,div#menu ul ul,div#menu ul li{list-style:none;margin:0;padding:0;}
div#menu ul li{float:left;}
div#menu ul li a{background:#eee;padding:0.3em 0.5em;}
div#menu ul ul{display:none;}
div#menu ul ul li{float:none;}
div#menu ul ul li a{margin:0;padding:0;}
div#menu ul li:hover ul{display:block;font-size:0.9em;padding-top:0.5em;position:absolute;}
div#menu ul li:hover ul li a{background:#f5f5f5; border:none; display:block; padding:0.1em; width:10em;}

.entry-title{clear:both;}
div#container,div.sidebar{margin-top:2em;}
div#nav-above,div#nav-below{width:100%;height:1em;}
div#nav-above{margin-bottom:1em;}
div#nav-below{margin-top:1em;}
.alignleft,div.nav-previous{float: left;}
.alignright,div.nav-next{float: right;}
form#commentform .form-label{margin:1em 0 0;}
form#commentform span.req-field{background:#fff;color:red;}
form#commentform,form#commentform p{padding:0;}
input#author,input#email,input#url{width:50%;}
input#author,input#email,input#url,textarea#comment{padding:0.2em;}
ol.commentlist li{margin:0 0 3.5em;}
textarea#comment{height:13em;margin:0 0 0.5em;overflow:auto;width:66%;}

div.sidebar div, div.sidebar h3, div.sidebar ul, div.sidebar li {margin:0;padding:0;}
div.sidebar h3{font-size:1.2em;}
div.sidebar input#s{width:7em;}
div.sidebar li{list-style:none;margin:0 0 1em;}
div.sidebar li form{margin:0.2em 0 0;padding:0;}
div.sidebar ul ul{margin:0 0 0 1em;}
div.sidebar ul ul li{list-style:disc;margin:0;}
div.sidebar ul ul ul{margin:0 0 0 0.5em;}
div.sidebar ul ul ul li{list-style:circle;}

div#footer{text-align:center;}

With just that one change (from a 2 column to a 3 column layout), the site will look like the image below:

Step 3 – Re-arranging Layout (optional):

The very first thing I did was re-adjust the layout to suit my needs, for example I needed to move the site heading and descriptions to the left, make it a little bigger and pad it to stay off the left edge, I did that by replacing

div#header{text-align:center;margin-bottom:2em;}

with

div#header{text-align:left;margin-bottom:2em;}
div#header h1 {font : bold 2.8em Arial, Sans-Serif; padding : 8px 0 4px 20px; margin : 0; letter-spacing : -1px;}
div#blog-description {padding : 2px 0 0 20px; }

Note that I am defining the font type for this particular element, it is not really necessary as we will define the overall font usage later on, nonetheless it’s a habit that could come handy while designing more complex sites.

Also, the left padding for the menu and left sidebar and the right padding of the content never existed, so I went ahead and added/edited the code in style.css, the lines added are bold:

div#content { margin: 0 200px; padding: 0 20px 0 10px; border-left: #8896B3 1px solid; border-right: #8896B3 1px solid;}

div#primary { margin: 0 0 0 -100%; padding-left: 20px; padding-top: 20px; }

div#secondary { margin: 0 0 0 -200px; padding-left: 10px; padding-top: 20px; }

div#menu{font-size:0.9em; height:1.5em; padding-top:0.3em; background:inherit; width:100%; padding-left:20px; padding-top: 20px; }
div#menu ul a{font-weight:700;text-decoration:none;color : #ffffff;}
div#menu ul li a{background:inherit;padding:0.3em 0.5em;}
div#menu ul li:hover ul li a{background:#8896B3;border:none;display:block;padding: 0 0 0.1em 0.3em;width:70px;}

div.sidebar h3{font-size:1.2em; text-transform: uppercase; }

With these changes added, the site will look like the image below (not very different from the earlier one):

Step 4 – Re-styling Layout:

Now for the fun part. This is where we will define the global usage like font type, size, colors, paragraph margins, image borders etcetera. I added this set of codes to the style.css at the very top:

body {padding : 0;margin : 0;font : 0.74em Arial, sans-serif; line-height : 1.5em;background : #fff; color : #454545;}
a {color : #900019;background : inherit; text-decoration : none;}
a:hover {color : #900019;background : inherit; text-decoration : underline;}
p {margin : 5px 0;}
h1 {font : bold 1.8em Arial, Sans-Serif; padding : 8px 0 4px 0;margin : 0;letter-spacing : -1px;}
h2 {font : bold 1.6em Arial, Sans-Serif; letter-spacing : -1px; text-transform:uppercase;}
ul {margin : 0;padding : 0;list-style : none;}
img {border : 0;}

I wanted to use one image in this theme to add a Web 2.0 feel to it, I chose to use the red, white and blue color scheme. I used an online utility called Background Image Maker to generate 2 images, that I clubbed. Here’s how I did it:

I used the color #162D4D to make a gradation of size 100px by 60px, and a lighter shade #8896B3 to create a slash of size 100px by 100px. I copied and pasted these images onto a 100px wide and 200px high white background and I got this:

I added a line to the code (defining the body) we pasted to include the background image like below:

body {padding : 0;margin : 0;font : 0.74em Arial, sans-serif;line-height : 1.5em;background : #fff url(images/bg.gif) repeat-x top; color : #454545;}

The design now starts looking more like a theme (see the image below) and less of a skeleton:

Step 5 – Nuts, Bolts and Finishing Touches:

We have the basic layout and design incorporated; now we will focus a little on miscellaneous styling like icons and such. The best place to start looking for icons is Mark James’s FamFamFam, download his Silk icon set if you don’t have a copy already. I picked 4 icons from the list for use in the meta for date, author, category and comments. Here are the images I chose:

I wanted to include one icon each prior to each meta elements. So I added this code to the very bottom of the style.css corresponding to the icons above:

div.entry-date { background:url(images/clock_red.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta { background:url(images/user_suit.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta span.cat-links { background:url(images/tag_blue.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta span.comments-link { background:url(images/comments.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }

This works fine in IE, but in FF the icon repeats for each hyperlink in category and comment, so I added three more lines:

div.entry-meta a { background:none; }
div.entry-meta span.cat-links a { background:none; }
div.entry-meta span.comments-link a { background:none; }

I also wanted to get rid of the “|” between the meta elements, so I added one last line:

div.entry-meta span.meta-sep {display: none;}

That does it, the posts with meta icons will look like the image below or click for a Live Demo:

The style.css file will look like this:

/*
THEME NAME: sandbox-hso
THEME URI: http://www.plaintxt.org/themes/sandbox/
DESCRIPTION: A theme rich with powerful and dynamic semantic class selectors; a canvas for CSS artists
VERSION:
AUTHOR: Andy”>http://andy.wordpress.com/”>Andy Skelton & Scott”>http://www.plaintxt.org/”>Scott Allan Wallick
AUTHOR URI:
*/

body {padding : 0;margin : 0;font : 0.74em Arial, sans-serif;line-height : 1.5em;background : #fff url(images/bg.gif) repeat-x top; color : #454545;}
a {color : #900019;background : inherit; text-decoration : none;}
a:hover {color : #900019;background : inherit; text-decoration : underline;}
p {margin : 5px 0;}
h1 {font : bold 1.8em Arial, Sans-Serif; padding : 8px 0 4px 0;margin : 0;letter-spacing : -1px;}
h2 {font : bold 1.6em Arial, Sans-Serif; letter-spacing : -1px; text-transform:uppercase;}
ul {margin : 0;padding : 0;list-style : none;}
img {border : 0;}

/*
LAYOUT: Three-Column
DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
*/
div#container {float: left; width: 100%; }
div#content { margin: 0 200px; padding: 0 20px 0 10px; border-left: #8896B3 1px solid; border-right: #8896B3 1px solid;}
div.sidebar { float: left; overflow: hidden; width: 180px; }
div#primary { margin: 0 0 0 -100%; padding-left: 20px; padding-top: 20px;}
* html div#primary { position: relative; }
div#secondary { margin: 0 0 0 -200px; padding-left: 10px; padding-top: 20px;}
div#footer { clear: left; width: 100%;}

/* Just some example content */

div#header{text-align:left;margin-bottom:2em;}
div#header h1 {font : bold 2.8em Arial, Sans-Serif; padding : 8px 0 4px 20px; margin : 0; letter-spacing : -1px;}
div#blog-description {padding : 2px 0 0 20px; }
div#access div.skip-link{position:absolute;top:1em;right:1em;}
div#menu{font-size:0.9em; height:1.5em; padding-top:0.3em; background:inherit; padding-left : 20px;}
div#menu ul a{font-weight:700;text-decoration:none;color : #ffffff;}
div#menu ul,div#menu ul ul,div#menu ul li{list-style:none;margin:0;padding:0;}
div#menu ul li{float:left;}
div#menu ul li a{background:inherit;padding:0.3em 0.5em;}
div#menu ul ul{display:none;}
div#menu ul ul li{float:none;}
div#menu ul ul li a{margin:0;padding:0;}
div#menu ul li:hover ul{display:block; font-size:0.9em; padding-top:0.5em; position:absolute;}
div#menu ul li:hover ul li a{background:#8896B3;border:none;display:block;padding:0 0 0.1em 0.3em;width:70px;}

.entry-title{clear:both;}
div#container,div.sidebar{margin-top:2em;}
div#nav-above,div#nav-below{width:100%;height:1em;}
div#nav-above{margin-bottom:1em;}
div#nav-below{margin-top:1em;}
.alignleft,div.nav-previous{float: left;}
.alignright,div.nav-next{float: right;}
form#commentform .form-label{margin:1em 0 0;}
form#commentform span.req-field{background:#fff;color:red;}
form#commentform,form#commentform p{padding:0;}
input#author,input#email,input#url{width:50%;}
input#author,input#email,input#url,textarea#comment{padding:0.2em;}
ol.commentlist li{margin:0 0 3.5em;}
textarea#comment{height:13em;margin:0 0 0.5em;overflow:auto;width:66%;}

div.sidebar div, div.sidebar h3, div.sidebar ul, div.sidebar li{margin:0;padding:0;}
div.sidebar h3{font-size:1.2em; text-transform:uppercase;}
div.sidebar input#s{width:7em;}
div.sidebar li{list-style:none;margin:0 0 1em;}
div.sidebar li form{margin:0.2em 0 0;padding:0;}
div.sidebar ul ul{margin:0 0 0 1em;}
div.sidebar ul ul li{list-style:disc;margin:0;}
div.sidebar ul ul ul{margin:0 0 0 0.5em;}
div.sidebar ul ul ul li{list-style:circle;}

div#footer{text-align:center;}

div.entry-date { background:url(images/clock_red.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta { background:url(images/user_suit.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta span.cat-links { background:url(images/tag_blue.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta span.comments-link { background:url(images/comments.png) no-repeat; margin:16px 0 20px 0 ; padding-left:20px; }
div.entry-meta a { background:none; }
div.entry-meta span.cat-links a { background:none; }
div.entry-meta span.comments-link a { background:none; }
div.entry-meta span.meta-sep {display: none;}

The images folder will now contain 5 images (bg.gif, clock_red.png, user_suit.png, tag_blue.png, and comments.png)

Step 6 – There is no step 6, just a final note:

If you find this information useful and/or if you find a bug, let me know. I should warn you, I am writing this post while simultaneously hacking, so I haven’t had a chance to play around with it. If you have any questions, feel free to ask.

P.S. I just noticed that Small Potato has a spanking new theme based on Sandbox called Warth, one of the best Sandbox designs I have come across (yet!).