CCSD Website Theme Settings & Visual Mapping

SharePoint Theme Settings

The theme settings screen in SharePoint 2010 is pictured below. The Customize Theme section allows you to choose custom theme colors for your site. As you choose your colors, SharePoint will generate several shades of that color (ranging from lightest to darkest) and will update the chart in the upper left to show you the full set of colors in your theme (which we’ve labeled to help you identify them).

IMPORTANT: Some visual elements (for example, the Alert box) in the CCSD website do not participant in themes. As a result, their colors and fonts will not change when you apply a new theme. Theme-able Visual Elements on the CCSD Website

The CCSD district website is pictured below. The main visual elements that participate in SharePoint themes are numbered for reference. The legend explaining the numbers begins on the next page.

IMPORTANT: Some SharePoint elements not shown here (for example, the Site Actions menu) participate in themes as well and will be changed when a new theme is applied.

REMEMBER: Most web browsers cache (save for a period of time) the colors, fonts, and images of websites you visit. Caching makes browsing faster by not requiring those items to be re-downloaded with every visit to a site. When you change your site theme in SharePoint, you must clear your browser cache. Otherwise you may still see the old colors, fonts, and images. Page 5 in this document has instructions for clearing the cache in Microsoft Internet Explorer.

a. Left Nav Menu Background* 1. b. Left Nav Sub Menu Item Background (Darker) a. Website Body Text c. Left Nav Sub Menu Item Border (Medium) b. Website Footer Text d. Left Nav Sub Menu Item – Selected c. Quick Launch Text (links) (Darkest)

e. Web Part Header Background*

2. f. Quick Launch Header Background*

a. Left Nav Menu Item Text (links) 6. b. Web Part Header Text a. Top Nav Menu Background* c. Left Nav Sub Menu Item Text (links) b. News Rotator Border (Medium) d. Quick Launch Header Text c. News Item Border (Medium)

d. News Rotator Image Border (Darkest) 3. e. Web Part Border (Medium) a. Page Title f. Top Nav Menu Item Background (Lighter)

g. Top Nav Menu Item Border (Medium)

4. h. Separator Line between Quick Launch Items (Medium) a. Top Nav Menu Item Text (links)

b. Top Nav Sub Menu Item Text (links)

a. Page Content Background 5. b. News Rotator Item – Not Selected a. Selected News Item Background (Lighter)

b. News Rotator Background

a. Website Background* 10.

a. Website Header Graphic*

9. 11. 12.

13. * These elements are generated by an image (rather than a true, raw color embedded directly on the page), so the new theme color is blended into the original image. The result of blending the new color in is that it will not be the exact color you choose. You will need to experiment with the results to find the best possible color.

16. 17.

1. Page Title (Text/Background – Dark 2) 8. Left Nav Menu Item Text (links) (Text/Background – Light 1) Top Nav Menu Item Text (links) (Text/Background – Light 2) 2. Website Background* (Accent 4) 3. Hyperlink (Hyperlink) 9. News Rotator Background (Accent 5) News Rotator Borders (Accent 2) 4. Page Content Background* (Accent 3) News Rotator Selected Item (Accent 5) 5. Website Header Graphic* (Accent 6) News Rotator Item – Not Selected (Accent 3) 6. Left Nav Menu Background* (Accent 1) 10. Web Part Header Text (Text/Background – Light 1) Web Part Header Background* (Accent 1 7. Top Nav Menu Background* (Accent 2) 19. As mentioned on page 2, not all visual elements are theme-able, and some will not be affected when you change your site’s theme. Here are a few of those elements:

 The “hero graphic” (picture with the words “Our Mission” on page 2) is not themed.

 For school sites, if contact info has been set in the Contact Information list, it will appear above the right side of the hero graphic. The text color for that contact info is semi-transparent and is not themed.

 Nothing alerts-related is themed (by which we mean CCSD alerts, not the alerts that are built into SharePoint).  The “Go” button next to the search box is not themed.

 The Facebook and Twitter icons in the header are not themed.

20. How to Clear Browser Cache for Microsoft Internet Explorer (versions 6, 7, 8, and 9):

1. Open the Internet Options window. (In Internet Explorer 6-8, this is under the Tools menu. In Internet Explorer 9, it’s under the gear symbol in the upper-right.)

2. Click the Delete… button under “Browsing History.” 22.

23. Check the Temporary Internet Files option, and uncheck all the others. Click Delete. Any colors, fonts, and images which have been cached by your browser will be deleted.