Not much going on in the office today, so I figured I’d document a SharePoint theme customization technique. This example was taken from this excellent SharePoint blog post. I just wanted to make sure I had this captured so I wouldn’t loose it.
A SharePoint theme is a set of fonts, graphics, and colors that make up the appearance of the site. An approach to develop a new theme is to customize an existing theme. This allows you to start with a working theme and then make modifications, shortening the amount of time it takes to develop a new theme.
A SharePoint site to which a theme has been applied will have a _themes folder when viewed within SharePoint Designer. When the _themes folder is expanded the theme that has been applied will appear as a sub folder. When a theme is applied to the a SharePoint site a copy of all the files that make up the theme are copied into the content database in the _themes sub folder.
Note: This is an important point. Because a copy is made of the theme’s folder ohn the web server and placed in the content database, any changes you make to the CSS of theme files within SharePoint designer will not be used on anything except the site you are currently working with. You have to manually make the same changes in the theme’s folder on the web server if you want the theme modifications to be used when a new site is created.
In addition to all the files from the theme’s folder, the theme.css and the mossExtension.css files are merged to create a new file that is stored in the content database. The file is named XXXX1011-65001.css, where the XXXX represents the first four letters of the theme’s name.
The XXXX1011-65001.css style sheet is the only CSS file applied to the site by the theme. It is applied right after the CORE.css style sheet is applied by the default.master page. Any core styles redefined in the theme’s style sheet will override the styles defined in the CORE.css. This gives you the designer complete control over the CSS applied to the pages on your site.
So to customize a theme, the first step is to examine the themes that come with SharePoint and find one that closely matches the theme you want to create. For this example, a new theme will be created called “My Theme” based on the Classic theme in SharePoint. In the new theme the Search area gradient will be changed to gray instead of yellow.





