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.



3 thoughts on “Live@edu Branding

Leave a Reply

Your email address will not be published. Required fields are marked *

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