Customizing SharePoint Themes with SharePoint Designer 2007 and IE8
It turns out to be pretty easy to customize the look and feel of a SharePoint site using SharePoint Designer 2007 and Internet Explorer 8. Using IE8, you can easily find the CSS class for a particular element and modify it, and SharePoint Designer 2007 makes it easy to make changes to the styles for a site. This is really cool because you can do this even when you don’t have console access to the box or administrative rights to deploy new features.
Apply an Out of Box Theme to Your Site
To get started, create a new site in SharePoint. I am going to create a site called “ThemeDemo” using my MySite, which I don’t have administrative access for in Microsoft’s internal network. Go to Site Actions / Create / Sites and Workspaces” and create a new site called “ThemeDemo” using the “Team Site” template. What you will end up with is the familiar SharePoint look and feel.
Open up SharePoint Designer 2007. On the File menu, choose “Open Site” and use the URL to the site you just created. The URL I will use is “https://my/sites/kirke/themedemo”. The thing to notice is the Folder List pane, it will look like this:
The next step is to apply an out-of-box theme to the site. Go back to Internet Explorer. Go to Site Actions / Site Settings. Look under the “Look and Feel” column and you’ll see a link to manage the Site theme.
The will pull up a new page where you can select from a set of pre-defined themes. I chose the “Reflector” theme. Once you have chosen, click “Apply”.
Now that your site has a theme applied to it, you might want to customize it a little bit. For instance, the “Recycle Bin” link is green, but the recycling trash bins in my neighborhood are blue, not green. Let’s see how you can make modifications like this.
Customizing an Out of Box Theme
Internet Explorer 8 introduces the Developer Tools feature that enables you to inspect a web page’s various components such as HTML layout, CSS, images, JavaScript DOM, etc. You can find this in Internet Explorer 8 by clicking Tools / Developer Tools or simply hitting F12 on a web page to bring up a new window. In the Developer Tools window’s menu, choose “Find / Select Element by Click”. Then switch back over to the IE8 window and click the Recycle Bin link. The Developer Tools window should now jump to the HTML that is used to render the link, and the pane on the right shows the CSS style being applied.
We can use the information in this window to customize the theme. At the bottom right, we see that the file Refl1011-65001.css contains a CSS rule “TABLE.ms-recyclebin TD A” with a color value of #008800. We’ll customize this value to change the Recycle Bin link color to blue.
Go back to SharePoint Designer 2007 and hit F5 to refresh the site. You’ll see a new folder in the Folder List called “_themes”.
Open that folder and expand the Reflector node. Scroll down a bit and you’ll find a file, Refl1011-65001.css. Open that file and look for the CSS rule “table.ms-recyclebin td a” and click on it. You’ll see a wealth of information about that style.
Now, it’s as simple as going to the CSS Properties and changing the color. Perhaps you want the color of the link to match another color elsewhere in the page. It’s as simple as going to the CSS Properties pane and clicking on the color property. Choose “More Colors" in that dropdown.
In the More Colors dialog, click the “Select” button with the eyedropper icon to select a color.
In IE8, hover over the element that has the color you want. You will see the color change in the More Colors dialog from green to whatever color you are hovering over. When you finally pick the color you want, click and the color will be chosen. Click OK to choose that color, and the new color will be reflected in SharePoint Designer 2007. Finally, click the Save button in SharePoint Designer 2007 to apply the change.
Go back to IE8 and refresh the page to see the change.
Does That Change All the Sites?!?!
When you use this method to customize the theme for a site, you are only customizing the current site you are working with. You can verify this by creating a new site and choosing the Reflector theme like we did previously, you’ll see that the Recycle Bin link is still green. If you decide you want to undo all of your modifications to the current site, you can go to the Site Settings menu and choose an out of box theme… all of your modifications will be discarded.
What If I Want to Create a Reusable Theme?
If you want to create a custom theme and make it available to others, see the post “Create a custom site theme and make it available to others”.
For More Information
Create a custom site theme and make it available to others
CSS Reference Chart for SharePoint 2007
SharePoint Skinner – a cool tool to make local edits to a page and save to create a custom theme
Implementing a Brand in a SharePoint Server 2007 Publishing Site