How to: Style the Messenger Web Bar

  • Article

The Messenger Web Bar shipped with the recent release of the Windows Live Messenger Web Toolkit. The Web Bar provides a very usable default instant messaging experience for web sites – it includes a contact list, a profile area, and support for displaying ongoing conversations. It is meant to augment and not distract the user from your web site.

Since the Web Bar and all of the UI Controls are constructed using HTML and CSS, web sites have complete control over how the controls appear to the user. With this flexibility, there is a wide range of customizations that a web site can do, ranging from simply changing the font color, to providing a completely custom experience akin to some of the creations you might find on the CSS Zen Garden.

For the purposes of this tutorial, let’s stick with something in between. I won’t change the size and structure of the Web Bar; instead, I’ll focus on colorizing it to match three different themes: Dark, Blue and Pink.

Note: You can skip to the bottom of this tutorial to directly download these three themes.

The first step is to do an inventory of the different images used to compose the Web Bar. By inspecting the DOM of the bar in Firebug or IE8’s new developer tools, you will find that there are 7 images that need to be changed. These include the background image for the bar itself as well as an image used to construct the header of various dialogs.

Once you’ve customized these images to your liking, the next step is to create CSS that references these new images. For example, the CSS below updates the images used for the bar itself and the headers of the contact list and profile area.

 .MessengerBarControl.Bottom .MessengerBarControl_Container
{
    background-image: url(BgBottom.png);
}

.MessengerBarControl.Bottom .ProfileControl_Header,
.MessengerBarControl.Bottom .ContactListControl_Header
{
    background-image: url(Header.png);   
}

Now that you’re using the new images that you created, you may need to make further modifications to refine the experience. In all three of the included themes, the border color has been lightened, which required the border-color property to be updated throughout the bar. In the case of the Dark theme, text colors needed to be inverted. In the Pink theme, the Selected and Hover classes were updated to be a matching pink color. Here’s an example of the Pink theme in action:

We will be looking at incorporating these and other themes directly into the Web Toolkit in future releases. As always, please continue to provide us your feedback. Also: if you create a cool theme, let us know!

Thanks,
Steve Gordon
Development Lead
Messenger Web Platform