SharePoint Branding for Education


Over the past few months BFC Networks have been working hard to change the way SharePoint looks in the education space.  By default SharePoint is very bland and doesn’t love much in its role to engage users. 

At BETT 2012 BFC Networks were proud to have Microsoft use the design on their stand to demonstrate how SharePoint doesn’t have to look like it doesn’t out of the box but instead it look existing, engaging and relevant to the education sector.

We are announcing today that we are now offering the design to any schools with SharePoint 2010 allowing them to change their environment to look attractive for their school.  The design will be available in the BFC Shop in a few weeks times but orders can now be taken.

If you like the design and want to use it for your SharePoint 2010 please get in touch by emailing and we look forward to hearing from you.

Team Site


Staff Portal Page


MySite Profile Page



Click image to see full view of the image.

Live@edu Branding


In this blog post we are going to brand our live@edu Outlook Live Web Access. 


By default you get the standard yellow theme which is a collection of 3 images and some colouring.  This can all be changed within the domain management which you can access with your admin user for live@edu.

Note: Any changes you publish can take up to 24 hours to be deployed if you have kept to the image size guidelines.

Go to and login with you live@edu admin account.

Select the domain you wish to manage.


Down the left hand side you will see a navigation bar.  Select Co-branding and then Outlook Live.



There are 3 images in total.  Here is what they are by default.

The Organisation Logo

Central Background Banner

Side Background Banner
image image 

To help understand where these are I have branded a site with 3 colours, Red, Blue and Green for you to see where each of the images sit.


When creating new images for your site you should meet the requirement of the size otherwise you will have problem uploading the images and publishing your changes.  You should save the file type as a PNG.

Organisation Logo (Red)
Max. height (pixels): 42
Max. width (pixels): 60
Max. Colour (bit): 32
Max. size (KB): 30

Background Banner (Blue)
Max. height (pixels): 159
Max. width (pixels): 1009
Max. Colour (bit): 32
Max. size (KB): 75

Side Background Banner (Green)
Max. height (pixels): 159
Max. width (pixels): 200
Max. Colour depth (bit): 32
Max. size (KB): 30

The side background banner on the left is the image you uploaded (green).  The image located on the right is a reflection of the image.

Application Colours

At the bottom of the Outlook Live Co-branding page there are several options to change the colours which are stored in the CSS file.

To help understand which colour is where on the page I put together a little chart.


Click to enlarge


Name Area on Site
Hover Colour: Red
  • Selected mailbox folder
  • Selected email
  • Hover over icon (New)image
Selected Colour: Bright Green
  • Hover over in top navigationimage
Hover Border Colour: Yellow
  • Border around hover over in top navigation
  • Border around individual emailsimage
Secondary selected border Colour: Purple
  • Hover over New item, move item and other Outlook functions
Header Text Colour: Light Purple
  • Name of organisation
  • Your display name next to your online presence
  • image 
Link Colour: Teal
  • Text in navigation drop down
  • Text in New, Move item etcimage
Sign Out text: Brown
  • Unknown
Theme Colour: Orange
  • Text in email previewimage

Previewing and Publishing your Design

We can preview our design before publishing it out for everyone to see.

Fill in your co-branding page, upload your images and fill in the colour for the application colour and click Save.


You won’t be able to see your design yet.  Down the left hand side click on Co-branding.

Then click on Preview changes.  Only your account will be able to see the branding changes.


Note: You may need to clear your internet cache before seeing the changes.

Once you are happy with your design hit the publish button.