| SharePoint 2010 Themes and Resources for Upgrading a Custom Master Page |
Since before 2007 shipped, I was encouraging people to use SharePoint master pages as a means for deploying a custom look and feel. It’s tons better than using a site template, and if you used themes, you’ll find Themes did NOT upgrade to SharePoint 2010. Not a huge deal, since they are TONS better including way easier and way more flexible. Not sure it’s true, but many will find the truly simple way of saving your PowerPoint template as a theme and using it is a viable way of “skinning” your new SharePoint 2010 site.
Creating a SharePoint 2010 Theme from PowerPoint.
1. Open up your favorite PowerPoint with the cool theme you like or create your own.
2. Click the “Design” tab in the ribbon (circled below)
3. Then click the little triangle in the corner of the themes to display more. (See arrow in snip above)
4. Click “Save Current Theme”
5. Choose a location and click save and now you’ve got a .THMX file!
Great, now you’re thinking… this has got to either be CSS or XML and I can easily edit this. Sorry I tried to open it in Notepad and got gibberish with a few file references at the bottom.
Now you can apply this on the SharePoint 2010 side.
1. Just go into Site Actions, click Site Settings
2. In the Look and Feel section, click Site theme
3. In the Select a Theme section select the theme you uploaded.
How are 2010 Themes way better?
1. I just told you about the ability to create them in PowerPoint isn’t that cool enough
2. Extensible, export and import
3. Easily modify existing 2010 themes
4. Applies to both System (Layouts) and Application pages for better consistency across more of your pages including your web part pages and yes you can add custom CSS as well.
5. Designed for end users to be able to easily create and modify right through the browser
2007 or 2010 Masterpages
My strong encouragement is people shouldn’t stick too long with their 2007 master pages on SharePoint 2010. After visual upgrade, I’d like to see people migrating their styles into the SharePoint 2010 master pages. Sure they should be ok for a while, but you’re not going to get all the goodness. Remember you want cross browser, compliant XHTML code, less tables (something like from 16 to 8!), and WCAG 2.0 accessibility. You don’t want to be missing out on all that! SharePoint 2010 master pages are not table based and designs apply across the _layouts folders. The corev4.css still has a lot of lines of code, but there are huge improvements.
Understanding the SharePoint 2010 Master Pages
SharePoint 2010 ships with both SharePoint 2007 master pages and page layouts as well as the new SharePoint 2010 master pages. One of the major things to be aware of is the build in minimalist masterpage a concept that grew up from the community in SharePoint 2010 with Heather Solomon. In the box you’ll find v4.master, default.master, and minimal.master. Default.master is the old masterpage if you just upgraded. v4.master is the new SharePoint 2010 master page with the ribbon and other visuals. The new minimal.master is as it self describes. It is has a minimal set of controls and no navigation. Developers especially those working with a complete custom design will be pleased with this design.
Before you start saying… Man, Joel is really knows this branding stuff. Sorry I’m not the master when it comes to branding. Themes are about as far as I go. I’ll get someone with style to build a master page. Applying it is where my expertise lies.
Heather Solomon has put together a post on creating a custom SharePoint 2010 master page. She does a great job of stepping you through the elements.
So for those of you looking to upgrade or migrate your style from your 2007 master pages to the new improved 2010 master pages, here’s some of the best resources.
Starter Master Pages
Starter Master Pages for SharePoint 2010 Codeplex Project by Randy Drisgill
http://startermasterpages.codeplex.com/
Description: Starter Master Pages for SharePoint 2010 are a clean, commented starting point for creating your own SharePoint 2010 branding. Starter Master Pages were known previously as Minimal Master Pages in SharePoint 2007.
Details: In the tradition of those SharePoint branding folks that came before me, I have put together two minimal master pages that can be used to start a SharePoint 2010 Branding project. They contain only very minimal HTML styling in order to accommodate some of the specific needs of SharePoint 2010 and are commented throughout. I hope you find them useful as a good starting point for creating branded SharePoint sites.”
Randy has outdone himself with his series on branding tips:
- SP2010 Branding Tip Series
- SP2010 Branding Tip #1 – Applying Custom Master Pages to _layouts Pages
- SP2010 Branding Tip #2 – Custom Master Pages and Dialog Boxes
- SP2010 Branding Tip #3 – Getting your CSS to be the last to load
- SP2010 Branding Tip #4 – Easily show a Favicon in SharePoint 2010
- SP2010 Branding Tip #5 – Handling unsupported browsers
- SP2010 Branding Tip #6 – Mobile Browsers
- SP2010 Branding Tip #7 – Using Simple Rendering in SharePoint Navigation
- SP2010 Branding Tip #8 – Alternate CSS can crash your site (until its fixed)
- SP2010 Branding Tip #9 – Turn on Anonymous Access
- SP2010 Branding Tip #10 Starter Master Pages for SharePoint 2010 (Formerly Known as Minimal Master Pages)
- SP2010 Branding Tip #11 – Un-Floating the Ribbon in custom Master Pages
The best resource for upgrading your Master Page
MSDN: Upgrading an Existing Master Page to the SharePoint Foundation Master Page
- Controls on the Server Ribbon
- Add Content Placeholders
- Add the Server Ribbon
- Maintain the Server Ribbon Position while Scrolling
- Add Controls to the Master Page
As well as good resources on the SharePoint Team blog.
Customizing Ribbon Positioning in SharePoint 2010 Master Pages
SharePoint Dialog Auto-Sizing and Master Page Customization
Other Community Resources:
Michael Hacker speaks to the naming of the new masterpage in his blog post don’t forget official.master.
Mirjam Van Olst speaks to visual studio 2010’s new modules for Deploying a custom masterpage in SharePoint 2010 in her blog Adventures in SharePoint.
Don’t forget with broader browser support to build for diverse devices including mobile
The way things are going with design and the excitement around iPads, you may want to check out Dux’s video on SharePoint 2010 on the iPad. Hey it’s worth a shot to at least make sure it does what you want. I was impressed how good it looks.