Modifying the Design of your Office 365 Public Homepage – Part 1

This article is part of a 3-part series describing the out-of-the-box customisation capabilities for the Office 365 public website.

1. Part 1 – Site, Page (this article)
2. Part 2 – Header
3. Part 3 – Navigation, Zone, Advanced

While the public website provided by Office 365 is based on SharePoint, it differs a lot in terms of design customisation and modification. For example, for a "normal" SharePoint site, you can add web parts to pages, and thus easily reference and show the contents of lists and libraries, or make use of the other functionalities provided by web parts. Furthermore, it is not easily possible to change the master page of the site if you’re using the P1 plan.

The public website however has got its own, unique way of "helping" you to change the layout and design of your site and the pages in it. In this series, we will look at the out-of-the-box design possibilities and see how they can be used.

Getting started
When you open your Office 365 public website for the first time, it will look something like this:

To start modifying it, click on Member Login to start the regular login process. Afterwards, you will see the "SharePoint backbone" of your site:

Looking at the navigation bar to the left, you can see the following four items:

1. Web Pages contains all pages from your public website. This is where you could create new pages, as well as edit or delete existing pages.
2. Images is an image library in which you can store image files that you want to display in your pages
3. Documents is a document library in which you can store documents that you want to provide on your pages through links
4. Templates contains templates of pages that you have created before. For example, you could create a template for your products, where you first design the page, and then save it as a template and reuse it for all products.

Let’s start by clicking on the link to our Home page which is the starting page when someone opens the public website. The page will be opened in edit mode, allowing us to make changes to it, to both design and content.

At the top of the page you can see the toolbar (similar to the Ribbon interface available in Office 2007 and 2010, and SharePoint 2010) that provides you with all available editing options grouped in three different tabs (Home, Insert, Design) and corresponding options inside.

This article series focuses on the tab group Design, with this article showing the two groups Site and Page. The second article will talk about Header, and the third and last article will discuss the remain three groups Navigation, Zone, and Advanced.

Site
The Site group contains three items, Color, Setup, and Footer. These items apply for the whole site and not just the currently opened page. So, if you make any change on the Home page, that change is also executed on the About Us, Contact Us, and Sitemap pages in the Web Pages library seen above (or any other pages that you have, of course).

Color allows you to edit the color scheme of the current site. A color scheme defines which items on your site are shown in which color (backgrounds, font colors, etc.) It contains various built-in color scheme, but you can also create your own custom color scheme.

Let’s see how changing the color scheme changes the design of our site. With the current color scheme, it looks like this:

Clicking on Color and selecting a new color scheme, the editor loads the new scheme and updates the preview window of our page, so that we can see the new colors after a second:

If you prefer to customise the color scheme to your own demands, click on Edit Custom Color Scheme. A new dialog will pop up, showing you the range of items that you can modify together with the currently set color.

Please not that if you change the colors in the Header section, they will still be overwritten if you change the Style oft the header (discussed in the next article). It is thus recommended to first make changes to the header style, and then update the colors in the color scheme

Setup allows you to set a few site specific options.

Under Page Setup, you can define the width of your pages. Three options are available: 100% (which would mean that the pages use the full width available) and the two fixed-width options 780px and 980px. Under Page alignment, if you have chosen a fixed page width, you can choose whether your pages should be aligned to the left, centrally, or to the right.

You can also define the background of your sites, as soon to the left and right when you have a fixed page width. Available options are Blank, Flat color, and Gradient. Where do Flat color and Gradient get their color from, I hear you ask? If you look at your color scheme again, you can see that it is actually defined there as Site background under Body!

Lastly, you can choose to display a Bing Search box on your site (which will be added to the top left of the page, and basically only allows visitors to search the web, not your site), as well as a link called "Member Login" in the navigation bar that allows you to access your web site as an authorised user.

The last item under Site, Footer, allows you to add links as well as text to the bottom of all pages in your site. Here, you could e.g. provide a disclaimer, or your company address, as well as other links that are relevant to your organisation (product related website, etc.).

Page
The Page group allows you to change two settings for the current page: the background as well as some generic properties.

How is the page background different from the site background? The page background is actually the area on your site below the header and next to (or below, depending on overall design; more in the third article of this series) the navigation, marked here by a red box:

While you cannot change the color for this area on a per-site basis (you can define the general color for all pages in your site under the site’s Color Scheme settings), you can define a background image for your page:

Please note that adding a picture to the background should be planned carefully, you want to avoid serving pages that look like the following:

Page properties gives you a lot more options. Clicking on it opens a dialog with two sections, Page Settings and Search Engine Optimization. You can change the title of the page, and you can decide whether you want to show this page in the navigation bar (and with which title) or not, as well as its position in the navigation.

Furthermore, you could even remove the header, the footer, and the navigation from the page!

As for Search Engine Optimization, it allows you here to add Keyword metatags as well as the description metatag