Create a custom site theme and make it available to others - SharePoint for End Users

转自：http://sharepoint.microsoft.com/blogs/GetThePoint/Lists/Posts/Post.aspx?ID=122

 

 

A theme in Office SharePoint Server is a set of fonts, colors, graphics, and other decorative elements that provide a consistent appearance to your site. A site comes with a set of themes that enable you to quickly change the appearance, based on your organization's needs. (For more information, see the article Change the site colors or theme on Office Online.)

But what if you want to create your own theme in SharePoint and you want to distribute that theme to others in your organization? It’s possible, just not all that easy. For starters, you’ll need to log onto the server that hosts your SharePoint sites and make a few changes to the files that reside there. Additionally, you’ll need to use SharePoint Designer 2007 to modify some of the theme files and preview those changes on your site. If you don’t have these tools and permissions, you may need to contact your server administrator..

I recently went through this process to create my own custom theme called “My Custom Theme.” It has a gray background at the top instead of the default yellow background as you can see below. The larger benefit here is that anyone in my organization can apply this theme to his or her SharePoint site.

 

 

Here are the steps you can follow to create your own custom theme and make it available to others in your organization. For this example, I created a new theme called "My Custom Theme" based on the Classic theme in SharePoint.

1 - Identify a theme that closely resembles the theme you want to create

 

The first step is to first take a look at the existing themes available in SharePoint and determine if one of those themes closely resembles the theme that you want to create.

1. Go to the SharePoint site where you want to create the theme (log on, if necessary).
2. Click the Site Actions menu and choose Site Settings.
3. Under Look and Feel, click Site theme.
4. Look through the themes until you find one that closely resembles the theme you want to create. Note the name of the theme so you can find the files you need for later steps.
5. For this example, I know that I want to use the Classic theme.
6. Cancel out of the Site Theme page.

2- Create your custom theme folder

1. Log onto the server that hosts your SharePoint site and browse to the following folder:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
2. Copy the folder that corresponds with our theme. In my case, I copied the Classic folder.
3. Paste this into this same THEMES folder, so that you end up with a Copy of THEMENAME folder. In my case, I ended up with a Copy of CLASSIC folder.
4. Rename this folder to MyCustomTheme.

3 - Modify the theme setup information file (INF)

1. Open the MyCustomTheme folder and locate the name of the theme you chose as a starting point for your new theme. For example, CLASSIC.INF.
2. Rename CLASSIC.INF (or the INF file for the theme you chose) to MYCUSTOMTHEME.INF (yes, please use upper case).
3. Edit MYCUSTOMTHEME.INF in Notepad (or your preferred text editor).
4. Perform a search and replace in this file, replacing every instance of Classic (or the theme you chose) with MyCustomTheme.
5. Save and close MYCUSTOMTHEME.INF.

4 - Modify the SPTHEMES.XML file

1. Browse to the following folder:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033
2. Locate SPTHEMES.XML.
3. Edit SPTHEMES.XML in Notepad (or your preferred text editor).
4. Add the following text after the <SPThemes> tag so that it matches the other templates in this file:
   <Templates>
    <TemplateID>MyCustomTheme</TemplateID>
    <DisplayName>My Custom Theme</DisplayName>
    <Description>My Custom Theme.</Description>
    <Thumbnail>images/mycustomtheme.gif</Thumbnail>
    <Preview>images/mycustomtheme.gif</Preview>
   </Templates>
   
5. Save and close SPTHEMES.XML.
6. Reset the server so that your theme shows up on the Site Theme page in SharePoint. You can reset the server by entering the following text in the Start > RUN line:
   iisreset computer name
   (where computer name is the name of the server)

5 - Apply your custom theme to your site

1. Return to your SharePoint site.
2. Click the Site Actions menu and choose Site Settings.
3. Under Look and Feel, click Site theme.
4. In the list of themes, select My Custom Theme.
5. Click Apply.
   Your site will look no different from the Classic theme since we based your custom theme on it. The next step is to customize this theme.

6 - Customize your theme in SharePoint Designer

1. Launch SharePoint Designer 2007.
2. Click File > Open Site.
3. Specify the site in the Site name field, for example http: //sitename/TeamSite, and click Open.
4. In the Folder List pane, open the _themes folder and then our custom theme folder, MyCustomTheme.
5. To customize the look and feel, the colors, and the layout of elements, open the cascading style sheet associated with this theme, MyCu1011-65001.css. (This file was created when you applied your custom theme to your site. It overwrites the site collection’s core.css by loading after that file when the page is viewed. The name of this file is always the first four characters of your custom theme name followed by 1011-65001.css.)
   Tip: Working with style sheets on a SharePoint site can be tricky because there are so many elements to work with. I recommend taking a look at the article Cascading Style Sheets Class Definitions on MSDN and definitely Heather Solomon's CSS Reference Chart for SharePoint for a description of these. Then take a look at the article Modify a style on Office Online.
6. When finished, save the MyCu1011-65001.css file.
7. To change the images associated with the theme, open the desired .jpg or.gif files in this same folder. For this example, I modified the siteTitleBKGD_classic.jpg image. This image displays in the upper right corner of the page. I changed it from a yellow gradient to a gray gradient.
8. To see the changes, you can preview your site in SharePoint Designer or log onto your site directly and take a look.
9. If you’re finished making changes, this is probably a good time to take a screen capture of your web site and save the image with the filename mycustomtheme.gif to your desktop, for example. We’ll use this image later on to serve as the preview and thumbnail of the custom theme.
   Tip: For best results, save this image with the dimensions 375 x 231 as this is what it will preview as on the Site Theme page in SharePoint.

7 - Apply your changes to the custom theme on the server

You might be wondering why these final steps are necessary since you already customized and saved your theme. Well, actually the theme folder in SharePoint Designer is a copy of the original theme on the server (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\MYCUSTOMTHEME).

So, if you or someone else in your organization applies this theme to your site or to another site, it will read from the original theme on the server and not the copy you’re working with. Your changes will appear to have been lost!

For this reason, the last step is to copy your customized theme files to the theme folder on the server.

1. In SharePoint Designer 2007, copy the contents of the MyCu1011-65001.css file, if you made changes to it.
2. Log on to the server and browse to the following folder:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\MYTHEME
3. Open the theme.css file in a text editor, like Notepad.
4. Paste the contents copied from MyCu1011-65001.css into this file, overwriting all of its contents.
5. Since in my example, I also updated an image in this theme, I copied the file siteTitleBKGD_classic.jpg to this folder as well, overwriting the original.
6. One last file! Remember the mycustomtheme.gif image we created, the screenshot of our theme? This needs to be copied to the following folder so that it appears as a preview and thumbnail for the theme:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
7. Reset the server so that the theme becomes permanently available on the Site Theme page. Again, you can reset the server by entering the following text in the Start > RUN line:
   iisreset computer name
   (where computer name is the name of the server)
8. Return to your site and test your new theme by reapplying it or by applying it to another site!

As a result of these steps, you and others in your organization can now choose the My Custom Theme on the Site Theme page in SharePoint.

And this will apply the theme look and feel to any SharePoint site.

Happy theme creation!

Tom
SharePoint End User Content Team