Share via

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

Comments

  • Anonymous
    March 30, 2009
    PingBack from http://blog.a-foton.ru/index.php/2009/03/30/how-to-style-the-messenger-web-bar/

  • Anonymous
    March 30, 2009
    One of the pieces of feedback we got from the launch of the Web Bar was “ give me some pre-defined themes

  • Anonymous
    March 30, 2009
    download links for the themes are not working

  • Anonymous
    March 31, 2009
    Thank you for submitting this cool story - Trackback from DotNetShoutout

  • Anonymous
    March 31, 2009
    Hey Marius, Looks like the links expired. We've replaced them with working ones - let me know if you run into any other problems. Thanks, Steve

  • Anonymous
    April 04, 2009
    hello my name is daniele I ate a favor to ask you help me put in the tool kit web page on my site .... I read the guide and I understood only the application id and secret key, the rest no ..... please help me are not very good my email is danielx79@live.it

  • Anonymous
    May 01, 2009
    With the updates released this week , I would like to take some time to talk about styling the UI Controls,

  • Anonymous
    June 07, 2009
    Taking this a step further we have built a style services for the messenger web bar: http://messenger.soulsolutions.com.au It uses Adobe Kuler to select from thousands of themes and applies to them to the controls via a dynamic stylesheet and images. We will be launching it soon but thought your readers may want a sneek peek. John.

  • Anonymous
    July 09, 2009
    Hi..I would like to change the size of the Messenger Bar. Please, give some advise. Thanks in advance. (E-mail: cjsb01@hotmail.com)

  • Anonymous
    August 23, 2009
    The Messenger Bar works with style sheets, as long as you don't use themes :-o I got the sample app working, but for the longest time I couldn't get the Messenger Bar to work when I moved it in to my own site. RefreshMessengerToken.aspx never got called and i stayed signed out without any errors. Finally I figured out that if I removed the theme from my web config (i.e. changed from <pages theme="Standard"> to <pages theme="">), the Messenger Bar started to work and my break point in RefreshMessengerToken.aspx got hit. I tried clearing all content from the css file of my theme, but still I couldn't sign in. However, when referenced the css file with a link tag instead of through a theme (<link rel="stylesheet" href="~/App_Themes/Standard/css-content.css" type="text/css" />) the Messenger Bar started to work fine again. What's going on with the Bar styles and how can some fonts and colors prevent it from working?

  • Anonymous
    September 13, 2010
    It is not working for me, its not changing my webbar color instead the image is behind the webbar, cause i see a little piece of pink on the end of my webbar, the other 2 are working. any ideas

  • Anonymous
    July 26, 2011
    Very nice thanks, I have similar tryings on my website - http://www.heavyhookedup.com - Download if you can use it