-->
Hi Everyone, I am Anweshi Deverasetty. I have been working as an Associate Consultant in Microsoft Services Global Delivery from past 4 ½ years. I have around 9 years of experience in Software Industry and have been extensively working on SharePoint. Currently, I am working on a project which involved migration of application from SharePoint 2007 to 2010, implementation of Pivot Viewer, BCS, FAST Search etc. This blog is an outcome of the effort that I put in to develop and deploy Themes.
Happy Reading!! :)
However, the point is that the SharePoint Designer tool can make some development tasks easier. The important features are − SharePoint Designer can be used for a variety of designer functions for SharePoint, including creating and editing sites, pages, lists, and content types. Theme slots tool to come out shortly for sharepoint. Caps would apologize for his actions and keep his head down heading into his debut season, but the growing pains of being a professional didn't end with what was happening outside of the game.
Our application involved migration of site collections on a Web application from SharePoint 2007 to 2010 environment. As we wanted to perform Visual Upgrade on site collections on an as-needed basis at the user's request, we performed migration using PreserveOldUserExperience in stsadm. This will do the data migration but preserve the SharePoint 2007 look and feel. Later, Visual Upgrade can be used to upgrade to SharePoint 2010 look and feel. You can find more about PreserveOldUserExperience here on MSDN.
The migration basically involved 3 main steps—data migration, Visual Upgrade, and making our custom components compatible to work with the new version. After we were done with data migration, performing Visual Upgrade was simple, it was just performing Visual Upgrade from Site Settings->Site Collection Administration as shown here (click for a larger version):
Figure 1. Visual Upgrade in Site Settings
But just performing a visual upgrade does not make things work. There is more you need to think and work before you go for Visual Upgrade. The first thing is to work on master pages and themes. Before designing themes, you should decide if you want to go with themes or with cascading style sheets (CSS). It is always a good idea to go with one approach rather than using both because, themes might overwrite CSS sometimes and vice versa. The next sections will show you how to create and deploy a theme.
Themes have been drastically changed in 2010. The new 2010 themes use an entirely different design. SharePoint 2007 themes used CSS and images while the new 2010 themes use the .thmx format. This means themes can be easily created using PowerPoint or any other tools which will be discussed later in this article. You will notice that the old SharePoint 2007 themes are no longer available in SharePoint 2010. When you perform migration without Visual Upgrade, the old themes are available to support the 2007 look and feel.
There are set of predefined themes available, which you can view from Site Settings->Look and Feel->Site Theme. Note that in SharePoint Server, you can customize the theme in the browser. In SharePoint Foundation, this functionality is not available. Here is a glimpse of the Site Theme in SharePoint Server (again, click for a larger view):
Figure 2. Set Theme in Site Settings
SharePoint 2007 involved some effort to create themes as we had to deal with CSS and images. But as the themes design is changed completely in 2010, it is rather easy. Following are set of tools available which will make life easier. Here are the different ways of creating Themes.
Customize Theme Feature
Set Theme in Site Settings under the Look and Feel section is a default feature available in SharePoint Server, which will help you to customize themes. In Figure 2, you can see the option Customize Theme, which will help you to customize the theme you selected. Whenever you select a predefined theme and customize it, it creates a new theme called Custom and all the changes get applied to this custom theme. So every time you modify a predefined theme, the Custom theme gets overwritten.
Now, if you want to preserve this theme and download it locally, here are the steps that will help you to download this customized theme:
- View the HTML source of the page and search for /_catalogs/theme/Themed/uniqueHexId/corev4-uniqueNumber.css
- From the browser, navigate to http://yourServer/_catalogs/theme/Themed/uniqueHexId/theme.thmx and download the file.
- Rename the file MyCustomTheme.thmx
Theme Builder
You can also create themes using Theme Builder, which is available at http://connect.microsoft.com/themebuilder . You can select an existing theme or create a new theme using this tool. Here is the screenshot of Theme Builder:
Figure 3. Theme Builder UI
PowerPoint
Themes can also be created using PowerPoint. On the Design tab under Colors, select Create new theme colors. Customize it and save it as a thmx file. Below is a screenshot of the Create New Theme Colors Dialog:
Figure 4. PowerPoint Theme UI
There are multiple ways to deploy themes both through code and through the UI. The following are the different ways to deploy themes.
Theme Gallery Deployment
You can upload the thmx file that you created in PowerPoint or Theme Builder into the Theme Gallery. Deploying a theme to the Theme Gallery holds well if you're working for a single site collection. If you need it to apply to multiple site collections, see the next method of deploying using a Feature. You can access the Theme Gallery from Site Actions->Site Settings->Themes. Once you upload it, you can go to the Set Theme screen, as shown in Figure 2 above, and set the theme. You can see the Theme Gallery below:
Figure 5. Theme Gallery
Feature Deployment
It's always a best practice to deploy any artifact as a Feature. This works well for multiple site collections. Here is an example of the Feature and Elements XML files.
Feature.xml
Elements.xml
For more information about deploying and installing a Feature, see Installing or Uninstalling Features. Once the Feature has been installed and activated, it will show up in the Theme Gallery that was shown in Figure 5.
Object Model Deployment
You can deploy the theme programmatically using the ThmxTheme class in the Microsoft.SharePoint.Utilities namespace. The ApplyTo method applies the theme to a site collection. Here is a code snippet:
C# Code
-->Composed looks are out-of-the-box themes that are included in SharePoint and SharePoint Online. Apply composed looks, including colors, fonts, and a background image, to your SharePoint and SharePoint Online sites by using the SharePoint theming engine.
Important
This extensibility option is only available for classic SharePoint experiences. You cannot use this option with modern experiences in SharePoint Online, like with communication sites.
To apply a composed look to a SharePoint site, select Site Settings > Look and Feel > Change the look. You can then use the Change the Look Wizard to customize the colors, fonts, master page, and background image of a composed look. The Change the Look Wizard copies, transforms, and stores CSS in SharePoint's content database. It also recolors images and stores them in the content database.
SharePoint theming engine
You can use the SharePoint theming engine to apply colors, fonts, and a background image to a site by associating those elements with a master page.
In SharePoint and SharePoint Online, a theme is a connected set of XML definition files, an image file, and an associated master page that you can use to apply custom CSS to a site.
The following XML files define color slots and font slots that define the details of specific colors and fonts as they're applied to styles:
- .spcolor
- .spfont
You can create your own color and font files in your favorite text editor.
The following table lists the elements of a composed look.
Table 1. Elements of a composed look
Free Sharepoint Themes
Element | File or files | Where it's stored | Required? |
---|---|---|---|
Color palette | .spcolor | Theme Gallery15 folder | Yes |
Font scheme | .spfont | Theme Gallery15 folder | No |
Site layout | .master .preview | Master Page Gallery | Yes |
Background image | .jpg .bmp .png .gif | Site assets | No |
Users can select composed looks by using the Change the Look Wizard (Site Settings > Look and Feel > Change the Look), the Getting Started UI, or directly in the site actions menu. When a user selects a composed look, the theming engine applies colors, fonts, background images, the associated .master page, and the .preview file associated with the .master page to the site.
Color palettes
The theming engine stores colors in color palettes defined by the .spcolor file, as shown in the following figure.
Color palettes are stored in the Theme Gallery of the root site. A color palette is an editable XML file made up of color palette definitions and color slots.
Color palette metadata (
<s:colorPalette>
) defines the following:- Three preview slots that define what color slots to use in composed look previews.
- An isInverted property that lets the palette designer specify whether the theme is inverted (dark background with light text).
- The XML namespace associated with the theme.
Color slots are defined by two attributes—color name and value&mdaash;that define a name for the color and its RGB value. Color slots have semantic names, such as BodyText or SiteTitle, which help you identify which slots correspond to a region of a SharePoint page.
Line 2 of the .spcolor file defines the XML namespace, preview slots, and whether colors are inverted (they have a light foreground on a dark background instead of a dark foreground on a light background).
The .spcolor file contains 89 color slots. You can use color slots to define richer aspects of color, including opacity, by using 8-digit hexadecimal values. For example, if green is RRGGBB 00FF00, a 70 percent opaque green is AARRGGBB 7F00FF00. If SharePoint uses a slot that you don't define, any CSS that references it won't change color. If a slot is defined that is never referenced in CSS, the color is never shown in the UI.
You can edit the .spcolor file in Notepad. You cannot edit it in PowerPoint.
Color palette tool
You can use the color palette tool to visualize theme colors and how they work together on the page. Use it to identify color information that you can use in the color slots of the .spcolor file, and apply colors to a SharePoint site without changing any CSS as part of the process.
The tool displays the colors in hexadecimal format so that you can easily copy and paste the color value into the appropriate element in your .spcolor file. You can also use the color palette tool to fit a background image into a mockup and toggle between the seattle.master and oslo.master master pages.
Color palette tool
The .spcolor file is the only file that is required for a new theme, but you might need to add some custom font declarations, depending on the depth of your design. To do that, you need to access the .spfont file.
Font schemes
In the same way that color palettes define how colors are used in composed looks, font schemes define the fonts in composed looks.
Font schemes are defined in the .spfont file stored in the Theme Gallery. The .spfont file includes the following font slots that define the name, typeface, and script values of a composed look:
- Title
- Navigation
- Small-heading
- Heading
- Large-heading
- Body
- Large-body
Fonts are further scoped by script type (for example, Latin, Arabic, Cyrillic). Web fonts support is included in four file types:
- Embedded open type (EOT)
- Web open font format file (WOFF)
- TrueType font (TTF)
- Scalable vector graphics (SVG)
The font scheme defines a large preview image and a small preview image. They are required only for web fonts.
Note
You can edit the .spfont file in Notepad. You cannot edit it in PowerPoint.
The following is an example of an .spfont file.
Site layout: master pages and corresponding preview files
The theming engine defines the site layout of a composed look based on the .master master page and its corresponding .preview file. For example, if the master page defined for the composed look is seattle.master, that master page defines the layout of the site.
The site layout is pulled from the Master Page Gallery of any master pages that have accompanying .preview files. A .preview file is required for a master page to appear as an option in the Change the look UI (Site Settings > Look and Feel > Change the look).
To make a master page available from the Site Layout menu, create a .preview file that corresponds to the .master page. The .preview file displays thumbnail images for the composed look and the preview section to the right of the Change the look options on the designbuilder.aspx page.
Background image
You can change the background image of a composed look by choosing Change. This opens an upload dialog box that you can use to upload an image file. You can also drag your own image onto the background preview.
Create custom themes
To create a custom theme:
- Go to Site settings, and under the Web Designer Galleries heading, select Themes > 15. A list of .spcolor and .spfont files appears, as shown here.
- Download a copy of one of the .spcolor files (for example, Palette001.spcolor) and open it in a text editor.
- Edit the copied .spcolor file to reflect your design guidelines. For example, if you have a black font for main body text, edit the file to change the line
<s:color name='BodyText' value='444444' />
to<s:color name='BodyText' value='000000' />
. - For each HTML element, add your color.
- When you are done, upload the .spcolor file to the Site settings > Theme > 15 folder.NoteSave the file with a new file name (for example, custom_palette1.spcolor).The following table maps colors and page elements to their code in the .spcolor file. It is a subset of the mappings that are available in the .spcolor file.Table 2. Mapping of colors and page elements to .spcolor file
Element Color Code Body text Black <s:color name='BodyText' value='000000' />
Global navigation background Blue <s:color name='HeaderBackground' value='018dff' />
Global navigation text White <s:color name='HeaderNavigationText' value='ffffff' />
Current navigation background Red <s:color name='NavigationHoverBackground' value='e51400' />
Current navigation text White <s:color name='Navigation' value='ffffff' />
Title White <s:color name='SiteTitle' value='FFFFFF' />
Footer background Black <s:color name='FooterBackground' value='000000' />
- To customize .spfont, download a copy of an .spfont file and open it in a text editor. Notice that the .spfont file is laid out a bit differently than .spcolor, but that both files share a similar structure.
- Edit each
<s:fontSlot />
section to customize the font that SharePoint applies to the specified font slot on the page. For example, notice the first entry,<s:fontSlot name='title'>
. This entry describes which font SharePoint uses to style the title of the page. This section also specifies which font is used for different languages.NoteYou can upload custom fonts to SharePoint and point each entry to a custom .eot, .woff, .ttf, and .svg file. - Upload the file to the Site settings > Theme > 15 folder.NoteSave the file with a new file name (for example, custom_font.spfont).The following table maps page elements to fonts as they're defined in the .spfont file.Table 3. Mapping of page elements to fonts
Element Font Code Title Open Sans <s:cs typeface='Open Sans' />
Navigation Roboto <s:cs typeface='Roboto' />
Headings Trajan Pro <s:cs typeface='Trajan Pro' />
Body Open Sans <s:cs typeface='Open Sans' />
You might have to ensure that some custom fonts are available to users' browsers. For example, if the headings refer to a Trajan Pro font, which is uncommon on most users' computers, add the following font declarations at the top of the <s:fontSlot> declaration. This will ensure that the correct font is displayed.
Add a custom theme to SharePoint
After you make your customizations to the master page, .spcolor, and .spfont files, add them to the Composed Looks directory so that SharePoint can access them.
- Go to Site settings, and under Web Designer Galleries, select Composed Looks.
- Choose the new item link at the top left. The following window opens.
- Add a title and a name for your composed look.
- Complete the remaining fields:
- In the Master Page URL field, add the URL of the master page that you would like the theme to use.
- In Theme URL, add the URL of the .spcolor file.
- In Image URL, include the URL of an image that you want to use as a background. This is not required if your design doesn't call for a background image.
- In Font Scheme URL, include the URL of the .spfont file.
- In Display Order, indicate the order in which the composed look should be displayed.
- Choose Save. Your theme entry appears in the Composed Looks list.
After you add your custom theme as a composed look, users can access the theme and apply it to a site by going to Site settings > Look and Feel > Change the look.
The following figure shows an example of a Change the look section in Site Settings.
What the theming engine does when a user applies a composed look
When a user applies a composed look, SharePoint copies, transforms, and stores CSS in the content database. It also recolors and stores images in the content database. As part of the process of applying a theme to a site, the theming engine pulls color and font values from the specified color palette and font scheme found in the Theme Gallery of the root site. To apply .master page and the master page .preview file (the site layout), the theming engine pulls master pages in the Master Page Gallery that have a corresponding .preview file.
Free Sharepoint Tools
When it applies a composed look, the engine maps the settings specified by specific CSS comments that the theming engine defines. Under the hood, the theming engine saves the background image to Site Assets, scales and compresses JPG and BMP images, and limits the size of GIF and PNG images.
When a composed look is applied to a SharePoint site, SharePoint finds and replaces CSS comment tokens by embedding a value derived from the composed look in the next line in the CSS file after the token. This new value is applied to the SharePoint site.
The following table lists the CSS comment tokens.
Table 4. CSS comment tokens
Token | Description | Corresponding ApplyTheme parameter |
---|---|---|
/* ReplaceBGImage */ | Swaps current background image with the image in the assigned composed look image URL. | backgroundImageUrl |
/* ReplaceFont */ | Swaps the current font with one of the fonts found in the font scheme URL of the assigned composed look. | fontSchemeUrl |
/* ReplaceColor */ | Swaps the current color with one of the colors specified in a color slot in the color palette URL of the assigned composed look. | colorPaletteUrl |
/* RecolorImage */ | Recolors images using tinting or filling. |