Installing Shades of Gray is simple. Just follow the steps below.

1. Upload the sandbox-shadesofgray folder to your Sandbox folder in the wp-content/themes/ on your server.

2. Edit the default Sandbox style.css file, so that it loads the Shades of Gray skin. You can do this by replacing current @import url… line with this one:

@import url(’sandbox-Shades of Gray/style.css’);

Download the skin from the Sandbox Design page.

Note that you must have Sandbox installed to use Shades of Gray, if you don’t have Sandbox you can get it here.

Modifying Shades of Gray

Feel free to modify Shades of Gray in any way you like. To make the skin your own you should replace the icon in the top left corner of the screen and the panoramic image spreading across the top of the page with images of your own. In addition, the Shades of Gray skin includes numerous print styles to format the page for printing and is also designed to format a WordPress category named ‘Asides’ differently than other categories. Either one of these can be changed or removed entirely. More details on how to to this is in the readme file in the download.

License & Credits

Shades of Gray is released under the GNU General Public License, meaning you can do pretty much whatever you want with it, but a link back to lesliefranke.com is always appreciated. Of special note some of the icons in Shades of Gray have been adapted from the “Mini” (http://www.famfamfam.com/lab/icons/mini/) icon collection by Mark James and the Feed Icons are from http://www.feedicons.com/.

One of the main issues with the Sandbox theme so far has been a lack of quality skins. This should begin to change with the close of the recent Sandbox Design Competition. I’ve been watching the Design Competition as it has unfolded, even creating a skin myself, and have been looking forward to see the skins that have been created.

From what I see so far I am most impressed with the following three themes:

Diurnal – Diurnal is a three-column layout that changes styles according to the time of day.

Moo-Point – Moo-Point is a two-column layout with a header navigation and right-hand sidebar. The theme is nicely laid out with appropriate white space making it easy to read.

Oranges- Oranges is a two-column layout and minimalistic skin with a dash of orange.

For a look at all of the skins from the Sandbox Designs Competition head over to the Sandbox Designs site and see live previews of each skin here.

The rational behind completing the site design/coding and layout first is to make sure that all of the code blocks are in the right place and semantically laid out. In addition, this is a good time to validate the site, checking for errors like an improperly closed div tag that could mess up the site layout. Once the layout code has been added to the WordPress template, errors of this kind are much more difficult to diagnose and fix. This approach provides a chance to nail down the styles that will be used for layout and text without having to worry about any WordPress tags or PHP code getting it the way.

If you look at the illustration below each page in this site is really just split up into four blocks. Even the homepage, while a little different, is just additional content and side blocks within the main content block. Each one of these blocks are marked up and placed in position using div tags and CSS floats. Besides helping to separate the content from presentation, this provides one important additional benefit. I can write the page just once and it should render correctly in most browsers and devices

Block Sections in Each Page

Header Block

The header block of the page contains all the HTML information that needs to be at the top of each WordPress page. This includes the site menu, header image, page title/description and things that belong in the HEAD section of the page, such as the doctype, links to style sheets, and the title. Basically, the header block should contain anything that needs to be repeated across the top of all of the WordPress pages on the site.

Content Block

The content block contains the meat of each WordPress page, either posts or WordPress pages.

Sidebar Block

This block contains anything that will add additional value to the page. For example, on the posts pages I may want to add the latest posts and posts categories.

Footer Block

The footer block contains the information that goes at the bottom of each WordPress page such as copyright and contact information.

Copying the Code into WordPress Templates

Now I can copy my layout code from the static pages into the appropriate files in the theme directory. WordPress themes live in a directory residing in the wp-content/themes/ folder. For example, a theme named ‘mytheme’ would reside in the wp-content/themes/mytheme folder. This directory holds all of the theme’s stylesheets, templates, images, etc. WordPress will load different pages templates for a different query type. Basically, if a category is being queried the template called category.php will be used.

In order to avoid starting completely from scratch I begin by copying all of the files from the default WordPress theme into this directory (Update Note: Alex King mentions that he uses the Sandbox theme as a starting point. Depending on your needs this may be a better choice.) While many different theme files have special meaning to WordPress below is the theme files I included in this site’s new theme.

1. index.php – The main WordPress template. Index.php must be present and will be used if the appropriate query template is not present.
2. style.css – The main stylesheet. This must be included with the theme.
3. archive.php – The archive template. Archive.php is used when a category, author, or date is queried.
4. author.php – The author template. Used when an author is queried.
5. category.php – The category template. Used when a category is queried.
6. comments.php – The comments template.
7. footer.php – The page footer template. Can be used on any page.
8. header.php – The page header template. Can be used on any page.
9. page.php – The page template. Used when a page is queried.
10. sidebar.php – The side portion of the page template. Can be used on any page.
11. single.php – The single post template. Used when a single post is queried.
12. search.php – The search template. Used when a search is performed.
13. 404.php – The 404 Not Found template. Used when WordPress cannot find a post that matches a query.

Conclusion

Now that I have added my layout HTML code to each WordPress template I can begin adding the WordPress tags and PHP code to each one of the WordPress template files, customizing each one to my liking.

Notes:

To help in creating the look and feel, as well as coding the site, the following software was used. I used Dreamweaver and Top Style Light for the XTML/CSS part of the design and Paint Shop Pro for the graphic work. While Top Style Light is freeware, the others are not. A good, free alternative to Dreamweaver is HTLM-Kit and a good, free alternative to Paint Shop Pro is Paint.Net. Besides this software, I needed a browser to test the site as development progressed. I used Mozilla Firefox as my primarily development browser with two essential extensions, Firebug and Web Developer, while at the same time making sure to check my progress in both Internet Explorer 6 and 7.

In addition if you need coming up with layout code take a look at one of the following sites:
Open Source Web Design, Open Web Design, Template World.