Apply Sharepoint 2013 public site design to team site / web part pages

This technique covers restyling your internal, admin and public wiki/web part pages to look exactly like your public site. It involves either changing the master page selected pages use or creating a new css file and adding a link to it in a new master page. I’m going to use the css that styles the public site but the basic process can also be used to apply any design you dream up to your team site pages. Here’s an example – you can see from the url it’s a web part page in the site pages library: http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx
There are several benefits to doing this including:

Branding consistency between internal/external sites
Replacing the “vanilla” Sharepoint styling
Allows you to seamlessly integrate web part and wiki pages in your public site and take advantage of their additional features

101313_2228_applysharep1

Caution:

Due to a bug, it seems changing to a custom master page wreaks havoc on any Sharepoint store apps you have installed. You will have to remove the app and add it again to fix the problem, so if you have content you don’t want to lose – be warned!

Steps:

There are 2 ways to do this. One way is easier but involves UK web design companies and allows you to pick and choose which pages use the public site styling. The other way is more complex and will affect all your admin pages but all you need is notepad. The first option is the safer of the 2 because there may be some undesirable side effects to changing the admin master page. Whichever you choose, be aware that SP master pages are pretty unforgiving of errors so you should always start by making a copy of the default version!

Option 1:

Create a page in the Site Pages library. If there is no site pages library in your tenant, you’ll have to create one with all the desired page content types active.
Open the site in Sharepoint Designer.
Click “All Files” »” _catalogs” » “master page”.
Right click the master page used in the public site (Oslo etc) and click “set as custom master page”.

untitled

Navigate to the Site Pages library, right click any page and click “Edit in advanced mode”.

 

 

At the top of the code you’ll see the master page reference.
Change it from: <%@ Page language=”C#” MasterPageFile =”~masterurl/default.master”
To: <%@ Page language=”C#” MasterPageFile=”~masterurl/custom.master”

Now that page will start using the same master page (and therefore styling) as the public site pages.

Option 2:

Remember this will monkey with all your admin pages so if something breaks, see option 1!

Grab the files:

Go to site settings » look and feel » master page to identify which “system master page” you’re using
Web designer galleries » master page gallery – download a copy of that master page (Oslo, Seattle etc).
The css file used on the public site is not as easy to locate-
Option 1 (easy): open your public site and using the web developer add on in Firefox, go to the edit css tool, copy the contents of the css file that looks like “oslo-236877554-themedcss” and paste into notepad.
Option 2: look in the source code of a public site page for all the “link rel=”stylesheet” references. The file you want will be something like oslo-236A6B32.themedcss. So the full path would be /_catalogs/theme/Themed/3A9B902/oslo-236A6B32.themedcss. When you find it, click it, copy the code and paste into notepad.
Save the css in notepad as a .css file and upload to the master page gallery.

Adjust the master page:

SP is picky about how you add a link to a css file – so open the master page in a text editor and search for Right below that line add:

So the name part would reference the name o

101313_2228_applysharep2