One challenge common to any implementation of SharePoint 2010 is how to implement a theme with minimal effort. It usually requires significant planning and some cut corners to get what you want. Fortunately, the latest release has some changes that should improve the process.
Randy Drisgill and John Ross, SharePoint MVPs from Rackspace spoke at it.
blog.drisgill.com or @drisgill
johnrossjr.wordpress.com or @johnrossjr
They intend to talk about branding through a different lense. It’s about low, medium, and high effort. They focus on both on premise install as well as online with Office 365.
Introduction to Branding
Brand has moved from ranchers branding their cattle to a marketing term which describes feeling and emotions elicited by someone. It’s also why you call it Kleenex instead of tissue or why you pay $2.00 for a cup of coffee.
Website branding includes colors, fonts, logos, and supporting graphics. SharePoint terms include Master pages, page layouts, CSS, web parts, images, etc.
Low Effort
This is the simple version. You aren’t making lots of changes to CSS or Master Pages. You are working with page editing and composed looks (new term in SharePoint 2013).
Page Editing is similar to what you knew in 2010
- Icons are Windows 8 style
- You can add images, video, web parts, etc.
- Team sites have prebuilt layouts and are collaboration focused
- Publishing sites have customizable page layouts instead of text layouts
- They are similar to themes in 2010
- They include Master Page, Colors, Fonts, Background image, and a preview file. A preview file is a little thumbnail that can be complicated to make.
- They are NOT created with office clients.
- Probably the preferred way to brand your collaboration sites. Start with an existing and go from there.
- You get there from site settings
- For each out of the box look, you can change the site color spread. You can also choose default fonts.
- The demo showed a change to the color scheme and the background image. It made a big difference with just those two changes.
Medium Effort
Medium Effort has enlarged. You have more options. You can make better use of CSS. You also use Design Manager instead of SharePoint Designer. HTML designers should be able to use their previous skills and knowledge better.
The Design Manager helps ease the effort of branding and design. It will end up being your central hub for making design changes. It’s a big features in 2013 and is accessible from the site actions drop down. It’s only available for Sites where Publishing is activated. SharePoint Designer remains an option, just not the best one for visual designers. Of course, if you already use a tool like Dreamweaver or Expression Web then you can use them to edit code.
Snippet Gallery
The snippet gallery is how you paste things into html. This is like navigation, breadcrumbs, etc. This is what actually allows you to create a look and feel with a 3rd party editor. It’s pretty straightforward because you can search for a snippet, get a preview, decide that’s what you want and then copy the snippet from the box.
Creating a Design Package
Microsoft created a design import/export utility that automatically creates the design package for you that you can use to import and view. This is great for SharePoint installs with a couple site collections. For those with 100 site collections, you might want to just go edit Master Pages rather than import it 100 times.
When starting this process, you map a drive to the correct location within SharePoint. That will make it easier to just copy assets over.
Recommendation: Store images, css, etc in the Master Page gallery. This is a change from before. They also recommend to create a sub-folder for your new CSS and style assets.
Recommendation: Save of a version of your original clean html. The conversion of your original html adds a lot of SharePoint specific html.
Cascading Style Sheets (CSS)
CSS used to overide default SharePoint branding. You can now apply CSS to a page with script editor web part or content web part. You can also apply it to a Master Page. Working with CSS is tricky in SharePoint. It’s both easier and harder to to work with CSS. They do more reuse of CSS but there’s something like 15,000 lines of CSS in the core set of files. You need to use tools like CoreV15 or IE F12 or Firebug to see what CSS is applied to it.
