1. Prerequisites

This tutorial requires the following:

2. The Skin Maker Tool

The Skin Maker is built into ccHost since version 3.0.2

1. Go to Manage Site/Skin Maker.
2. Enter a name like myskin and click Submit
3. On completion you'll see a link to Settings, click it now.
4. From the Skin Style field select myskin

The results should look something like the image below (click image for larger view):

In addition your new skin scribbles a message on to every user profile's page, go to Your Page to see this. Edit the file skin-myskin-map.xml to disable this.

3. Picking a Color Schemes

When picking the individual colors in a scheme you might want to consult with a tool such as a color scheme chooser.

4. Changing the Text, Border and Background Colors

The Skin Maker tool created three files in your skins directory as well a new directory called myskin with the graphics files it requires.

In the file skin-myskin.css you see that skin derives it's styles from skin-simple but then strategically overrides specific color values in and replaces the background graphics to give us a completely different color scheme variation to skin-simple. Most of the major color-able elements of the screen clearly grouped and identified. One major exception is the text box for reviews and forum topics which are found in skin-myskin-topics.css.

The color values in a hex format (e.g. #FFE2BF) the CSS rgb() are fine too. There are countless helper pages on the web for dealing with colors in CSS ( del.icio.us, Google);

Starting from Scratch

The Skin Maker tool creates a skin based on skin-simple as a matter of convenience. This derivation implies a specific layout for each page. If you are comfortable with CSS and PHPTal and you would like your skin to have a different layout then in skin-myskin.css remove the line:

@import url('skin-simple.css');

5. Changing the Banner, Footer and Tabs Background

In order to change the tabs background you will need to edit myskin/tab.gif in your graphical editor. The image below shows you what the different bands represents:

The bands marked 'hover' are the color used when a user pauses the mouse over a non-selected tab.

Some versions of IE will not perform the hover action correctly. To fully verify that your version of the skin is working try Firefox.

The files required to paint the background for the footer are called footer-*.*. They should all be the same color.

The files to paint the header background are called header-*.*.

6. Changing the Button Background

There are two types of buttons in this skin. The flat buttons are found in files that being with flat-button and are used for the 'Podcast this page' and 'Stream this page' links.

The 'action' buttons in this skin are used for major actions like download, reviews, etc. They are rounded and react to hovering by changing color.

To change the action buttons images you edit the files that begin with button-. For all action buttons the left side is always the same ( button-left.gif). For the right side there are three variations: plain, download and play.

In all four files the upper band is used for normal state and the bottom for when the user hovers over the button. All four files must have the same colors for both states.

In this skin the action 'play' is denoted with a tiny speaker which only makes sense for audio files. If your installation specializes in other streaming media like Flash or video you should edit the file button-right-play.gif and change the speaker to something more appropriate.

7. Changing the Logo in the Banner

The peace sign in the banner was 'burned in' to the background header. This is very effective way of ensuring the logo is placed exactly in the same place in relation to the banner no matter what browser or resolution the user is using. In this case that logo is in myskin/header.gif and can easily be replaced or simply deleted using a graphical editor.

When you change (or delete) the logo you will want to adjust the site title and description in the CSS to align to your logo. Look for the section in the main CSS file that looks like the segment below and change the values in bold below until the banner looks right.

/**********************************
* Shift the text of main link and *
* site description  to the right  *
* to make way for our logo        *
***********************************/

#cc_header h1 a { /* main site link */
  padding-left: 68px;
}

#cc_header p {    /* site description */
  padding-left: 80px;
}