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 http://domain.live.com 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.
Images
There are 3 images in total. Here is what they are by default.
The Organisation Logo
Central Background Banner
Side Background Banner
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 Colour: Bright Green |
|
| Hover Border Colour: Yellow |
|
| Secondary selected border Colour: Purple |
|
| Header Text Colour: Light Purple |
|
| Link Colour: Teal |
|
| Sign Out text: Brown |
|
| Theme Colour: Orange |
|
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.
Excellent — thank you for doing this! It’s not exactly clear when you’re in the branding area what’s what.
Thank you Alex!! This step-by-step is really appreciated.
Many thanks. That’s much clearer than the official docs.