共用方式為

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.

image

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:

image

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. 

image

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”.

image

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.

image

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”.

image

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.

image

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.

image

In the More Colors dialog, click the “Select” button with the eyedropper icon to select a color.

image

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.

image

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

Download IE 8

Comments