Two years ago this week I released a simple little theme creation tool that was birthed quickly and out of necessity. I've been meaning to put out a new version for awhile now, but once I started, I couldn't stop adding features and changing this around. Today I am pleased to announce the release of a major new version of Elumenotion SharePoint Skinner. I believe, and I hope you will agree, that the new version is the ultimate tool for branding SharePoint sites on both WSS and MOSS servers with CSS.

The new version exports plain old CSS as well as wsp files for both WSS style themes and MOSS publishing site style library features. All you have to do is deploy the packages and activate the features!

You can download the new installer from here: Skinner Setup.msi.

Getting Started

Simply download and install the msi program. The only thing you need on your machine is Windows, the .Net 2.0 framework, and Internet Explorer (preferably IE 7 or later). Skinner uses wspbuilder to package the exported features, css files and images into a web solution package. If you are using a 64 bit OS you must replace the cablib.dll with the 64 bit version which you can download from CabLib.dll for x64 systems (version: 10.5).

Once you've got that taken care of, launch the program, enter the address of the site you want to use as your basis and click Go.

Once the page loads, Skinner will slice and dice the html, styles, colors, and images.

The Inspector tool is also the editor. Every tab supports editing and creation of new style rules. Click the Inspector button to open it.

The HTML Tab

The first tab of the Inspector has a tree-view of the html document. You can explore the elements and their styles by navigating through the tree or by clicking the browser. The Inspector will decorate the current element with a blue border, and display the element's HTML and, more importantly, show the selectors that affect the element and style properties inherited, embedded, or inline.

The Styles pane shows the properties of a given set of selectors as they exist in the current document. This is a major difference compared to the previous version where you had to specify a single style sheet as the basis for your edits. As seen below, the .ms-Toolbar rule has properties in effect from three style sheets, core.css, the Lacquer theme, and the current skinner project.

The Matching Styles Tab

The Matching Styles tab displays a filtered subset of the selectors in the current style sheets that match the page you are inspecting. When you select a selector, Skinner displays a list of matching elements, and they, in turn, both highlight the corresponding element on the page and sync to the HTML explorer tree-view.

The All Styles Tab

The All Styles Tab simply displays all of the styles in the current set of style sheets.

The My Edits Tab

The My Edits Tab displays every edit made in the current project and allows you to create new edits or remove existing edits.

The Colors Tab

The Colors Tab displays color swatches for every color in the current style sheets, filterable to the colors active on the current page. Clicking on the page will cause selection of the underlying color if possible. The following shows selection of #E3F0F2 from the global breadcrumb area.

You can change the color for only the styles affecting the current sheet or for all styles in the current set of style sheets.

The Images Tab

The Images Tab shows a filterable set of the images and previews for each. When you select an image, the inspector will highlight it in the browser and sync to HTML explorer and the Matching Styles tabs.

You can download any image and open it with the default program for the image type for editing. (I like Paint.Net) You can replace the selected image with a new image of your choice in all styles in which the original appears.

The Style Editor

You can open a style complete with all of its current properties and add it to your project or you can select just the properties you want to override to keep your new theme lean and mean. Either click Edit Image to copy everything or check the appropriate properties and click the link in the styles pane.

The Style Editor itself is easy to use and validates your CSS against the CSS 2.1 specification, making it easy to get the syntax correct and keep your syntax valid. You can enter the CSS directly and use a property builder.

Navigating Between Pages

You do not need to save your work when navigating between pages. Skinner will maintain your work and apply it each time you change pages automatically until you close the application.

Saving Your Work

Skinner now includes a proper document format. You can save your work at any time to a *.skinner file. Double clicking the file will open Skinner, navigate to the page you were on when you last saved, and apply your edits.

Exporting Your Work to SharePoint Server

When you are ready, use the Export Wizard to export your project as plain old CSS and images to a folder, as a WSP packaged Theme feature, or as a WSP packaged feature that deploys to the Style Library.

Note that if you create a Style Library feature, you must activate the Publishing Infrastructure before activating the features.

More to come, but for now, play with it and let me know what you think!

--Doug Ware

Author: Doug Ware