How Do Latest SharePoint Announcements Impact Custom Branding?

With the latest announcements around SharePoint and Office 365, there are a significant number of user interface changes coming first to Office 365 and eventually SharePoint 2016.  With the latest changes, how does this impact those organizations that want to support custom branding of their intranets? 

Already a Challenge – No Consistent UI Framework

In Office 365, there are already multiple ways to apply themes and custom branding including master pages in SharePoint, themes in SharePoint, Office 365 themes, etc. 

image

In addition, there are areas within Office 365 that you cannot brand at all such as Office Delve, User Profiles, Video Portal, etc.  These “next generation” portals are off limits for custom branding and if you have invested a lot of energy into branding your corporate communications intranet, the experience breaks when they link off to one of these portals.  So my navigation, CSS styling, etc. all disappears when someone goes to Office Delve:

image

Other than changing the Office 365 suite bar colours you’re stuck with this user interface.

New SharePoint Mobile App

Microsoft has announced a new SharePoint Mobile App.  Presumably, the web mobile experience will also be updated.  For the current mobile web experience, if you use collaboration sites your users get a simplified, mobile friendly but completely unbranded user experience.

If you apply master pages and custom CSS, then you’re on your own and SharePoint provides the full original page with your custom branding.  Using this approach allows you to create your own branded pages but you’re also responsible for making them responsive – they break by default on any mobile phone.

With the new mobile app, Microsoft is imposing its own responsive framework, its own user interface, etc. in a stronger way than in the previous model.  It’s not quite clear how your custom web parts, CSS, JavaScript, etc. will be included into the page and how this will then make its way to the mobile phone so stay tuned.

New Publishing Pages Model

Microsoft is revamping the publishing pages model to be closer to sites such as Wix for creating web content pages. 

[New%2520publishing%2520framework%255B2%255D.png]

The new authoring canvas will be easier to use than the traditional SharePoint canvas – more like the new blogging tool in Office 365.

New Development Framework

Microsoft is introducing yet another framework for creating custom web parts.  The new web part (e.g. App Part, Add-In, etc.) model will be client side, TypeScript based and integrated into the new page model. 

The SharePoint framework-an open and connected platform 2

The framework includes a new page architecture that supports custom web parts using client side technologies such as JavaScript.  You’ll be able to use your favorite JavaScript frameworks such as Angular or React or KnockOut to build new web parts. 

The SharePoint framework-an open and connected platform 3

The new SharePoint Framework model also removes the horrible dependency on IFRAMES that were part of the original SharePoint 2013 and SharePoint Online app-part model, which should make it easier to support responsive sites and to embed JavaScript as custom user experience elements.

Key Recommendations on Custom Branding

Based on the current picture, we would recommend the following in regards to Custom Branding and SharePoint:

1. Be prepared for an inconsistent approach to branding – its clear that Microsoft continues to take responsibility over some key components of the user experience and not handing them back to be branded by your corporate communications team. 

2. We’re back in multiple frameworks, different experiences on Office 365 vs. on premise SharePoint, etc.  This will cause lots of headaches for developers building hybrid custom apps, add-ins, branding, etc.  in the near term until SharePoint 2016 aligns with the latest Office 365 frameworks. 

3. If you’re still on SharePoint 2003, 2007 or 2010 and you have server side based custom web parts get rid of them as part of any upgrade.  The current and future direction is 100% client side JavaScript and the sophistication of the JavaScript libraries is continually improving.

4. The new SharePoint Framework, if it isn’t buggy (a big if), could provide some noticeable improvements to the current SharePoint Add-In model.  It’s better integrated into the page, provides better support for modern JavaScript and CSS, and should be easier to deploy than the current model. 

5. You’ll have the option of still using “classic” (e.g. the current) SharePoint pages and your current web parts will continue to work.  Existing custom web parts won’t be able to be deployed to the new pages framework apparently, so be prepared to re-write these components to support the latest user experience.

Stay tuned as more announcements come out!

Read More

Creating a Custom Theme For SharePoint

One of the simple branding changes you can make in both SharePoint 2013 or SharePoint Online is to create a custom “composed look” that reflects your branding and fonts.  Creating a new theme is surprisingly easy and makes a big difference in the basic appearance of SharePoint.

A SharePoint “composed look” is a theme that combines the following into a package:

  • Colors
  • Fonts
  • Master Page
  • Background Image

SharePoint 2013 and SharePoint Online come with a set of themes such as this one:

image

Creating a new look and feel for your site involves uploading a custom color, font file and background image as needed to provide the user the ability to customize their site to reflect your branding.

Adding a Custom Color Palette

A color palette in SharePoint is an XML file that defines the HTML colors for each UI element on the page.  The easiest way to create an SPColor file is to use Microsoft’s free color palette tool.  The tool brings up the default color scheme and you can then supply a new set of colors.

Once you have a custom color file, upload it to the Theme Gallery in the 15 folder. 

Adding a Custom Font Scheme

A font scheme in SharePoint is an XML file that defines the font attributes for each UI element on the page. 

image

For standard web fonts such as Helvetica, Times Roman, Arial, Verdana, etc. you can just type in the name of the font into the typeface values.  It gets a bit trickier if you want to use a custom web font.  In order to do this, you need to upload the EOT, WOFF, TTF and SVG files to SharePoint and then reference them in the type face definition.

I used Google’s Open Sans as a custom font by uploading from GitHub the web font files into the SharePoint theme file.  Open Sans has bold, semi-bold and regular variations so you can use a single font family for headings, body text, etc. or you could use multiple fonts for each type of text in the UI.

In the typeface definition, you can provide also an image that shows a preview of the font – this image is used when showing the drop down menu for selecting the font scheme.  If you leave these entries blank, SharePoint just provides text content instead of a render of the text.

image

One important note: if you don’t get these references right, the entire theme won’t be loaded and you won’t see it available in the menu.  If you notice this, check the references for all your fonts and ensure the URLs have been supplied correctly.

Adding a Background Image

You can add a background image simply by uploading an image to the theme library and referencing it in your composed look.

Selecting a Master Page

Describing how to create a new master page is beyond the scope of this post, so let’s select from one of the existing master pages, either Seattle or Oslo. 

Putting it all Together with a Composed Look

Once you have your components ready, you create a new composed look in the Composed Look gallery.  This is a basic SharePoint list that references your theme components.  You can also specify the display order – I always put my custom themes’ display order as below 10 so they appear at the top of the list.

image

Once you have picked your theme, you’ll notice that your font scheme and color palette are selected by default. 

Now you have a custom theme that reflects your colors, fonts and background image. 

Apply Themes to Sub Sites

In order to apply your composed look to a sub site, you have two options.  The first option is to create the list item for the composed look in each sub site.  This is a pretty manual exercise but you could also save this as part of a site template potentially to save the manual steps.

An alternative approach is to use publishing sites.  One of the unique features of publishing sites is they have the ability to inherit their theme and master page from their parent site.  This is only available when you have activated publishing as a feature and use the publishing site template.

image

Read More

Why SharePoint/Office 365 Branding is a Challenge: Case In Point, the Blog Site Template

If you want to understand why branding SharePoint is a challenge, try to rebrand the out of the box SharePoint Blog Site Template.  One of the most basic site templates you’ll want to use in SharePoint Online has its origins back in SharePoint 2003 and the site template structure hasn’t really changed since SharePoint 2007! 

image

In modern branding guidance from Microsoft, they are advocating using JavaScript, no master pages and light weight branding.  We have been building intranets using no master pages, only JavaScript and responsive CSS files.  This approach works really well for publishing sites, but fails with the out of the box SharePoint Blog Site Template.

Understanding the Blog Site Template Structure

As mentioned above, the Blog Site Template is based on legacy paradigms and patterns.  If you edit the page, you can see the structure of the blog site components:

  • The default.aspx page can be edited, but you cannot change its page layout.  The default one is a 3 column page layout.
  • Blog Archives, Blog Tools and Blog Notifications are web parts. 
  • Categories and Posts are both List Views that have been heavily customized through XSL files.  In the SharePoint 2007 world, these files are installed at the farm level and aren’t accessible from SharePoint designer or the master page gallery.  I haven’t figured out where these files are in SharePoint Online (since you have no access to the farm).
  • The links in the blog post list view link to another page called Post.aspx.  This is what displays a single post and allows you to add comments.  The view of the blog posts is rendered using an XSL file called blog.xsl.
  • In addition, there are pages for other views such as All Posts, Archive, By Author, Calendar, and My Posts.  Each of these views actually use the same XSL file (“main.xsl”)

How Branding Works in SharePoint Publishing Sites

In order to rebrand any page in SharePoint, you effectively have 3 options available to you:

  • Create page layouts and use them to inject your own CSS, JavaScript, etc. and structure your page layouts based on your own design needs
  • Provide a custom Master Page that updates the chrome, CSS, JavaScript, etc. for the overall page structure.
  • Provide a link to an alternative CSS file that can be added to the site settings.  NOTE: you can only provide a single CSS file using this method and there is no support for adding JavaScript.

Our preferred approach is the first option because it avoids introducing custom master pages (which are not recommended within Microsoft SharePoint Online).  Using a custom page layout you can inject CSS or JS files as you need both in the header and in the body and you can restructure your layout so that it uses a modern HTML framework.

Challenges with Branding the Blog Site Template

Using the branding approach used for generic publishing pages won’t work with the Blog Site Template. 

The blog site template’s default page looks like a regular page, but it’s actually a system page that is not easily accessible for customization.  You cannot change the default.aspx page layout = if you go and edit the page the page layout is disabled even if the publishing features are turned on. 

You could create a new publishing page within the blog site template and add the list views and the web parts onto the page and make that new page the default page.  However, when an end user clicks on a link the user is directed to to Post.aspx and this is also not governed by page layouts either.  So our preferred option of using Page Layouts and injecting our own custom branding isn’t available.

Branding Option #1: Applying a New Master Page

You could use a new master page and apply it to your blog site.  This is not a recommended approach especially with Office 365 because it means you have now disinherited from any future changes that could come from Microsoft in the standard master page.

More importantly, If you try to apply a master page to your blog site, you quickly figure out that the blog pages aren’t actually publishing pages – they are system view pages.  This means that you can change the master page but you’ll have to change the System Master Page, not just the Site Master Page.

image

This is feasible, but will have the unintended impact of changing the user interface of all your settings pages.  Here is an example where I created a minimal master page and added a basic header to the body.

image

This works but the same layout will be used for pages such as your site settings page:

image

Option #2: Create Your Own Publishing Page

You can replace default.aspx with your own custom page.  You can apply your own page layout which provides you the opportunity to change the format of the page, inject your own CSS and JavaScript, etc.  You can re-arrange the web parts and list views on your new page and using CSS you can style them to suit your needs.

Here is an example of a custom blog home page.

image

This page uses a different page layout and I have re-arranged the web parts on the page.  The view of blog posts is the summary view of the list which is what is used in the default.aspx page.

The challenge is the existing blog web parts and views still direct the user to other view pages.  For example, if you add the blog archive web part it goes to a Date.aspx page to show you a list of blog posts for a particular month (why you would need entirely new ASPX page to do this is beyond me). 

As well, you’ll start to notice subtle limitations due to the quality of the HTML in the views – there are a lot of tables, fixed widths and other challenges in the HTML structure that will make branding these views a challenge.

In addition, the comments don’t show up – they are injected in the ASPX page itself through a JavaScript file.

Option #3: Create Your Own User Interface

At the core of the blog site template are lists that store the blog data – Posts, Comments, and Categories.   You could use your own JavaScript to create your own user interface that reads and writes from these lists and displays the blog posts.  This will provide you the most branding flexibility because you now have complete control over the user experience.  Given the out of the box Blog Site Template was designed almost ten years ago and doesn’t use any modern HTML approaches such as even basic AJAX or responsive designs you probably could do a lot better than the out of the box template with your own designs.

However, the blog site template has a fair number of function points out of the box that if you need them will take some significant investment to roll your own.  Some of the key functions provided by the out of the box template include:

  • Displaying comments
  • Emailing a link of the post
  • Liking and Unliking a post
  • Adding new comments to a post
  • Filtering by category and by date

In each case, writing your own JavaScript requires some in depth knowledge of the JSOM SharePoint APIs to read and write data from lists, update likes and unlikes, etc.

Option #4: Use the New Blog Template

Microsoft recently unveiled a new blogging template built into the Office 365 user profile.  It provides a more modern user interface, is somewhat responsive and mobile friendly, etc.  However, this blog is attached to you as an individual which isn’t always what you want for a corporate blog. 

image

In addition, it provides ZERO support for branding – you cannot even change the fonts or the colors.  This template is even more limiting from a corporate messaging perspective than the blog site template.

Is Branding Worth the Trouble?

Many developers and Microsoft themselves either implicitly or explicitly say to not bother with branding and just use the product as is.  Microsoft themselves have issued statements like this that push customers to question why branding is worth the trouble.

image

The blog site template is a very good example of why branding continues to be a challenge and yet why it is a necessity.  What corporate communications intranet doesn’t want a blog for the CEO and would they want the out of the box, ten year old, non responsive, non branded template?  And yet, the basic approaches even recommended by Microsoft as modern, safe approaches to customizations don’t work for the blog site template because it was built on old paradigms and has never been updated.

We are currently evolving our own Option #3 JavaScript user interface to provide our customers with a fully responsive, modern user interface based on CSS frameworks like bootstrap so that a CEO blog can be easy to maintain and yet provide a branded experience.  It is a significant effort but worth it for many of our customers looking for a blog as part of the corporate communications intranet.

Read More

SharePoint Branding Tip: Avoid Corrupting the Existing User Interface

We have been working on creating some custom style sheets and page layouts from an existing public facing web site.  We brought in our existing CSS style sheets, and all of a sudden, our existing SharePoint user interface looked corrupted!

image

The edit page is even worse:

image

After several hours of CSS debugging, the cause is conflicts between SharePoint’s existing styles and custom CSS styles being imposed over top.

SharePoint DIV Structure

When SharePoint populates content into a page, it’s composing it out of several distinct elements that include:

  • Master Page
  • Page Layout
  • Populated Field Controls and Web Part Zones

The existing SharePoint user interface (e.g. the top Office 365 bar, the page editing controls, navigation, etc.) are in DIV tags. 

  • suiteBarTop: the Office 365 suite bar
  • s4-ribbonrow: the top ribbon div (e.g. where it says Browse, Page and Publish)
  • s4-workspace: the rest of the page without the ribbon
    • s4-bodyContainer: entire page except for the Office 365 suite bar
    • s4-titlerow: the title area with the logo, the top navigation and the title of the page
    • contentRow: the populated content from the site template

Each of these DIV’s are identified by an ID value – this is key to scoping your CSS styles.

Scoping your Styles to Avoid Clobbering the SharePoint UI

In debugging the custom style sheet we had, there were a few key styles that were being applied as general style sheet instructions that were impacting the existing SharePoint UI:

  • Body: in general, anything you put in the body selector is going to apply to everything on the page.  For example, in our existing CSS we had body setting the line height and this was impacting the existing SharePoint navigation.
  • Img: we had a CSS definition for all images to be width: 100%.  This kills the icons in all the buttons. 
  • H1: H1 is used by the title of the page.  In our CSS we had some changes to line height, margins, etc. which impacted the page title.
  • *: applies styles to everything.  Be careful with this selector as it will impact all sorts of existing elements.

Fixing the problem involves finding these global style selectors and scoping them to the contentRow DIV. 

For example, our style for H1 becomes: #contentRow h1 {.

For any styles in the selector Body, you can use #contentRow as the outside selector instead:

#contentRow {

How SharePoint Manages Icons

SharePoint uses a single Icon master PNG file to store all its icons:

formatmap32x32

To display the icons, the CSS creates a 32×32 box on the page and then moves the icon image inside it, positioning it so the appropriate icon shows up.

<span unselectable=”on” class=”ms-cui-ctl-largeIconContainer”><span unselectable=”on” class=” ms-cui-img-32by32 ms-cui-img-cont-float”><img unselectable=”on” alt=”” src=”/_layouts/15/1033/images/formatmap32x32.png?rev=39″ style=”top: -239px; left: -409px;”></span></span>

This is why you have to be careful with declaring rules on images such as setting the width or height as this will impact this particular image and your icons won’t show up properly.

The Fixed Version

Here is the version with the CSS adjustments fixed up and working in concert with the existing SharePoint UI.

image

image

Read More

Latest Advice on Office 365 Branding

SharePoint Branding is a perennial challenge and continues to be so with Office 365.  Users want to be able to customize the branding, user experience and controls to reflect corporate branding standards, enable custom user experiences and enable new functionality.  With Office 365, this becomes more complex because it is an ever evolving service that changes constantly.  At Microsoft Ignite, there was a good presentation that illustrates the latest recommended approaches to custom branding. 

Office 365 Branding is Becoming More Complex

As Office 365 evolves, the branding picture is becoming more complex simply because the Office 365 service is becoming more complex.  For example, with the addition of the Office 365 App Bar, mobile clients, next gen portals, Delve etc. there are now multiple surfaces for content to be surfaced compared to older versions of SharePoint. 

In addition, the Office 365 user experience is continually evolving, which means that the CSS styles and UI elements that your custom branding depends on today may not be there in the future or your customizations may disable or hide UI features that Microsoft rolls out in the future.

Custom Master Pages are Support but Not Recommended

image

Master Pages are custom developed HTML pages that are then converted into ASP.NET pages.  They control all of the chrome, CSS, JavaScript, etc.  and have been used traditionally for creating custom branding experiences on premise.

image

Microsoft is recommending explicitly to avoid using custom Master Pages for Office 365.  Instead, they recommend using alternative methods for customization instead  of deploying custom master pages and/or sandbox solutions.

When you create a master page, you inherit from the current Office 365 master page and customize it.  The challenge is that the Office 365 standards are evolving constantly and after a while, your old custom master page is now lagging behind the standard.

image

SharePoint Branding Doesn’t Extend to Other Services

If you custom brand SharePoint using custom master pages and/or alternative CSS, this only extends to SharePoint.  If you go to Yammer, next gen portals, Delve, etc. they don’t pick up any of that branding.

Instead, you have the option to define an Office 365 theme which does apply to all of the Office 365 services consistently.  However, it is limited to basic colors, fonts, etc.

Minimize Branding for Collaboration Sites

Microsoft put up this question: why do you need to branding on collaboration sites?  In general, Microsoft is recommending to use branding selectively and only for publishing portals.  For collaboration sites, Microsoft is recommending to see collaboration sites as tools, not experiences.  image

One of the key reasons why using custom CSS branding or master pages with collaboration sites is that there are literally hundreds of CSS styles used by the various UI components in collaboration sites.  With a read only, publishing style intranet your workload is primarily people reading content but with collaboration sites you have teams interacting in a wide variety of different ways.

SharePoint Themes

One of the recommended options to branding is custom SharePoint themes.  Instead of creating a new master page, you use a theme to define colors, fonts, etc. to support corporate brand standards without creating a completely newly designed user experience.

image

There is a tool for creating themes called the SharePoint Color Palette tool for creating themes using a graphical user interface or you can code themes from scratch.

Office 365 Themes

Use the Office 365 theme to control the top bar and overall colors, fonts and background images.  The Office 365 theme is applied to all of the Office 365 services including Yammer, Outlook, Delve, etc.

image

Note that if you apply a custom theme specifically to SharePoint, it will override the Office 365 theme.

Alternative CSS

You can add your own CSS to further control layout of the SharePoint UI elements as well as your own custom solutions.  CSS can be added to the site through PowerShell, the UI or through CSOM.  It can also be removed as well.

This approach to custom branding is better than custom master pages because it overlays on top of the Office 365 master page instead of replacing it with your own customer one.  Using CSS, you can relocate elements, add responsive behavior, etc.

If Microsoft introduces new styles or removes old ones, your CSS always takes precedence so it won’t break your existing site. 

Enabling Responsive in SharePoint

SharePoint is not responsive (e.g. scales the UI based on the size of the screen) by default.  There have been open source projects to develop a responsive master page but this is based on the custom master page approach now not recommended by Microsoft.

image

The recommended approach is to use the Alternative CSS instead as a mechanism to enable responsive design.  The amount of CSS required is extensive and there are many web parts in SharePoint that aren’t responsive.  For a publishing intranet with only read only content, a responsive intranet might be possible but once you enable collaboration, sharing, and other SharePoint native web parts you’ll experience challenges with implementing a responsive intranet design.

The recommended approach is to inject CSS into the site to make it responsive instead of using custom master pages.  However, based on my experience, I would wait until Microsoft improves the default responsive experience in Office 365 before tackling trying to re-write the CSS for all their various dialogue boxes, controls, etc.

Using JavaScript Embedding to Enable Custom UI Behavior

Microsoft is recommending using JavaScript Embedding to enable custom UI functionality instead of custom master pages.

image

image

This approach allows you to inject JavaScript behavior (and presumably frameworks such as AngularJS) into your sites without needing to embed the code into a custom master page.  The JavaScript is applied on top of the Office 365 master page instead of replacing it altogether.

Read More