The European SharePoint conference has started this week. Last year we were in Barcelona, this year we went all the way up north to Stockholm, Sweden. The actual conference starts on Tuesday but on Monday there are full-day tutorials. I’ve choose the “SharePoint 2013 branding from start to finish” workshop with Matthew Hughes (follow him on twitter via @mattmoo2).
The workshop was fully booked so it is clear that many people are interested in how to brand a SharePoint environment. The first past of the day was all about CSS and JavaScript.
When you’re not familiar with CSS you need to memorize these 7 CSS selectors:
- *(star) everything
- #x – specific ID
- . (dot) specific class
- X Y – descendent (very important in SP branding)
- X – everything with this type
- X>Y – direct descendent (first descendent)
- X[attr] – attribute selector
Also be aware of the weighting and specificity of CSS. It is important where you add or define the CSS styles and how precise you are. You could use this cheat sheet to find out more.
Next to that you must be carefull with the use of the !important keyword in CSS. Using this is kind of dirty and if you want to override is you need to use it again. Try to avoid this and remove it and be more specific. The only case you should of could use it is for development purposes to be sure you target the right element.
When you start with branding your SharePoint environment you need to get some requirements. Not the fluffy ones but clear requirement to start with. You can check theblog of Erik Swenson to find out more about requirements and so.
To plan the design you should definitely use the the balsamic templates from Matthew!
The do some basic branding like changing the logo you need to activate 2 features:
- Site collection feature: publishing features
- Site feature: SharePoint publishing
When you want to completely change the masterpage you can start with thestartermasterpage on codeplex. This is a free template to use when you want to create a custom masterpage.
When you create a custom masterpage you need to check-in/out the page the first time (and publish it) or else you wont see it in the list.
When you want to go further you need to do some client side coding. You can use CSOM, client side object model or JSOM, the JavaScript Side Object Model. Some useful libraries are Jquery, Chart.js and SPServices.
The demo showed a tabbed news rollup and a task-pie-chart demo completely written in JavaScript.
This was a good overview of the possibilities of way you can go to brand you SharePoint site. During the conference there are more detailled sessions about branding. Check the program for more details.
