It's probably worth pointing out that though this tool was developed to make creating themes for SharePoint easier, it works with any website and has no real dependencies on SharePoint.

Download it here

Source Code on CodePlex  

Opening a Page

When you fire up Skinner, the first thing you need to do is enter a site and click 'GO'. If your site doesn't allow anonymous access you will be prompted to log and once you are authenticated the page will display and the color palette will replace the splash image in the tool pane.

There are three palettes available that you can access from the View menu: Colors, Images, and Matching Styles.

The Style drop down lists the style sheets in use on the current page. The selected sheet controls what is displayed in the tool pane and is the sheet that is being 'edited'. This is important because most operations depend on this selection, including Open, Save, and Export.

I recommend that you apply one of the built in themes and use it as your basis when creating a new theme because the resulting theme file will be much smaller.

When you change the selected style, the contents of the tool pane will update to reflect the current selection.

Using the Color Palette

Once the page is displayed and the style is chosen you can begin editing. The color palette shows all of the colors in use in the style sheet and the number of styles that use each color. To change a color, click the new color button.

For example, to change #356a5 in the 126 styles it appears in to some other color, click the #356a5 'New Color' button.

The following dialog will appear:

Notice that all the styles are listed. Most of the dialogs do the same thing. You can click an individual style and edit it individually or you can enter a color or click the colored button to use a color picker. If you type 'Red' and click save, all of the styles will be modified to use red instead of #356a5.

If you don't like the way it looks, click the Original Color button and you will be prompted to revert to the original color.

Using the Inspector

If, like me, your eyes aren't good enough to just see that the color of the text we changed in the previous example was #356a5, you can use the inspector tool to find the styles that go with the elements you want to alter. To open an instance of the inspector, click the Inspector button on the navigation bar. You can have more than one inspector open at a time. The tool looks like this:

The inspector has to modes available via the mode menu, MouseOver and ActiveElement. With MouseOver, the contents of the Inspector will change as you move the mouse over the page to represent the element under the mouse. Left clicking will lock the display and unlock the display. Active Element updates the window whenever you click on an element.

Note the Navigation Blocked button on the main window. This is a toggle and when it says Navigation Blocked, clicking on hyperlinks will not cause navigation. This allows you to use the inspector to look at hyperlinks. Occasionally, it is difficult to find the style you want using this tool, for example, some of the gradients that have other elements floating over them are hard to get at, and other elements have hover styles that obscure the underlying styles when using a mouse. The IE Developer Toolbar makes a great compliment to skinner when such a situation arises.

In this example I have clicked on the Title Area Image. It uses a style called .ms-titleimagearea. This style is defined in core.css, but not in the built in Granite theme used in this example. As a result, I am prompted to add the style.

Choosing yes causes the style to be added to the style sheet and the Style Editor Dialog appears. I'm going to hide any elements that use this style by entering display: none; and clicking save.

Note that you must enter css as text in this window. Skinner does not include a visual style builder. The reason for this is that the one in Visual Studio is excellent and is even included in the free Visual Web Developer Express Edition.

The Image Palette

From the View menu select images. The tool pane will change to show the images used in the currently selected style sheet.

Most of them are very small elements used as repeating backgrounds with dimensions usually 1px wide. However, the palette shows the name of the image and a thumbnail. Clicking the url opens the image editor.

The editor gives you the option to save the image to disk for editing, replace the image with a different image of your choosing and the ability to open the style editor for the style that includes this image. In this example we will replace the image. Clicking replace opens a file dialog that you can use to pick the new image.

I also want to specify that this image will appear at the bottom in the background. When I chose replace the style was updated and the Image Viewer closed. Reopen it and click the link to open the style editor.

Edit the style to specify the desired positioning.

Note that the url to the image is wherever the file is that you selected. None of the preceding examples has actually done anything to the CSS on the SharePoint server. Everything is taking place locally. When the time comes to create the actual theme everything gets fixed up nicely. This involves copying the images to the theme folder created on export. So, don't move your images or the copy won't work.

Finally, if you decide that you want to remove an image that exists in the core.css, you must specify background-image: none. The way css works is by looking at the last rule in the list. Themes simply override what's in core.css. If you just delete the rule, whatever is in core.css is applied.

The Matching Styles Palette

The Matching Style Palette is the final tool pane available via the View menu. It simply displays a list of classes in the current style sheet that apply to elements on the current page. This view can make finding the style you want to affect much easier and is also a pretty good way to explore the styles used on given types of pages. When you take the next step in branding and start creating custom master pages, content pages, etc., you will want to use the correct styles if you want users to be able to use any of the built in themes to good effect.

Saving Your Work and Navigation

As noted in the discussion of the image palette, all of these edits are actually taking place locally and have no effect on the server. In fact, they aren't even persisted until you save your work. You have the option of doing so in the file menu.

You will want to do this often because whenever you navigate, the styles will revert to what is on the server. If you toggle the Navigation Blocked button and click a link you will receive a warning.

Save your work before navigating. Use file open and reapply your changes. This will allow you to create styles visually for the rules that had no match on the previous page.

Exporting the Theme

Select Export Theme from the File Menu. Give your theme a name that will be used on the SharePoint server, pick a directory, and viola! You have a theme. Now all you have to do is install it.

Installing the Theme

To add the theme to a site, copy the created directory to:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

Open:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML

Copy the bottom section and modify it as appropriate (it's very simple).

Recycle your app pool and bada-bing! Go to your site settings and apply the theme.

Note: When you apply a theme, it gets copied for your site. If you subsequently edit it, you need to recycle the app pool, apply a different theme to your site and reapply your theme with any changes!

That's it. I hope you like it. I think it works pretty well. The themes for this site were created using this tool.