Let's begin by extracting the theme from the ZIP archive you've downloaded. Inside you will see a folder with a name similar to eddiemachado-bones-53d7155; extract it to your WordPress theme folder, and rename it to bones.

Activate the Bones theme in the theme admin area in WordPress, in the normal manner.

Navigate to \bones\library within your WordPress theme folder in Windows Explorer. Inside, you will find a number of folders; one of this is called scss, which contains the SASS files for the Bones theme.

Go ahead and open up _base.scss from within the scss folder, in Sublime Text 2, and look for the #content style on or around line 245.

Alter the code as shown:

#content { margin-top: 2.2em; background-color: #D5AEAB; margin-left: auto; margin-right: auto; width: 60%; }

Save the changes, then copy the three recompiled files from the scss folder to the css folder, as we did in step 3, and refresh your browser window. It will have shrunken the main content area to 60 percent of the width, and added a purple background.

Okay, let's do the same with the header. Look for .header{} on or around line 153 in _base.scss. Alter the style to the following line:

.header { margin-left: auto; margin-right: auto; width: 62.5%; }

Save your work, then copy the style.css file over to the css folder, in the same way as we did in step 7. Refresh your browser view and notice how the header has been moved into the center, in the same way we did for the content area.

Now we're going to make two more changes to the style sheet. First, look for .footer, on or around line 819, and alter it as follows:

.footer { clear: both; margin-left: auto; margin-right: auto; width: 62.5%; }

Finally, let's add in a slight adjustment to the text in the footer – it looks a little cramped and could use some color:

.copyright { background-color: #EEE; padding: 5px; }

If everything has worked, we'll end up with something similar to the following screenshot, when you preview it in a browser: