CSS Guidelines (Messenger Connect)

Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

When you embed the Messenger UI controls on a webpage, the controls can be affected by the CSS rules that are defined for the page. You can avoid unwanted effects by following some simple guidelines when you define your style sheets. The practices described in this topic will help the Messenger UI controls appear consistently with the other content on your webpages.

To prevent your styles from interfering with styles that are defined for the Messenger UI controls, avoid applying styles directly to page elements, such as the DIV, SPAN, IMG, or BODY elements. The following example shows a CSS style that affects all of the IMG elements on a page.

img {
   padding: 5px;
   margin: 0px;

This style changes the appearance of the Messenger UI controls, because the controls are affected by changes to the IMG element. You can change IMG elements on your page without affecting the appearance of the Messenger UI controls by defining a separate CSS class that is applied only to the designated IMG elements, as shown in the following example.

img.MyClass {
   padding: 5px;
   margin: 0px;
<img class="MyClass" src="beach.jpg" />

Now the padding and margins are applied only to the images that you designate, and not applied to the images in the Messenger UI controls.

The Messenger UI controls are often reused, or nested, within other controls. When a control is nested, the same CSS classes are applied to both the UI control and the element that it is nested in. For example, by applying a style to the .ContactListControl class, you are actually applying that style to three discrete UI control instances: the Contact List Control, the contact list in the Messenger Web Bar Control, and the Contact Picker Control. Other examples of nested controls are the Profile Control, the Conversation Control and the Conversation List Control, all of which use the Display Name Control.

Typically you should apply styles globally to create a consistent look for the Messenger UI controls. However, sometimes you need to apply styles more specifically so that you do not affect controls that are instantiated within other controls. To achieve such styling, wrap the control markup in a DIV element and then apply a class attribute, as shown in the following example.

<div class="MyContactList">

Now you can apply styles to .MyContactList .ContactListControl{...} without affecting the appearance of other controls.

Most images in the Messenger UI controls initially reference a 1 × 1-pixel transparent GIF background image that is applied using the background-image CSS property. You can substitute your own images by overriding the background-image property.

In the Messenger UI controls, image files are grouped into larger images called tiled images. To display the desired individual image from a tiled image, use the background-position, width, and height CSS properties to select the portion of the tiled image to display. The background-position property specifies the X and Y offset to apply within the actual image for the left and top edges.

For example, consider a 16 × 16 pixel icon, the left edge of which begins 72 pixels into the tiled image. The top edge of the icon is at the top of the tiled image. For this image to be displayed properly, the X offset would be -72 pixels and the Y offset would be 0 pixels. The width and height properties would each be 16 pixels.