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

This is the third and last instalment of this series. We will have a look at the Navigation, Zone, and Advanced groups.

Navigation allows you to define how users can navigate on your site. This is a site setting, not just per page.
The first item under Navigation, called Location, allows you to select whether you want to display your navigation bar to the left of your site, on top of it, or both.

The second item, Hierarchy, allows you to define the hierarchy of your pages. For example, you can define which order your pages should be shown in, as well as whether a page should be placed under another page as a second layer (note: only two layers are possibly, you cannot place a page underneath a page that already has its own parent page).

How do these two now work together? Let’s say I’m putting the Member Login item below About Us:

If I set up my Location as left, it will be displayed as follows:

If I define Location as both (top and left), the top navigation bar will contain all items that are directly below the Top Level, whereas the left navigation bar will show any items that are below the current page (empty if there are none):

And lastly, if I set Location to top only, a second row will be added to the top level navigation

A zone is a predefined area on the current page to which you can add content. For example, you can have organise the layout of the page to use a top zone and two zones below it (one to the left, one to the right).
Each zone can be formatted by selecting the zone and clicking on Format. You can then choose what kind of fill should be used for it with 4 options available (No fill, Solid fill with a selected color, Gradient fill, and Image fill):

By clicking on Layout you can select from various templates how many zones you want and how they should be organised

Finally, the last item, Style Sheet in the Advanced group, allows you to enter your own CSS code. You can also see the currently defined styles by clicking on View default CSS, allowing you to better figure out which classes you could use to change the design of your site.

There are many uses for this. For example, by default you only have 3 width options, as discussed in Part 1. If you wanted to define your own site width, e.g. 1050px wide, you could actually enter the following code:
.MS_MasterFrame{        width:1050px;}

We’ve now come to the end of this series on the out of the box design possibilities of the Office 365 public website. New articles covering how to add content, as well as some tips and tricks on how to get more out of the public website will come soon!

8 thoughts on “Modifying the Design of your Office 365 Public Homepage – Part 3”

  1. Hi Rene,
    I like all your post in this website and it is really usefull and i would like to become a expert in sharepoint , i know sharepoint online in a average level but i will happy if i get best free resources online(as i cannot afford much right now) to learn sharepoint 2010, but i dont have coding knowledge will it possible, as a sharepoint specialist what is your advice to me to know about the sharepoint, sharepoint online and other microsoft products. I love learning about the microsoft products.

  2. Hi Rene,
    Thank you so much for the Reply Rene, Please do update me with the new tutorials and videos about the share point server and share point online.

  3. Rene, how do I remove thedark and light blue stripes from the header as well as the light blue bledding over the left top corner logo. (i assume i can add this code in the advance window but i have figure how to do this)

  4. Hi Oz,
    not sure which part you mean exactly as I think what you’re referring to largelyt depends on your ‘setup’. So which header style you have, etc.
    You could use something like the Internet Explorer Developer Tools (–_share-manage-govern/archive/667_using_internet_explorer_developer_tools_during_cssjavascript_development_for_sharepoint.html) to identify the corresponding elements and then define the CSS to hide them

  5. Rene, do you know if there’s a way to include links, not just pages, in the navigation?
    In my case, I have a same page used for different products:
    So I need to include multiple links in the navigation, not just Products.aspx

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.