Turning a Master Page into a Theme

I got asked a question I have never heard before, so I decided to post a reply here.

Q: Can you turn a SharePoint master page into a theme?

A: Depends. I know, awful answer, but it really does depend on what you have done in your master page.   Master pages control more design elements than a theme does.  So depending on how you created those changes, they may or may not translate over to a theme.

SharePoint uses a set of CSS styles.  Some of those styles are referenced in the user controls like Search.  Some of the styles are referenced in the navigation, like CssClass in the the AspMenu control.  Other styles are assigned to HTML table tags that contain and organize elements in the SharePoint web page.

If you created new styles to override existing SharePoint styles for the user controls or the navigation, those can easily be transported over to a theme.  If you created new styles to override existing SharePoint styles for the container tables, then those can easily be transported over to a theme as well.   But if you used different HTML and CSS styles in your master page to layout your web page, then that is where you may run into a problem taking that into a theme.

A theme merely re-skins a master page. Note I didn’t say re-skins SharePoint. It can update the colors and images used in the master page, no matter if the master page is one that ships with SharePoint or a custom master page you created.

So you can essentially create a custom master page with all your own styles, then create theme(s) for your custom master page that changes colors and images.  Nice thing about themes is that it bleeds over and affects the application (_layouts) screens as well.

So ultimately, the answer to whether or not you can take your master page and create a theme really depends on what is in that master page and what master page will be assigned to the site when you apply the theme.  Don’t forget that whether you want to use a master page or not, the SharePoint site will use one no matter what, be it the default one it ships with, or a custom one you create.

Here are a few scenarios to help illustrate what we are talking about.

Scenario 1:  You made edits to Core.css or created a custom CSS file and tweaked the look and feel of the default SharePoint site.  Maybe you added a few custom elements in the master page, but for the most part the master page being used is largely based on default.master.   Now you want to create a theme for the changes.
Can you do it? Yes, you can create a theme out of your image and CSS changes.  Keep your master page changes in the master page.

Scenario 2: You created a custom master page and it doesn’t look anything like default.master.  You have new HTML, new CSS classes, and some edited SharePoint styles to change the branding of the user controls.  Now you want to create a theme that recreates these changes that you can then use on other SharePoint sites.
Can you do it? No, this will not work! You will only get a piece of the branding transferred over to the theme.

Scenario 3: You created a custom master page and it doesn’t look anything like default.master and you want to create variations of this design by changing colors and images (maybe for departmental or divisional areas of a site). You think a theme can create that variation.
Can you do it?  Yes! Themes are a great way to create color and image variations for a master page.