Category Archives: eLumenotion SharePoint Skinner

SharePoint Skinner – Yet More New Features

First off, thanks to those of you who have provided feedback so far. I am pleased that you like the tool and your feedback helps make it better! Keep it coming! I want to hear all about your adventures with SharePoint CSS.

One thing a couple of you mentioned was that the new colors tab lacked the before and after colors that the first version had. So, I’ve added this feature to the new version and also provided the ability to sort either by the current or the original color palette!

As before, you can easily revert to an original color by clicking the color swatch.

Here is the default sort.

Here is the same palette ordered by the original color.

I will put up some videos and some themes created using the new version eventually, but before that I have one more set of features that I want to add before Elumenotion SharePoint Skinner can live up to the boast of ‘The Ultimate SharePoint Branding Tool’.

Getting Started with the New Version of Elumenotion SharePoint Skinner

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

Update on the Permission Denied Problem with Images in eLumenotion SharePoint Skinner

Sorry for not posting for the last couple of weeks. I’m in chilly Minneapolis, Minnesota finishing up the video edition of Microsoft SharePoint 2007 for Developers class for AppDev. More on that in a future post!

It turns out that the location of theme images does not allow anonymous access by default. The reason I didn’t notice this before is that I generally use the blog site as the basis when making themes and it is configured for anonymous access. The next version of the tool will replace the picture box load-async mechanism with something that will allow passing of credentials. In the meantime, if you are having this problem, try enabling anonymous access for your target site and see if the images appear.

–Doug Ware

Skinner is Now on CodePlex

Well, it’s been over a month since I introduced the tool and after over 1200 downloads it looks like the tool works pretty well. So, I am taking the plunge and putting the source online for all to see on CodePlex. I am also planning a release soon that will export themes in the format that the Community Kit for SharePoint: Enhanced Blog Edition uses. I’m not sure if that will go under CKS or just be a release in the project I just set up, so stay tuned for more info!

Enjoy.

–Doug

SharePoint Skinner Overview

NOTE: This is for the OLD version!
If you have downloaded the tool since September, 2009 these instructions are out of date. For the new and far better version, see
–> this post <– !!!

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 FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES

 

Open:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033SPTHEMES.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.

Author: Doug Ware