The Basics to Yahoo! Messenger 6.0 Skins

Why the Basics?

With each new version the skins have become more and more complex, yet this time there are many customisable options that only really a program or another automated work could do to perfection. Saying this, the files you need to edit are fairly easy to understand and self explanatory if you wish to experiment in this area.

Changing Skin

To change skin, view>>change skin...
This lists the available skins, and if available, shows a preview. If you like it click OK. The good news is this list refreshes each times its called up, and each time you click ok, the skin refreshes, meaning you can use trial and error in your skin without constantly refreshing Messenger!

Where are the skins!

The files for the skins are located at this folder:
c:\program files\yahoo!\Shared\Graphics\
This folder may change depending on installation folder and locale settings.

What are all those files?

This tutorial does not go into detail about what each and every file is and does, this is left to the reader, however another tutorial site does list what each xml and bitmap file is for, you can find that here: http://www.modernmorph.com/

Ready Made Skins

For some ready made skins, or for some examples, visit This Site for a variety of skins.

XML Files

The skins now use XML files, this is a relatively new file format for storing information.
The format for an xml file item is:

<type name="name" value="value">

<color name="back" value="ffffff">

Yahoo! just uses definitions, which means the user interface for yahoo! just picks the definitions it needs out of this file for rendering.

Step 1: Make a copy

I highly recommend you edit an existing skin, you do not start from scratch!
Go to the folder stated above, and choose any of the existing skins, for example, Indigo.
Right click on the Indigo folder, and click "Copy". Now right click a white area and select "Paste".
A folder called "Copy of Indigo" will be created. Right click it, select "Rename" and call it what you want your skin to be called.

Step 2: Name the Skin Properly

To properly name the skin, you have to change an XML field. Don't be scared!
Go into your newly created folder, and find the file Indigo.xml. Right click, select rename, and call it the name of your skin, plus .xml.
Now you need to open the file in a text editor. Hold shift, right click the file, select open with... and choose notepad.
Find the entry SkinName="Indigo" and change Indigo to the name of your skin, for example "HelpBytes".

<skin version="2"
    compatible="2"
    AuthorName="HelpBytes"
    AuthorURL="http://www.helpbytes.co.uk"
    Signature=""
    SkinName="HelpBytes"
    PreviewImage="preview_helpbytes.jpg">

If you want, you can also edit the other fields like I have.

Step 3: Trial and Error -> Colours, Fonts etc..

You should now be able to go to View>>Change Skin... and see your skin name!
Click it, click OK, and your skin will show, for now though, it looks the same as the Indigo.

From here it's trial and error, all the fields contain names you MUST NOT change, the values are in hex colour format, RRGGBB where R=Red, G=Green and B=Blue. Each is in hex format, 1-9A-F. An example is: FFFFFF - White, 000000-Black 336699- The blue used for this site.
Change a bit, the names explain what you're changing, save the xml file, then view>>change skin, click OK, and see what effect that had.
Here is a Color List. Do not include the #.

For example, the "back" color. Change it to 336699 . This will make most of the screen the same colour as the top of this page.
The text will be unreadable, if you now look at the button, toolbar and tab items you could make these ffffff which makes them white and readable!

Step 4: The Images

Not everything can be changed by the colours, you must change the images. This is easier.
You can see what the image controls, and you can edit it in any program, even paintbrush.
Again, edit a file, save, view skin, then change as required. The Skin may have multiple columns, these account for mouse over etc...

Step 5: Make the preview Image!

If you want to share, make the preview image, this is the image that shows on the skin selection screen!
Make a screenshot of the skin in action, add any information you want to, then save it. Save it as the file you specified as PreviewImage in the xml file.
For example, in the above example, it would be called preview_helpbytes.jpg. Make it the same size as the existing image otherwise it wont fit the box!