With the updates released this week, I would like to take some time to talk about styling the UI Controls, and perhaps more importantly, about how not to style the UI controls.

What is important to understand about the UI controls is that they are powered by your every day garden variety (X)HTML and CSS. They are not encapsulated by IFRAME elements, and live right on your own web page. This not only makes it very easy to add them to your site, but also to style them. You can refer to our online documentation to quickly get a list available CSS class names you can use to adjust the look & feel of the UI controls.

 

Crazy CSS

However, this also means that they are affected by what we call “crazy CSS”. In this case, you are defining CSS that simply affects too many elements. For example, you may define the following CSS:

   1: img
   2: {
   3:     padding: 5px;
   4:     margin: 0px;
   5: }


You might say, “well, that’s exactly what I want – padding around every image, but no margin!”. It will probably look good on your website, after all, you designed it that way. But if you are using the UI controls and included our pre-made styles (a wise decision), something is bound to go wrong. Let’s look at the Messenger Bar when the above style is applied (click for a larger image):

crazycss


Oops! We just forced every image, including those in the bar, to have more padding than the styles were designed for. Remember, the UI Controls live on your page, so by applying the style for “img” to your page, you not only affect your own images, but also those used in the UI Controls, such as the various icons!

Similar issues occur when you apply styles directly to for example DIV or SPAN elements, or perhaps even the BODY element for font weight, text align and so on. While we try our best to work around these problems, sometimes we need a little help from you, the developer. The best way to solve these problems is to add a separate CSS class to your own images. For example, “MyImage”. Once you add this class to your image using the class attribute in HTML you can then apply a style directly to that class, instead of every image on the page. For example:

   1: img.MyClass
   2: {
   3:     padding: 5px;
   4:     margin: 0px;
   5: }


Now the padding and margins are only applied to your own images, but not to those in the Messenger Bar and other UI Controls.

 

The Matryoshka controls

Like the famous Matryoshka doll, some of the UI controls are made out of other UI controls, and so on. It is important to remember that while those controls are inside other controls, they still have exactly the same CSS classes set. So, if you apply a style to for example “.ContactListControl”, you are in fact applying it to three controls: The Contact List control, the contact list in the Messenger Bar, as well as the Contact Picker control! Other examples of such controls are the Profile control, the Conversation control and the Conversation List control. All of these use (for example) the Display Name control, Presence controls, and so on.

While most of the time you will want to create a consistent look for the UI controls (and so, style them globally), other times you need to be a bit more specific in order not to affect the controls inside the bar or other controls. You can do this by wrapping a control in a DIV element and applying an additional class to it, like in the example below. This way, you can apply styles to “.MyContactList .ContactListControl” without affecting other controls!

   1: <div class="MyContactList">
   2:     <msgr:contact-list></msgr:contact-list>
   3: </div>


To stay on the subject of objects within objects, let’s also take a look at the way we deal with the various images in the controls. If you’ve looked at the images we use in the controls, you’ll notice that almost every single one of them points to a single one by one pixel transparent GIF image. We then apply a background image using CSS to that image to make it show up. This way, you can easily substitute our images for your own, by simply overriding the “background-image” CSS property.

But wait, there’s more! In order to save time and bandwidth, we have created a so called “tiled” image. In other words, we have put all our images into two or three bigger images, and then using background positioning (using the “background-position” CSS property) to show the correct one. So, in order to change the images used by the controls, you will also have to set the background position to either your own values (in case you want to use image tiling as well), or the default. For example:

   1: .Dialog_Header
   2: {
   3:     background-image: url(http://www.example.com/image.png);
   4:     background-position: 0px 0px;
   5: }

 

To learn more about styling the UI controls, check out this blog post by Steve Gordon, or go to MSDN for our online documentation. Happy styling!

Cheers,

Siebe Tolsma
Software Development Engineer
Messenger Web Platform