Changing Gradient Images in Sites Created with Windows SharePoint Services

• Introduction to gradient images
• Elements to change
• How to change gradient images
• See it in action
• Additional resources
   

Introduction to gradient images

Default Web sites created with Windows SharePoint Services contain some elements with gradient colors that you might want to replace with your own. The default home page top menu bar and the title bars for Web Parts have gradient images behind them, as do the toolbars on the tops of list and document library pages and the rich text editor toolbar on forms.

These gradient colors are determined by the Theme applied to the site. The Theme specifies a graphic to place in the background of the table cell that makes up the toolbar. For example, the top menu bar has an image that is 1 pixel wide by 28 pixels high in the background of the table cell that contains the top menu items (such as "Home", "Documents and Lists", and "Create"). The graphics are located in the http://<servername>/_layouts/images directory in your Web site.

Tip: Because files in the _layouts directory are hidden and not accessible at the file level from the Web site, if you want to use them to start with and then edit them, you should browse to them first, then right-click on them and then save them to your hard drive.

Elements to change

Gradient images are changed in Themes, so you will need to know what styles need to be changed in your custom Theme in order to change the gradient image.  The table below shows the size of image needed as well as the corresponding styles to change in the custom Theme.

Element	File Name	Image Size (in pixels)	Example	Styles to Change in Theme
Top menu bar	topgrad.gif	1 x 28		.ms-bannerframe, .ms-GRheader, .ms-stormefree
Web Part title bar	partgrad.gif	1 x 18		.ms-wpheader
Toolbar on list and document library pages	toolgrad.gif	1 x 22		table.ms-toolbar
Rich text editor toolbar in selected state	rtebnsel.gif	1 x 20		.ms-rtetoolbarsel
Rich text editor toolbar in hovered state	rtetoolbarhov	1 x 20		.ms-rtetoolbarhov

How to change gradient images

Here are the steps to follow to change gradient images in your custom Theme.

1. Create the graphics files you want to use to serve as the background image to replace the gradiated images already used on your site. The files can be .jpg or .gif files.
2. Open your site created with Windows SharePoint Services in Microsoft Office FrontPage 2003.
3. Import your new graphics files into your site by clicking the Import option from the File menu, then clicking the Add Files button, and then following the prompts.
4. Click Theme from the Format menu. The Theme task pane opens.
5. Click the Theme you want to customize, and then select Customize.
   
   
    
6. The Customize Theme dialog box opens. Click the Text button.
7. The Customize Theme styles dialog box opens. Click the More Text Styles... button.
8. The Style dialog box opens. Click the name of the style you want to change, and then click the Modify button.
9. The Modify Style dialog box opens. Click the Format button, and then click the Border option.
10. The Borders and Shading dialog box opens. Click the Shading tab.
    
    
     
11. Click the Browse button on the Borders and Shading dialog box. Locate and then click on the image you want to use as the background of the table cell. Click the Open button.
12. Click the OK button 5 times.
13. Click Yes when asked if you want to save your changes. The Theme now specifies use of your custom gradient image. You can now view the changes on your Web site.

See it in action

The human resources sample site has custom gradient images for the top menu, the Web part title bars, and the forms toolbars.

Additional resources

	Applying a Theme to a Site Created with Windows SharePoint Services
	Customizing Themes for Sites Created with Windows SharePoint Services