Live@edu Branding

Standard

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

image

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 http://domain.live.com and login with you live@edu admin account.

Select the domain you wish to manage.

image

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

image

Images

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

The Organisation Logo
image

Central Background Banner
image

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.

image

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.

image

Click to enlarge

image

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
    image
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.

image

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.

image

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

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

image

image

3 thoughts on “Live@edu Branding

Leave a Reply

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