Contributors > Skinning Documentation > Skinning for Skype Toolbar

Skinning Documentation for the Skype Toolbar

How can I create my own skins for the Messenger Plus! Skype Toolbar?

Here, users will find details steps by steps to create a skin for Messenger Plus! for Skype.

How it works

Skinning in Messenger Plus! for Skype toolbar works similarly to the method currently being employed for WLM in that a «Skins» folder is created in the "Yuna Software/Messenger Plus! for Skype" program folder. Resource images for each individual skin installed are contained within the "img" subfolder.

The toolbar has been designed to adapt and reflect the maximum size of an image used as long as the image retains the identical resource name regardless of it's width and height. DO NOT rename any images inside the folder. Just replace them with the ones you would like to see applied on the toolbar.

For example, if the default image for a button having a width of 41px is replaced by a new image of 350px width, the resulting toolbar will be a wide 350px. Since a standard toolbar is not intended to be this wide it would defeat the toolbar's function, however if the designer feels that he'd like to have a toolbar skin designed this way it's his artistic prerogative.

The same principle applies for the height of resource images. Following the previous example, if you replace a default image with one of 300px height, you'll end up with an extremely tall toolbar design with each button having a 300px height. Once again, this is left up to the designer's artistic prerogative. Our toolbar mechanism will automatically add the necessary top and/or bottom scroll bars according to the requirements of the resources being used.


Resource types:

We currently have two resource image types.
The first is applied for background images and the subsequent used for toolbar buttons. * All images require a PNG file format.


Background Images:

All images names preceded with "Bg-" characters are used for backgrounds.

  • Bg.png = main toolbar background (if you'd like the colorized toolbar system to affect your skin background, you'll need to use PNG files containing transparency. All transparent zones of your background image will be affected by this colorize feature.)
  • Bg-bott.png = is the resource image used for the bottom portion of the toolbar (Help zone). The same transparency/colorize issue stated above applies here so keep this in mind when designing a new image and how you'd like it to interact with the colorize feature.
  • Bg-top.png = is the resource image used for the top portion of the toolbar (Plus! logo zone). The same transparency/colorize issue stated above applies.

Button Images:

All images names preceded with "bn_" characters are used for toolbar buttons. They're usually followed by short descriptive names associated with their function. All buttons require four image states.
For example, the close button will call for:

  • bn_close.png = normal button in toolbar.
  • bn_close-2.png = mouse over state.
  • bn_close-3.png = pressed button /active button states.
  • bn_close-4.png = disabled button.

This same logic applies to all buttons except for the scroll buttons which only have two states.


Skin Info file:

The Skin Info file is an xml file that both identifies and retrieves information on each skin and control specific UI element such as the toolbar border width and radius, the group separators visibility and height. The XML file includes comments to inform users on how each element modifies the toolbar.

Here is an example of what an XML file for a toolbar skin looks like:

<SkinInfo>
  <Information>
    <Name>Skin Name</Name>
    <Id>skinid</Id>
    <UpdateId>skn_100</UpdateId>
    <Description>A description of the skin</Description>
    <AboutUrl>URL of choice</AboutUrl>
    <Version>1.0</Version>
    <Author>Author’s Name</Author>
    <Screenshot>
     <File>img/screenshot.png</File>
    </Screenshot>
    <Thumbnail>img/thumbnail.png</Thumbnail>    
 </Information>
 <Options>
  <Toolbar>
<separator-type>0</separator-type>
<separator-height>0</separator-height>
<border-width>1</border-width>
<border-radius>0</border-radius>
<border-color>a6a6a6</border-color>

</Toolbar>
</Options>
</SkinInfo>

**Please be extra careful to make sure that all the tags in the XML file are correctly closed before submitting a skin or else the skin will not be displayed properly or at all in Messenger Plus! for Skype.


Getting ready to publish the skin

Before publishing your skin on our website, you should prepare a couple of images that will give users an idea of what your skin will look like and what thumbnail to associate to your skin. Both this files should be inside of your img

  • thumbnail.png = Skin's Thumbnail.
    This file will help to visually identify your skin from the download page and eventually from the P&O panel as well. The image file will have to be inside the respective img folder for a skin and has a 100x100 pixels dimension.
  • screenshot = Skin's Preview.
    This image will give the user a preview on how your toolbar skin will look once installed on his computer. The image file will have to be inside the respective img folder for a skin and has a 850x600 pixels dimension.

How to submit a new toolbar skin on the website

Now the next step is to publish the skins and share them with the rest of the world:

  • 1. Create a Thumbnail for your skin (100x100)
  • 2. Create an image presenting how your toolbar skins looks (850x600)
  • 3. Carefully fill the upload form from the website
  • 4. Properly indicate your skin's thumbnail image to upload
  • 5. Properly indicate your skin's preview image to upload
  • 6. Click the Save button
  • 7. Wait for moderation to approve your skin