Co-Brand Outlook Web App and Windows Live Services

Domain administrators can customize the look and feel of Outlook Web App to reflect their organization's brand. This process is known as co-branding. You can also customize the appearance of the Web site header and footer for other Windows Live services, such as Windows Live SkyDrive or Windows Live Spaces.

Before you can customize Outlook Web App using your own logos and images, your organization must be enrolled with Microsoft Live@edu. For more information, see Enroll Your Domain with Microsoft Live@edu.

Let's take a look at how to:

Important   You have to publish co-branding for your domain to turn off advertising in Windows Live services. You don't have to actually customize or co-brand services. However, to remove advertising, on the Customize Windows Live services page, you must click Publish to the Web. After co-branding is published and takes effect, advertising won't appear in Windows Live services.

Before you begin

Throughout the co-branding process, you'll be asked to load images, icons, and links. It helps to have them ready to load before you start. The following table describes the maximum height and width for the images. All images must be in the .png file format.

Area where image is used Maximum width (pixels) Maximum height (pixels) Maximum size (KB) Notes

Outlook Web App header organization image or logo

60

42

30

This image has a field to supply Alt text. Alt text is the text that appears in place of an image when a Web page is loading, when graphics can't be displayed, or when users hover over an image with their mouse.

Outlook Web App Branding Bar Background Image

1009

159

75

If you are using an image with gradient color, you'll achieve the best visual results by using a color that fades to white at the bottom.

Outlook Web App Branding Bar

200

159

30

The text color for this area is black. For better contrast, avoid using a dark background or dark images.

Windows Live header logo

93

21

20

This image appears across the Windows Live suite of services.

If your organization supports users in more than one language or region, you can customize your co-branding for each language/region pair. Each language/region has to be customized and published separately. To change the current language, on the Customize Windows Live services page, click Change next to the displayed language, select an alternative language from the drop-down list, and then click OK. Co-branding for the default language is used when you don't specifically configure additional languages and regions.

Customize Outlook Web App

1. Access the Co-branding Web page

  1. To access the Co-branding Web page, you must have a Windows Live Admin Center domain administrator account for your organization through Microsoft Live@edu.
  2. Sign in to the Windows Live Admin Center using the Windows Live ID of the Windows Live Admin Center domain administrator for the domain.
  3. On the Your domains page, select the domain name that you want to brand.
  4. In the navigation menu on the page that opens, select Co-branding, and then in the page that opens, in the Customize Windows Live services section, click Outlook Live.
2. Provide your organization information

  1. Enter the organization name and logo that your users will see in Outlook Web App.
  2. In the Name field, enter the name of your organization. If you don't enter a name, the word "Organization" appears in Outlook Web App, so make sure you enter a name. The organization name is limited to 30 single-byte characters. If you enter more than 30 characters, the organization name is truncated.
  3. Under Provide an image or logo for your organization, click Browse to select the image that will be displayed in the user interface of Outlook Web App.
3. Provide links for logoff redirection and organization-specific sites

First, enter the URL that your users will be redirected to when they sign out of Outlook Live:

  1. Under Provide a logoff redirection link, in the URL field, enter the URL that your users will be redirected to when they sign out of Outlook Live. Enter the full path of the URL. For example, it should start with http:// or https:// depending on the link.
  2. After you have entered the URL, click "Click here to test" to verify the URL is correct.

Now you can add links to other organization-specific sites. You can create up to six customized links that appear in the navigation menu of Outlook Web App. The navigation menu appears in the Outlook Web App header and is labeled "More".

Important   Outlook Web App now uses the same header links and customized links that you define for Windows Live. The Outlook Live-specific interface to add links to other organization-specific sites is available only to support domains that are in the process of upgrading to the latest version of Outlook Live. These links appear only to users of previous versions of Outlook Live. If you are configuring co-branding for the first time, ignore this section and use the customized sub-menu links for Windows Live header instead. If your domain is in the process of upgrading, to ensure a consistent user experience, make sure that the URLs defined for Outlook Live organization-specific sites and for customized sub-menu links are the same.

  1. In the Text field, enter the text of your organization-specific link. For example, if you want to link to the University Library Web page, enter University Library.
  2. In the URL field, enter the URL for your organization-specific link. Enter the full path of the URL. For example, it should start with http:// or https:// depending on the link.
  3. After you have entered the URL, click "Click here to test" to verify the URL is correct.
  4. Repeat these steps for each organization-specific Web site you want to link to.
4. Customize the look-and-feel of Outlook Live

Here you can create a theme for Outlook Web App.

  1. Select Enable the custom theme defined below. If you don't customize all of the following areas, the portions not customized will have the look-and-feel of the default theme.
  2. Under Branding Bar Background Image, click Browse to select the image that will appear on the top portion of Outlook Web App.
  3. Under Branding Bar, click Browse to select the image that will tile across the background on the top portion of Outlook Web App.
  4. Under Application Colors, enter all color values in hexadecimal format, such as 48D1CC. Don't enter a # symbol in front of the color value. To see a list of color values, see Color Table. If you enter a color value, the Selected color field autofills as soon as you enter enough characters to identify a unique color. You can also click Select for each field to display a color table and select a color. Enter color values in the following fields:
    • Mouse hover color
    • Selected color
    • Border color for selected item
    • Secondary selected border color
  5. Under Text Colors, enter color values in the following fields:
    • Primary link text color
    • Active text color
5. Save, preview, and publish your changes

After you save your changes, preview your changes before you publish to the Web. It may take up to 24 hours for your changes to appear in Outlook Web App.

  1. Click Save. If you want to start over, click Cancel changes.
  2. To preview your changes, select Co-branding > Preview changes, and then click the Preview link next to the Outlook Live service name.
  3. To publish your changes, click Publish to the web.

Return to top

Customize the Windows Live header and footer

1. Access the Co-branding Web page

To access the Co-branding Web page, you must have a Windows Live Admin Center domain administrator account for your organization through Microsoft Live@edu.

  1. Sign in to the Windows Live Admin Center using the Windows Live ID of the Windows Live Admin Center domain administrator for the domain.
  2. On the Your domains page, select the domain name that you want to brand.
  3. In the navigation menu on the page that opens, select Co-branding, and then in the page that opens, in the Customize Windows Live services section, click Header and Footer.
2. Select the services you want to co-brand

You can select the Windows Live services that will display your brand customizations when users are signed in with their Live@edu Windows Live credentials.

  • Under Select the services you want to co-brand, select each Windows Live service that should display your brand customizations. You can select from the following services:
    • Admin Center
    • SkyDrive
    • Spaces
    • Mobile
    • Photos
    • Events
    • Groups
    To learn more about each service displayed in the Windows Live Admin Center, click the service name.
3. Add your logo to the Windows Live header

On the Windows Live Header and Footer page, add the logo image that you want to appear across the Windows Live suite of services.

  1. Click Browse to select the image that displays in the Windows Live header.
  2. Under Logo link, enter the URL that your users will be redirected to when they click the logo image. Select Click here to test to verify the URL target page.
4. Customize menus in the Windows Live header

By default, the Windows Live header displays links to other Windows Live services. To remove navigation links from the Windows Live header or to customize the links that appear in expandable menus, follow these steps. To remove all menu items from the Windows Live header, see Turn off all Windows Live links in the Web page header.

In the Top-level menu section, select the menu items you want to appear in the Windows Live header. You can show or hide the following:

  • Home   This link goes to the Windows Live home page of the user who is signed in (http://home.live.com).
  • Mail   This link opens the user's Outlook Live mailbox in Outlook Web App.
  • Profile   This link opens the user's Windows Live profile. The profile information here shows interests and personal information that is used for social networking.
  • People   This link opens the user's personal contacts in Outlook Web App.
  • SkyDrive   This link opens the user's SkyDrive page where they can store and work on documents.
  • More   You can customize the More menu to hide or show only the items you want to appear. You can also add links to the Custom sub-menu to enable quick navigation to sites you define.
  • MSN   You can rename the MSN menu, and you can customize the links that appear there.

In the More menu section, select the menu items that you want to appear. Notice that you can also select whether to hide or show the separating space between menu items. You can show or hide the following menu links:

  • Custom sub-menu   The custom sub-menu contains only those links that you define. If you hide this link, you won't be able to add customized links to the More menu.
  • Calendar   This link opens Windows Live Calendar.
  • Events   Windows Live Events is being retired. We recommend that you hide this menu item.
  • Photos   This link opens the user's Windows Live Photos page.
  • Groups   This link opens Windows Live Groups, where users can create public interest groups and participate in group conversations.
  • Spaces   This link opens the user's Windows Live space, where the user can write and post blog entries and create a customized page.
  • Mobile   This link opens the user's Windows Live Mobile page, where the user can set up Windows Live on a mobile phone.
  • Desktop Pack   This links opens Windows Live Essentials, where users can download Windows Live desktop applications.
  • All Services   This links opens a page where users can navigate to any of the Windows Live services, MSN sites, or other Microsoft sites that support Windows Live ID.

In the Custom sub-menu section, you can add links to organization-specific sites. You can create up to six customized links that appear in the More menu in the Windows Live header.

  1. If you want the links to your organization-specific sites to open in a new browser window, select Sub-menu items open in new browser.
  2. Type the label that you want to use to identify the sub-menu on the More menu in the Sub-menu name field.

In the Custom sub-menu links section, follow these steps for each organization-specific link:

  1. In the Text field, enter the text of your organization-specific link. For example, if you want to link to the University Library Web page, enter University Library.
  2. In the URL field, enter the URL for your organization-specific link. Enter the full path of the URL. For example, it should start with http:// or https:// depending on the link.
  3. After you have entered the URL, click "Click here to test" to verify the URL is correct.
  4. Repeat these steps for each organization-specific Web site you want to link to.

If you selected to show the MSN menu, you can customize the name of the menu and the links that appear there. Follows these steps:

  1. Under Rename the MSN menu, in the Text field, enter the name that you want to display instead of MSN.
  2. Each of the MSN sub-menu links goes to an MSN site, like Music or News, for example. To change the link label, replace the text in the label field. To change the link destination, replace the URL in the URL field. You can customize the label and URL for nine MSN sub-menu links.
5. Customize or suppress content modules

Windows Live services integrate content on their sites through RSS feeds from MSN. You can suppress or customize the content that displays. For example, you may want to customize the content on the Photos site to advertise a photography class. If you want to customize the content, the RSS feed that you specify must be in RSS 2.0 format. Repeat the following steps for each page you want to customize:

  1. If you want to turn off RSS feeds for a page, in the content module section, click the checkbox Select to disable RSS feed.
  2. If you want to customize the content that displays, enter the URL for the RSS feed source. Select Click to test to verify the URL is correct.
6. Add new footer links and customize footer links

The Windows Live footer links appear at the bottom of the page on Windows Live sites. They don't appear in Outlook Web App. You can't change or remove the links that go to Microsoft trademarks, Privacy and Legal statements, or Program Terms.

You can add up to two new links that will appear in the footer next to the standard links. For example, you may want to include a link to internal terms of use.

  1. Under Add new footer links, in the Link 1 text field, type the name for the new link.
  2. In the Link 1 URL field, type the full URL of the link destination. Select Click here to test to verify that the correct page displays.
  3. Repeat these steps for Link 2.

In the Customize the footer links section, you can change the text and URL's for the Account, Feedback, and Help Central links that appear at the bottom of each Windows Live Web page. If you don't customize these links, the default links are used.

  1. Under Account management link, type the link text to display.
  2. Enter the URL for the customized link destination. By default, this link opens the user's Windows Live account page. We recommend that you redirect this link to the Outlook Live account page by setting the URL to http://outlook.com/ecp.
  3. Under Feedback link, type the link text to display.
  4. Enter the URL for the customized link destination. By default, this link opens the interface for submitting feedback about a Windows Live account.
  5. Under Help site link, type the link text to display. The default name is Help Central.
  6. Enter the URL for the customized link destination. By default, this link opens Windows Live Help. We recommend that you redirect this link to your internal help desk, or to http://help.outlook.com.
7. Save, preview, and publish your changes

After you save your changes, preview your changes before you publish to the Web. It may take 24 hours for your changes to appear in the Web page.

  1. Click Save. If you want to start over, click Cancel changes.
  2. To preview your changes, select Co-branding > Preview changes > Preview.
  3. To publish your changes, click Publish to the web.

Return to top

Turn off all Windows Live links in the Web page header

You can configure co-branding so that Windows Live links are hidden from the Web page header that is displayed in both Outlook Web App and Windows Live sites where users authenticate by using Live@edu credentials.

1. Access the Co-branding Web page

To access the Co-branding Web page, you must have a Windows Live Admin Center domain administrator account for your organization through Microsoft Live@edu.

  1. Sign in to the Windows Live Admin Center using the Windows Live ID of the Windows Live Admin Center domain administrator for the domain.
  2. On the Your domains page, select the domain name that you want to brand.
  3. In the navigation menu on the page that opens, select Co-branding, and then in the page that opens, in the Customize Windows Live services section, click Header and Footer.
2. Hide all menu items

On the Windows Live Header and Footer page, scroll to the Top-level menu section, and select the Hide all menu items checkbox.

Return to top

Change your co-branding images

To change the images that you uploaded to customize Outlook Web App or the Windows Live header, repeat the steps in this procedure. Before you browse for a new image, make sure that you select the Delete your image check box. Selecting this check box will force the new image to overwrite the existing image. If you don't select this check box, browsing for a new image will result in an error.

Return to top

Unpublish from the web

If you no longer want to display co-branding to your users, or are making big changes, you can unpublish, or remove, your customized settings.

  1. Sign in to the Windows Live Admin Center using the Windows Live ID of the Windows Live Admin Center domain administrator for the domain.
  2. On the Your domains page, select the domain name from which you want to remove co-branding.
  3. In the navigation menu on the page that opens, select Co-branding.
  4. Click Unpublish from the web.

Return to top

Page view tracker