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.

  • KPunshon

    We don’t use blogging on our SharePoint but I just wanted to say that this is a very well done Blog. I am sure it took you some time to create and I hope it brings you some business. SharePoint needs a lot of support with features. Kerri Groves

    • cwoodill

      Thanks!

  • Spiff66

    Maybe people will just not bother using SharePoint and go and do something else instead. So everyone knows that your brand as a business is important to you your company culture etc etc, except for Microsoft who just can’t do it. It’s too hard for them. Maybe its time Microsoft scrapped SharePoint and came up with a solution thats actually fit for purpose than putting more lipstick on their pig of a product. Oh and I’ve spent the lat 9 years on SharePoint. Want to blog go setup wordpress its a lot better.