The first thing you'll want to do is copy the skin into the skins folder in your eFiction install and rename it to whatever you want your skin to be called. The skin we're creating in this tutorial will eventually go up on my live site as "RepliCarter"

So this is where we're going to start. HighDesert is a CSS based skin so we won't have to deal with modifying graphics as part of the layout for the most part. Though there are some custom graphics. We'll deal with those changes last though. Like CSSZen, HighDesert uses only a few colors. We'll start our editing of the skin by opening style.css in a text editor. You may want to use a color scheme generator to pick some colors in advance, or just experiment until you find something you like. As a place to start, we're going to go the easy route and use the text editor to do a mass search and replace for the main colors of the skin.

HighDesert has four main colors other than black and white:

• #512800
• #963
• #DDBF69
• #FFC

For our sample skin, we're going to do a monochromatic black/gray/white skin. So we're going to change these four colors to:

• #222
• #666
• #999
• #EEE

The next thing I'm going to do is get rid of the banner image. We'll put one back later, but for now it's kind of distracting. In the case of this skin, the banner was attached as a background image for a div in the header.tpl. So we're still working in style.css. In your style.css file we're going to look for the #banner div. It'll look like this:

#bannercontainer {
	background: url(images/HighDesert.jpg) no-repeat bottom right #000;
}

We're going to edit this to remove the image and change the color of the background to the darkest of our colors #222. Later on when we put the banner image back on, we'll discuss everything that was originally in there, but for now we're just going to make our changes.

#bannercontainer {
	background: #222;
}

And this is what we end up with: