It has been pointed out that the styles I created for this site aren’t, well, stylish. In my defense, my main focus when I created the theme was debugging Skinner. I also will be further branding the site by changing the master pages soon. On the other hand, for a trainer and developer my artistic skills are completely average. That’s why I need a visual theme designer in the first place!
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
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
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
NOTE: This is for the OLD version! For the new and far better version, see this post.
With the improvements to the security model in WSS 3.0 and the addition of blog and wiki site templates many more people are using SharePoint for public facing sites. Usually, they will want to brand the site and radically alter the look and feel of the site to make it look like something very different from the default often with the goal of obscuring the underlying SharePoint as much as possible. There are two common approaches to meeting this goal. You can use cascading style sheets and you can alter the actual pages via master pages and content pages. For a serious branding effort you will usually do both.
There are a number of approaches you can take to affect the styles. You can override styles using content editor, you can use the AlternateCSS attribute in the site’s definition, you can attach a style sheet using SharePoint Designer, you can place html <link> elements in your master pages, and you can create themes. Each of these approaches has its advantages and disadvantages depending on your requirements, but in my opinion the latter is the most robust option. I will expound on why I believe this in another post. The topic of this post is a tool I created to make skinning a site via css or a custom theme much easier.
If you have attempted to override the styles on an out of the box SharePoint site, you know that it isn’t a very easy thing to do.
The core.css file that contains the basic rules has 979 different style rules.
The core.css file uses a palette of 132 colors and 143 images.
The default page of a newly provisioned team site uses only 61 of those rules.
So, unless you have branded a lot of SharePoint sites and are intimately familiar with core.css and the default master pages and page layouts, just figuring out where to start modifying can be a daunting task. With SharePoint Skinner you can create new styles by altering existing styles in a WYSISWYG fashion. If you are not expert in writing CSS I recommend complimenting Skinner with a good style builder like the one included in most versions of Visual Studio including the free Visual Web Developer Express Edition. I also recommend the free Internet Explorer Developer Toolbar to help find those hard to locate style elements. Skinner includes an inspector tool that helps with this, but the toolbar is a great help when the built in inspector comes up short!
You can download the installer here. Once you’ve got it installed, come back and read the next posts to learn how to use it.
Author: Doug Ware