Changing Gradient Images in Sites Created with Windows SharePoint Services

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:///_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.

Print this post