Reshaping Your Windows

Changing the look of windows is one thing but being able to actually reshape one of them opens a new world of possibilities. This subject has never been tackled with before in the world of Messenger skins. For that reason, this section will try to give you all the information you need to know about shapes in general.

Messenger Plus! Live lets you do the following two things: change the shape of some of Messenger windows and modify their sizing information. Only the contact list and the chat windows can be re-shaped but the feature will be extended to more windows in the future if there's enough demand for it. In order to simplify things, only the Contact List will be analyzed in this documentation, however, the same principles apply to all windows. Everything you put in <ContactList> can be put in <ChatWnd> to re-shape chat windows.

The skininfo elements that will allow you to perform these modifications are <Region> and <Dimensions>, both can be found in the root of <SkinInfo> (see schema file for more details). Note that these two elements are common to every resource group specified in your skin and that they'll only be loaded if at least one Messenger resource is replaced by a group. Here is a summary of the possibilities offered by these elements:

• Region. A new shape for the contact list window can be specified here. By default, the shape of Messenger's contact list is a rectangle with rounded corners. The new shape can be anything of your choice, does not depend on the original shape and is created with a group of rectangles and pictures.
• Dimensions. Two different things can be defined here: size restrictions for the width and height of the contact list and a new set of resizing border areas that allow people to resize your newly shaped window the way you want. You'll see more about that later on.

Regions in Action

Let's start with a picture demonstrating what <Region> can do for your skin:

As you can see, "anything of your choice" really means anything. In this example (author's note: please be tolerant, I'm a software developer, not a graphic designer), the shape of the window is created with a single black and white picture. More complex shapes can be created by combining several pictures and rectangles to create cool (and more useful) results. It is important to note that the inside of the eyes is not part of the shape. Clicking inside them activates the window below. This was done to demonstrate that regions are not necessarily just about the outside border of a window.

It is up to you to find good ways to exploit this feature for your creations. Remember however that the contact list window isn't just about the logon frame. Using the shape of a cat's head as model, it would really be difficult (but not impossible) to make a decent arrangement for the contact list itself (displaying your name, list of contacts, toolbars, ...). Also, because borders can't be smoothed with per-pixel transparency, you should avoid adding big round shapes in your design as they'll tend to look bad if the window is resized or too big.

This example uses two picture files: one for the region mask and the other for the actual background as displayed:

cathead_region.png	cathead_bkg.jpg

A picture mask works like this: by default, anything that is white is considered to be transparent. The color used for transparency can be changed to any other RGB value if needed. If a transparent GIF or PNG picture is used for the mask, all the transparent pixels are considered to be the same as the key color. This means that the transparent areas will still look transparent but if your picture has some white in it, it will be considered transparent as well. For that reason, using transparent pictures for masks is not recommended as it can lead to unexpected problems.

The background is a simple picture added as a new resource in the skininfo file. It works exactly like in the Neko-Koneko example demonstrated in Using Pictures: a new resource id is created for the background and the style sheet file is modified to use this new id for the main background element. Note that although some areas are supposed to be transparent, you should always fill the whole picture appropriately. Remember that some users choose to display the generic default Windows border around the contact list (with the title bar and menus). In that specific case, regions are not applied and the entire picture will be visible.

Creation of a New Shape

A <Region> element contains a single <ContactList> element that in turns contains a list of <Rectangle> and <Image> elements. Rectangles allow you to quickly create rough shapes. Use them whenever possible as they require less memory and less cpu usage when the window is resized. Keep the images for anything that you can't do with the rectangles. Every element is interpreted in the order specified in the file and each element can either be added or subtracted from the final region. New regions are completely empty by default.

Coordinates for the rectangles and the images can be specified in pixels or in percentage of the total width and height of the window (pixels are used by default). Positions can be specified from any border of the window (you can specify 0,0 in the bottom/right corner of the window if needed instead of in the top/left corner). Here is an example using two rectangles:

<Region>
    <ContactList>
        <Rectangle>
            <Left Unit="percent">30</Left>
            <Top  Unit="percent">0</Top>
            <Width Unit="percent">70</Width>
            <Height Unit="percent">100</Height>
        </Rectangle>

        <Rectangle>
            <Left>0</Left>
            <Top>0</Top>
            <Width Unit="percent">30</Width>
            <Height Unit="percent">35</Height>
        </Rectangle>
    </ContactList>
</Region> 

If you copy paste this code in a skininfo file to test it, remember to also replace at least one resource, like a string. If no resource replacement is detected, Messenger Plus! will assume that the skin does not need a particular shape and will ignore anything talked about in this section.

Here is the region resulting from the code (green areas are the part of the window that will be visible on screen):

Note that if instead of aligning the second rectangle with the top you wanted to align it with the bottom, you'd need to replace the "<Top>0</Top>" line with "<Bottom>0</Bottom>".

Now that we've got the basic shape of our window, let's see how to smooth its corners a little. We'll concentrate on the top/left and top/right corners for this demonstration but the same method can be applied everywhere. If we keep the shape as it is now, you'll notice that to round the corners, we'll need to remove pixels from the current region. Because we want something that's not rectangular, we'll use a picture (you could recreate the same thing with small rectangles as well but that would be a lot of code).

Pictures are used exactly the same way as rectangles and have the same coordinate system. If the width or height is not specified, the size of the picture will be used so remember that if you want your picture mask to be applied on the whole window like in the Cat Head example above, you'll need to specify 100% for the width and height.

Here is the additional XML code to be added after the rectangle code (if it was added before, it would have no effect on the region as it would be subtracting a shape out of nothing).

<Region>
    <ContactList>
        ...

        <Image Integration="subtract">
            <Source>
                <File>border-TL.png</File>
            </Source>
            <Position>
                <Left>0</Left>
                <Top>0</Top>
            </Position>
        </Image>

        <Image Integration="subtract">
            <Source>
                <File>border-TR.png</File>
            </Source>
            <Position>
                <Right>0</Right>
                <Top>0</Top>
            </Position>
        </Image>
    </ContactList>
</Region> 

The final region using these two pictures would be:

Sizing Borders

When you change the shape of the contact list window, Messenger Plus! does not modify the internal sizing margins recognized by Messenger automatically. As far as Messenger is concerned, the margins are still on the very left, top, right and bottom borders of the whole window and in the example above, this would prevent users from resizing their contact list on most of the left side as it's not aligned with the left border of the window anymore.

Although this may seem to be a trivial problem at first glance, complex shapes (like in Cat Head) can rapidly render most if not all sizing borders inaccessible, preventing users to modify the size of the window entirely. Without additional code, our example can currently be represented like this:

Of course, Messenger Plus! gives you a way to correct the situation in your skininfo file. New border areas can be defined and associated or the resizing operation of your choice. For each area, you specify an area kind telling Messenger whether the border is supposed to be part of the left, the top, the right or the bottom side of the window. Corners like top/left and top/right for diagonal operations are also supported.

All of this is done in the <ContactList> element of <Dimensions> (in the root of <SkinInfo>, like <Region>). Multiple <BorderArea> elements are added in <Borders>, one for each new resizing area defined in the window. More than one area can be defined with the same border kind if needed. Is some areas overlap, the first one listed is used. Here is the code needed to add the missing left and bottom resizing borders to the example above:

...
<Dimensions>
    <ContactList>
        <Borders>
            <BorderArea Kind="SizeBottom">
                <Left Unit="percent">0</Left>
                <Top Unit="percent">34</Top>
                <Width Unit="percent">30</Width>
                <Height Unit="percent">1</Height>
            </BorderArea>

            <BorderArea Kind="SizeLeft">
                <Left Unit="percent">30</Left>
                <Top Unit="percent">35</Top>
                <Width Unit="percent">1</Width>
                <Height Unit="percent">65</Height>
            </BorderArea>
        </Borders>
    </ContactList>
</Dimensions>

In this code, a first area is created for the small horizontal border on the top left. A bottom border of the size of the entire line is used (30% in width like the second rectangle, starting at 34% of the height from the top to reach 35%, the total height of the second rectangle, creating a border that uses 1% of the height). Same thing for the second area created for the long vertical border of the window, this time a left border. Everything is done in percentages to match the shape itself and to simplify the example. In real world scenarios, it is generally better to specify the width and height of these borders in pixels, not in percentage.

The entire outer border of the new window's shape is now resizable. Note that your new shapes don't necessarily have to be resizable from every border. That's also why Messenger Plus! does not attempt to do any of this automatically. The choice is given to you to only allow specific parts of your layout to accept sizing operations.

Fixed Dimensions

Adding new sizing borders is one thing but what if your skin is so complex that it needs some restrictions concerning its size? Not every skin can be designed to fit in any kind of deformed shape. For that reason, Messenger Plus! lets you impose restrictions on the size of the contact list window. The size can either be fixed or restrained between a predefined minimum and maximum value. Note that what you specify here is the size of the window's client area: if the generic Windows borders and menus are shown, the total size of the window will be bigger but at least, your skin will be safe (that's not something you need to care about though).

Size restrictions can be applied indifferently to the width and the height of the contact list by using the <Size> element of <Dimensions>\<Contactlist>. If a fixed or a maximum size is set, the window's ability to maximize is disabled. Here is an example showing how to restrict the size to a set of fixed values (as used for Cat Head) :

<Dimensions>
    <ContactList>
        <Size>
            <Width>
                <Fixed>450</Fixed>
            </Width>
            <Height>
                <Fixed>448</Fixed>
            </Height>
        </Size>
    </ContactList>
</Dimensions>

If instead you prefer restricting the window's height to be between 100 and 800, the <Height> element needs to be written like this:

<Height>
    <Minimum>100</Minimum>
    <Maximum>800</Maximum>
</Height>

Conclusion

You now know about all the components that allow new shapes to be designed. If needed, click here to get a Skin Pack that sums-up the examples you've studied in this section. Note that this pack is not meant to be used as a standalone skin as it will cause parts of your contact list to be inaccessible (only the shape is modified in this example, definition files and style files would need to be changed as well to match the shape, like in Cat Head).

Creating new shapes and modifying the default resizing behavior of Messenger can be time consuming but if used wisely, this feature alone will help place your skin in a very different category. Remember that when people search for skins, the first thing they generally have in mind is "I want to change how my Messenger looks" and a change of shape can never go unnoticed.

Shape modifications shouldn't be over used though. Early excitement over this kind of feature must not take over commonsense. The contact list is the entry point of Messenger and if only one shape had to be changed, it would certainly have to be the shape of this window. Adding too many bizarre things to your skin may alienate your users in the long run and doing a proper shape modification for the contact list is guaranteed to keep you occupied for quite some time already :-).

See Also

Specialized Subjects, Using Pictures.