Office365 (SharePoint Online) Website Custom Branding – Using Custom Master Page

When subscribing to a Microsoft Office 365 P1 plan the website that gets created for public facing does not directly allow custom branding. For this plan Microsoft does not enable publishing feature as well.

The master pages found in the masterpage library are not used for the public website. The default master page is called root.master and can be placed in the root of SharePoint. Click ‘All Files’ in Sharepoint Designer 2010 to see the file hierarchy of SharePoint and you will find the Root.master at the bottom of this listing.

We cannot modify root.Master, instead a new master page could be uploaded and set as default master page.

You could try the following to test this out:

1. Use a starter master page found at: http://startermasterpages.codeplex.com/

2. Use SPD to upload the new master to “_catalogs/masterpage”. Then right click the new master page you just uploaded and “Set as Default Master Page”. Then inside each of the pages “pages (web Pages)” you will need to edit the “MasterPageFile="~site/root.master"” to be something like “MasterPageFile="~site/_catalogs/masterpage/myCustomMasterPage.master"”. This will allow your site to use the new master page.

Note:

One additional thing is you will need to add the content placeholder office 365 pages use. It’s not the same as the standard SharePoint master page content place holder.

Add the following to just above or below the SharePoint content place holder (PlaceHolderMain) in your new master page:

<div id="IWS_WH_Elem_Content" class="MSC_Body">
<asp:ContentPlaceHolder ID="IWS_WH_CPH_Content" runat="server"></asp:ContentPlaceHolder>
</div>

 

A site like below could be easily created on a P1 plan:

image

Applying v4.MasterPage as a Search Center MasterPage

Read It

Last week when I was working on a client project I had a requirement of applying v4.masterpage into Search Center as the search center was disconnected from rest of the site collection for its global navigation. So during my search for a solution I came across this useful link “Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page” posted by Randi Drisgill. This blog was simply listing the steps required to achieve what I wanted. So I went ahead and applied the steps mentioned in there. Everything went well and thanks to Randi.

Once after completing the steps mentioned in there, I started performing some basic tests and oops, I came across two bickering issues:

  1. The search box was found to be left aligned which was different to the alignment set in OOB.
  2. When page loads an additional ribbon row gets displayed momentarily and disappeared.

Let’s Fix

So I had to work on finding a solution for both the issues before releasing the solution.

  1. Fixing Issues# 1: I had to remove the style attribute (in the masterpage) margin:inherit as shown below:

    .srch-sb-results4 {
               margin: inherit;
               padding-left: 20px;
    }

  2. Fixing Issue# 2: A <div> tag should be introduced with style set to display:none surrounding the  “notificationArea” div.

<div style="display:none">
       <div id="notificationArea">
       </div>
       <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
                     <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate">
                     </SharePoint:DelegateControl>
       </asp:ContentPlaceHolder>
</div>

That’s all you need in addition to what Randi Drisgill already provided.

FinallySearch Center