SharePoint Designer 2010 (64-bit)
As previously mentioned, Office 365 gives you a SharePoint site collection. Out of the box the “root” site of that site collection is your public facing web site, with subsites representing your team (private) site and a search center. I am only going to work on the root site, so I will be ignoring the subsites for now. However, it’s important to understand that what you do to the root site CAN impact the subsites.
After installing SharePoint Designer, I easily opened the website by clicking on “Open Site” and typing in my website address, “http://www.gpconsulting.com” in this case. SPD prompted me for credentials and I then clicked Open.
On the left navigation menu, immediately click “All Files” as indicated by the arrow above to give you a tree view of your site.
Your public web pages are in the “Pages” folder. Right click on “default.aspx” to open the file. You will receive a dialog warning “This page does not contain any regions that are editable in safe mode. Do you want to open this page in advanced mode?” Say yes. Next time you can right click on the file and “Open in advanced mode” to save the extra click.
You are now looking at your actual content from the template… a masterpage reference and a content webpart. The masterpage isn’t editable. This means I need to create a custom masterpage and new pages.
Adding a new masterpage
Masterpages are stored in the \_catalogs\masterpage folder. Right click on the “masterpage (Master Page Gallery)” menu item, select new, then ASPX. Name your file something unique with the extension “.master”. I named mine “gpc.master”.
Here is my very basic masterpage.
1: <%@ Master Language="C#" %>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5: </head>
6: <body>
7: <form>
8: </form>
9: </body>
10: </html>
Now let’s create a sample webpage to easily check our progress.
Again from All Files, right click on “Pages (Web Pages)”, then New, then ASPX. This will create an untitled page (untitled_1.aspx) in the library. Right click to rename to something meaningful. I am selecting “default_gpc.aspx”.
Now right click on the file and again select “Edit File in Advanced Mode”. The default content in web pages created this way does not use a masterpage, so you can delete everything in the file, replacing with the following:
1: <%@
2: PageLanguage="C#"
3: masterpagefile="../_catalogs/masterpage/gpc.master"
4: inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document"
5: title="default_gpc" %>
The combination of this new masterpage and blank page is the basis we can apply our custom look and feel.
My goal is to return to the masterpage and add CSS and styles to mirror my blog site. Aside from me liking this theme, being able to do this means that you should be able to use any WordPress or other blog theme for your layout!
First step is to upload the various files that make up my blog theme. SPD makes this very easy where you can drag and drop files from a folder to the correct folder on the server.
In my case this means importing two CSS files and an images folder into the SiteAssets folder on the SharePoint server.
Note: My blog theme is based n the LiquidNautica theme for blogengine.net
Next step is to use the new CSS file and copy over the relevant markup. The masterpage file now looks like this:
1: <%@ Master Language="C#" %>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD
3: XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
5: <head>
6: <!-- START THEME CSS FILE REFERENCES -->
7: <link rel="stylesheet" href="/SiteAssets/liquidnautica.css" type="text/css" />
8: <!-- END THEME CSS FILE REFERENCES -->
9: </head>
10: <body>
11: <form>
12: <!-- START THEME CONTENT -->
13: <div id="wrapper-menu-top">
14: <div id="menu-top">
15: <ul>
16: <li><a href="" title="Home"><span>Home</span></a></li>
17: </ul>
18: </div>
19: </div>
20: <div id="wrapper-header">
21: <div id="header">
22: <div id="wrapper-left">
23: <div id="wrapper-right">
24: <h1></h1>
25: <h1 id="sitename">GP Consulting</h1>
26: <div id="slogan">We Rock!</div>
27: </div>
28: </div>
29: </div>
30: </div>
31: <div id="wrapper-content">
32: <div id="wrapper-menu-page">
33: <div id="menu-page">
34: <asp:ContentPlaceHolder ID="NavPlaceHolder" runat="server"></asp:ContentPlaceHolder>
35: </div>
36: </div>
37: <div id="content">
38: <asp:ContentPlaceHolder ID="MyContent" runat="server"></asp:ContentPlaceHolder>
39: </div>
40: </div>
41: <div id="wrapper-footer">
42: <div id="footer">
43: Based on a theme by <a href="http://ryanoneill.com">Ryan O'Neill</a> | Powered
44: by <a href="http://www.microsoft.com/en-us/office365" target="_blank">SharePoint on Office 365</a>
45: <br />
46: Content and images Copyright © 2011 Greg Postlewait
47: </div>
48: </div>
49: <!-- END THEME CONTENT -->
50: </form>
51: </body>
52: </html>
And very quickly we have a nice looking page!
Last step is to modify our web page to make use of the content placeholders on the masterpage.
1: <%@ Page
2: Language="C#"
3: masterpagefile="../_catalogs/masterpage/gpc.master"
4: inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document"
5: title="default_gpc" %>
6: <asp:Content id="Content1" runat="server" contentplaceholderid="NavPlaceHolder">
7: Navigation
8: </asp:Content>
9: <asp:Content id="Content2" runat="server" contentplaceholderid="MyContent">
10: This is where I need to say something about this site!
11: </asp:Content>
Which produces a simple two column layout where I need to fill in the blanks with something useful and important, also known as “content”.
What is remaining is general content development. You would create additional pages as we created the default_gpc.aspx page and link them as needed.
It is also worth spending some time within SPD while editing a page, especially on the Insert tab. There are a few useful SharePoint. For example, you can quickly add a weather control by adding this to your markup:
1: <%@ Page
2: Language="C#"
3: masterpagefile="../_catalogs/masterpage/gpc.master"
4: inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document"
5: title="default_gpc" %>
6: <%@ Register Tagprefix="Controls" Namespace="Microsoft.SharePoint.Spx.WebSite.Controls" Assembly="Microsoft.SharePoint.Spx.WebSite.ApplicationPages, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
7: <asp:Content id="Content1" runat="server" contentplaceholderid="NavPlaceHolder">
8: Navigation
9: </asp:Content>
10: <asp:Content id="Content2" runat="server" contentplaceholderid="MyContent">
11: This is where I need to say something about this site!
12: <br />
13: <Controls:WeatherControl runat=server id="WeatherControl1" LocationCode="23462" />
14: </asp:Content>
Which produces the following. Chances are additional CSS work is needed to make it appear the way you like!
Even though Office 365 lacks the ability to make these changes through the browser it doesn’t mean you are limited to their themes and layouts. Do bear in mind that sites on Office 365 are intended for “brochure-ware”, or more static content. Adding robust webparts and interactive functionality is possible, however, it will require additional pieces of markup in the masterpage that have been removed. For many folks this is an acceptable trade-off.
Thanks for reading this long post. I look forward to your comments!