This document applies to Amsn 0.94 skins. Please wait for a guide for 0.95. Thankyou!

Creating AMSN Skins

Terms/Jargon
Overview of skins
Thinking of a `theme` for your skin
Components of a skin
Actually making your skin
Treeview of a Skin's Directory
Description of Each File
Closing comments



Gui Pixmaps are the pictures used in the interface, eg the image for the change font button.
Gui Colours are the colours the interface will be in.

back to top


AMSN supports skins. This means it supports the customisation of its look and feel by the changing of gui pixmaps, sounds, gui colours, and emoticons.
An AMSN skin is a collection of images, sounds, and configuration files that combine to customise AMSN. In this document, I will explain how to create skins for AMSN.

back to top


A skin will usually have an underlying theme - a style, an idea, that is consistent throughout the skin. This could be just be the way your pixmaps look, it could be based on a specific thing like a film, or tv program, or it could be the `feel` it gives, which is reflected in the pixmaps, the sounds, the colours, and the emoticons if you include any.
An example of a skin following a theme of "metal"

• The pixmaps would be mostly grey, but with a metallic shiny effect. They could have slight blemishes of colour to brighten them up.
• The sounds could be noises you would associate with metal - swooshes like sliding doors, small clangs, clicks. Or perhaps noises related to machinery - bleeps, whirrs etc.
• The colours would probably be greys, although maybe a combination of grey and blue, to make it less dull.
• Metal is probably not a good medium for emoticons, so this theme would most likely not have a different set of emoticons.

back to top


First of all, it is important to make one thing clear. You do not have to iclude evry last pixmap, sound and emoticon in your skin. You can do as little or as much as you like, because AMSN will just fill any gaps with files from the default skin. It is a good idea, however, to complete one section, rather than having bits of each section, I.E. better to have all the pixmaps and no sounds than a few pixmaps and one sound and a few emoticons - otherwise you get a `patchy` feel to the skin.
Now to list the components you can include in a skin:

• Gui pixmaps (see Terms/Jargon)
• Gui colours (again, see Terms/Jargon)
• Sounds - these are for notification events, eg when someone sends you a message, when a contact signs on or off, etc.
• Emoticons - these are the faces and symbols you can insert into instant messages to liven them up and express emotion. These require a fair bit of effort and thought.

back to top


You need to create a folder for your skin. in that folder, you need to create four folders; "displaypic", "pixmaps", "smileys", "sounds"
The gui pixmaps are in gif format, apart from a few exceptions. The full list of pixmaps is listed below, with their filenames and description.

Again, note you do not have to do all of these, for example if you just wish to change the appearance of the chat window, you could change the status bar pixmaps, the file transfer pixmaps and the chat bar button pixmaps.
To create your pixmaps you will want to use a graphics program like The GIMP. The GIMP is available for linux and windows, and comes with most linux distributions anyway. If you don't have it, you can get it from its website.

There are only a few sounds - the sound for when someone signs in, for when someone signs out, for when someone sends you a message, for when you have new mail, and the alarm sound. Sounds for emoticons should also be placed in the sounds folder.

The gui colours and emoticons settings are contained in the settings.xml file to be placed in the skin folder.
The best way to start this is to use the default skin's settings file as a template. The background colour option names are:

• background1 - used for the background borders of Amsn, eg in chat windows.
• background2 - used for the background of the icon bar in chat windows and for the text showing peoples nicknames at the top of chat windows.

There are some more options you can set in the skin settings file, to do with Amsn's menus, balloons and so on.

• menubgcolor - the background colour of menus
• menufgcolor - the colour of text on menus
• menuactivebgcolor - the colour of a selected menu item
• menuactivefgcolor - the colour of text on a selected menu item
• balloontextcolor - the colour of text on a ballon.
• balloonbgcolor - the background colour of the ballons
• balloonbordercolor - the colour of the ballons' border (the same as balloonbgcolor for non-border)

All these options are set in the settings.xml file by enclosing the colour (in html format) in between tags. For example, for setting the background of menus to white:

• <menubgcolor>#ffffff</menubgcolor>

There are instructions on creating emoticon entries in the defuault skin's settings.xml file.

You should also change the description in settings.xml, and create a one-line file, desc.txt in your skin folder, and enter the description there too.

Finally, once you have completed your skin, the directory structure should look like this:

skinname/|-
              |-displaypic/
              |-pixmaps/
              |-smileys/
              |-sounds/
              |-settings.xml
              |-desc.txt

back to top


Provided is a Treeview of a Skin's Directory. You can find the description for each tree element by following the Description of Each File link.

NOTE: copy, but don't change these images, except for those in which I give extra information about.

Here is the treeview of a skin's-directory:

Skinname+--displaypic----+--amsn.dat ->
      |                |
      |                +--amsn.gif   
      |                |
      |                +--amsn.png 
      |                |
      |                +--ball.dat
      |                |
      |                +--ball.gif
      |                |
      |                +--ball.png
      |                |
      |                +--blood.dat
      |                |
      |                +--blood.gif
      |                |
      |                +--blood.png
      |                |
      |                +--car.dat
      |                |
      |                +--car.gif
      |                |
      |                +--car.png
      |                |
      |                +--castle.dat
      |                |
      |                +--castle.gif
      |                |
      |                +--castle.png
      |                |
      |                +--doggie.dat
      |                |
      |                +--doggie.gif
      |                |
      |                +--doggie.png
      |                |
      |                +--lightbulb.dat
      |                |
      |                +--lightbulb.gif
      |                |
      |                +--lightbulb.png
      |                |
      |                +--loading.gif 
      |                |
      |                +--lock.dat
      |                |
      |                +--lock.gif
      |                |
      |                +--lock.png
      |                |
      |                +--nopic.gif 
      |                |
      |                +--null
      |                |
      |                +--phone.dat
      |                |
      |                +--phone.gif
      |                |
      |                +--phone.png
      |                |
      |                +--rubberduck.dat
      |                |
      |                +--rubberduck.gif
      |                |
      |                +--rubberduck.png
      |                |
      |                +--shell.dat
      |                |
      |                +--shell.gif
      |                |
      |                +--shell.png
      |                |
      |                +--skins_readme.txt 
      |
      |
      |
      +--pixmaps-------+--alarm.gif                
      |                |
      |                +--amsnicon.gif
      |                |
      |                +--amsnmask.xbm
      |                |
      |                +--amsnplusbutton.gif       
      |                |
      |                +--amsnplusbutton_hover.gif       
      |                |
      |                +--amsn.xbm
      |                |
      |                +--away.gif              
      |                |
      |                +--back.gif
      |                |
      |                +--baway.gif               
      |                |
      |                +--bbusy.gif                
      |                |
      |                +--bell.gif              
      |                |
      |                +--belloff.gif                
      |                |
      |                +--blocked.gif               
      |                |
      |                +--boffline.gif               
      |                |
      |                +--bonline.gif                
      |                |
      |                +--bstatus.png
      |                |
      |                +--busy.gif                
      |                |
      |                +--butblock.gif               
      |                |
      |                +--butblock_hover.gif        
      |                |
      |                +--butfont.gif                
      |                |
      |                +--butfont_hover.gif        
      |                |
      |                +--butinvite.gif        
      |                |
      |                +--butinvite_hover.gif      
      |                |
      |                +--butsend.gif                
      |                |
      |                +--butsend_hover.gif        
      |                |
      |                +--butsmile.gif                
      |                |
      |                +--butsmile_hover.gif       
      |                |
      |                +--colorbar.gif                
      |                |
      |                +--contract.gif                
      |                |
      |                +--daway.xpm                
      |                |
      |                +--dbrb.xpm                
      |                |
      |                +--dbusy.xpm                
      |                |
      |                +--dhidden.xpm               
      |                |
      |                +--dinactive.xpm        
      |                |
      |                +--dlunch.xpm                
      |                |
      |                +--doffline.xpm                
      |                |
      |                +--donline.xpm               
      |                |
      |                +--download.gif                
      |                |
      |                +--dphone.xpm               
      |                |
      |                +--expand.gif                
      |                |
      |                +--fticon.gif               
      |                |
      |                +--ftreject.gif                
      |                |
      |                +--globe.gif                
      |                |
      |                +--greyline.gif                
      |                |
      |                +--imghide.gif                
      |                |
      |                +--imgshow.gif                
      |                |
      |                +--loganim.gif                
      |                |
      |                +--logolinmsn.gif        
      |                |
      |                +--logomacmsn.gif        
      |                |
      |                +--messenger.png
      |                |
      |                +--miniinfo.gif                
      |                |
      |                +--minijoins.gif        
      |                |
      |                +--minileaves.gif        
      |                |
      |                +--miniwarn.gif                
      |                |
      |                +--msnbot.gif
      |                |
      |                +--mystatus_bg.gif        
      |                |
      |                +--newline.gif                
      |                |
      |                +--notifclose.gif        
      |                |
      |                +--notifico.gif

      |                |
      |                +--notifyoffline.gif        
      |                |
      |                +--notifyonline.gif        
      |                |
      |                +--notifyplugins.gif        
      |                |
      |                +--notifystate.gif        
      |                |
      |                +--notinlist.gif        
      |                |
      |                +--nudgebutton.gif        
      |                |
      |                +--nudgebutton_hover.gif 
      |                |
      |                +--nudge.gif               
      |                |
      |                +--nudgeoff.gif                
      |                |

      |                +--null                        
      |                |
      |                +--offline.gif                
      |                |
      |                +--online.gif                
      |                |
      |                +--prefalerts.gif        
      |                |
      |                +--prefaway.gif                
      |                |
      |                +--prefemotic.gif        
      |                |
      |                +--preffont.gif                
      |                |
      |                +--prefhist2.gif
      |                |
      |                +--prefhist3.gif
      |                |
      |                +--prefhist.gif
      |                |
      |                +--preflook.gif                
      |                |
      |                +--prefmsg.gif
      |                |
      |                +--prefnat.gif                
      |                |
      |                +--prefpers.gif
      |                |
      |                +--prefphone.gif        
      |                |
      |                +--prefprofile.gif        
      |                |
      |                +--prefproxy.gif        
      |                |
      |                +--prefstatus.gif         
      |                |
      |                +--sendbut.gif                
      |                |
      |                +--sendbut_hover.gif      
      |                |
      |                +--smile.gif
      |                |
      |                +--tab_current.gif      
      |                |
      |                +--tab_flicker.gif        
      |                |
      |                +--tab.gif                
      |                |
      |                +--tab_hover.gif       
      |                |
      |                +--typing.gif                
      |                |
      |                +--unread.gif                
      |                |
      |                +--warning.gif                
      |
      |
      |
      +--smileys        
      |
      +--sounds--------+--alarm.wav           
      |                |
      |                +--newemail.wav                
      |                |
      |                +--null                        
      |                |
      |                +--offline.wav                
      |                |
      |                +--online.wav                
      |                |
      |                +--type.wav                
      |
      +--winicons------+--away.ico
      |                |
      |                +--bossmode.ico
      |                |
      |                +--brb.ico
      |                |
      |                +--busy.ico
      |                |
      |                +--hidden.ico
      |                |
      |                +--inactive.ico
      |                |
      |                +--lunch.ico
      |                |
      |                +--msn.ico
      |                |
      |                +--offline.ico
      |                |
      |                +--online.ico
      |                |
      |                +--phone.ico
      |                |
      |                +--unread.ico
      |
      +--desc.txt                
      |
      +--license                       
      |
      +--settings.xml   

back to top

Description of Each File:

amsn.gif
This is the default display picture when we launch aMSN for the first time

amsn.png
This is the default display picture when we launch aMSN for the first time

loading.gif
this image is the one shown when a displaypic is loading

nopic.gif
this image is shown if a contact has no displaypic set

skins_readme.txt
a little explanation about skins, don't change or remove this

alarm.gif
This image is shown in a popup window when you set an alarm on someone and you set to pop up a window

amsnplusbutton.gif
This is a button for the aMSN Plus! plugin in the chatwindow buttonbar

amsnplusbutton_hover.gif
This image is shown when the mouse is hovering the amsnplusbutton.gif button

away.gif

This is the icon in front of your buddies on the buddylist if he/she is away

baway.gif
This shows your status on the contactlist if you're away and your displaypicture is not shown in the contactlist

bbusy.gif
This shows your status on the contactlist if you're busy and your displaypicture is not shown in the contactlist

bell.gif
This is the icon in front of your buddies on the buddylist if you set an alarm on him/her

belloff.gif
This is the icon in front of your buddies on the buddylist if you set an alarm on him/her but it's disabled

blocked.gif
This is the icon in front of your buddies on the buddylist if he/she is blocked

boffline.gif
This shows your status on the contactlist if you appear offline and your displaypicture is not shown in the contactlist

bonline.gif
This shows your status on the contactlist if you're online and your displaypicture is not shown in the contactlist

busy.gif
This is the icon in front of your buddies on the buddylist if he/she is busy

butblock.gif
This is the button on the buttonbar of the chatwindow to block the user

butblock_hover.gif
This is the button on the buttonbar of the chatwindow to block the user when the mouse hovers it

butfont.gif
This is the button on the buttonbar of the chatwindow to set the font of your messages

butfont_hover.gif
This is the button on the buttonbar of the chatwindow to set the font of your messages when the mouse hovers it

butinvite.gif
This is the button on the buttonbar of the chatwindow to invite someone to the conversation

butinvite_hover.gif
This is the button on the buttonbar of the chatwindow to invite someone to the conversation when the mouse hovers it

butsend.gif
This is the button on the buttonbar of the chatwindow to select a file to send to your contact

butsend_hover.gif
This is the button on the buttonbar of the chatwindow to select a file to send to your contact when the mouse hovers it

butsmile.gif
This is the button on the buttonbar of the chatwindow to insert a smiley (emoticon)

butsmile_hover.gif
This is the button on the buttonbar of the chatwindow to insert a smiley (emoticon) when the mouse hovers it

colorbar.gif
This is an image shown on the contactlist above the buddies

contract.gif
This is the button in the buddylist to contract groups

daway.xpm
This is the image shown in the traydock when your status is set on 'away'

dbrb.xpm
This is the image shown in the traydock when your status is set on 'be right back'

dbusy.xpm
This is the image shown in the traydock when your status is set on 'busy'

dhidden.xpm
This is the image shown in the traydock when your status is set on 'hidden'

dinactive.xpm
This is the image shown in the traydock when your status is set on 'inactive'

dlunch.xpm
This is the image shown in the traydock when your status is set on 'lunch'

doffline.xpm
This is the image shown in the traydock when your status is set on 'appear offline' or if you are offline.

donline.xpm
This is the image shown in the traydock when your status is set on 'online'

download.gif
This image is shown in dialogwindows when aMSN is downloading files from the internet, like for updates or tls etc

dphone.xpm
This is the image shown in the traydock when your status is set on 'on the phone'

expand.gif
This is the button in the buddylist to expand groups

fticon.gif
This is the little icon shown in the chatwindow in front of the filetransfer-messages

ftreject.gif
This is the little icon shown in the chatwindow in front of the message if a filetransfer failed

globe.gif
This is the image shown on top of the contactlist before connecting, it's on the left of the 'change language' link

greyline.gif
This is the bar drawn before and after informatic messages in the chatwindow (like FileTransfer? and Nudge messages)

imghide.gif
This is the button next to the displaypicture in the chatwindow, click this to hide it

imgshow.gif
This is the button shown when the displaypicture of your contact is hidden, click this to show it

loganim.gif
This is an animated gif shown during connecting to the MSN server

logolinmsn.gif
This is the banner in the contactlist

logomacmsn.gif
This is the banner in the contactlist on Mac OS X users

miniinfo.gif
This is the little icon shown in the chatwindow in front of a informatic message

minijoins.gif
This is the little icon shown in the chatwindow when a contact leaves the chat

minileaves.gif
This is the little icon shown in the chatwindow when a contact joins the chat

miniwarn.gif
This is the little icon shown in the statusbar of the chatwindow in front of a warning

mystatus_bg.gif
This image is shown on top of the contactlist when you set to show buddypictures on the contactlist and there's one available. Be sure to have a transparent gap in this image to have the picture show through it as it's drawn behind it!

newline.gif
This is the button to click to insert a newline character when setting a nickname

notifclose.gif
This is the close-button on the little notify-popupwindows

notifyoffline.gif
This is the background of the notify-popupwindow when a contact goes offline

notifyonline.gif
This is the background of the notify-popupwindow when a contact comes online

notifyplugins.gif
This is the background of the notify-popupwindow for plugins

notifystate.gif
This is the background of the notify-popupwindow when a contact changes his/her status

notinlist.gif

This is the icon shown next to a contact's statusicon if he/she does not have you in his/her contactlist

nudgebutton.gif
This is a button in the chatwindow to send nudges (this needs the Nudge plugin)

nudgebutton_hover.gif
This is the button for the nudges in the chatwindow when the mouse hovers it

nudge.gif
This is shown in the chatwindow when you succesfully sent a Nudge

nudgeoff.gif
This is shown in the chatwindow when there was a problem sending a nudge

null
Don't touch this, it's an empty file

offline.gif
This is the icon in front of your buddies on the buddylist if he/she is offline

online.gif
This is the icon in front of your buddies on the buddylist if he/she is online

prefalerts.gif
This is shown in the preferences screen in front of the alerts-options

prefaway.gif
This is shown in the preferences screen in front of the away-options

prefemotic.gif
This is shown in the preferences screen in front of the emoticons-options

preffont.gif
This is shown in the preferences screen in front of the font-options

preflook.gif
This is shown in the preferences screen in front of the look 'n feel-options

prefnat.gif
This is shown in the preferences screen in front of the NAT-options

prefphone.gif
This is shown in the preferences screen in front of the phone-options

prefprofile.gif
This is shown in the preferences screen in front of the profile-options


prefproxy.gif
This is shown in the preferences screen in front of the proxy-options

prefstatus.gif
This is shown in the preferences screen in front of the status-options

sendbut.gif
This is the sendbutton

sendbut_hover.gif
This is the sendbutton when the mouse is hovering it

tab_current.gif
This is the image for the active tab

tab_flicker.gif
This image is shown when a tab flickers (the 'colored' one thus)

tab.gif
This is the image for the non-active tab

tab_hover.gif
This is shown when your mouse is on a tab

typing.gif
This image is shown in the statusbar of the chatwindow when your contact is typing

unread.gif
This image is used in the contactlist in front of the message about new hotmail-messages

warning.gif
This image is shown on warning dialogs

smileys
This directory contains the smileys (emoticons) of your skin. They should all be registered in the settings.xml of your skin.

alarm.wav
This sound is the default sound when we set up an alarm for someone

newemail.wav
This sound is played when a new e-mail arrives

null
This is an empty file, don't touch it.

offline.wav
This sound is played when someone goes offline

online.wav
This sound is played when someone comes online

type.wav
This sound is played when a new message arrives

desc.txt
Put a description of your skin in this text-file

license
You can choose to ship a license in this file

settings.xml
This is one of the most important files for your skin. Options are set in this file!

back to top



This guide covers everything needed for making your own Amsn skin. BUT it is not much fun to read. The best way, to make your own skin is not to read all this and try and create a skin purely from it. Instead, a much easier - and fun - way is to make a copy of the default skin, rename the folder to whatever you want to call your skin, and then use it as a template: Modify/replace what you want to customise, and delete all that you have not changed! This guide is more useful for just checking up on individual things. :)
When making your skin, don't feel you cant look at other skins for inspiration...learning from others work is just as important as innovation!

When you have finished your skin, you can e-mail it to one of the amsn developers, and they will commit it to the amsn-extras package. Contact details for the developers can be found on the AMSN website, under the Devlopment team section.

GET SKINNING!

Creating AMSN Skins 1.2 - 14/02/2004 By Tom Jenkins

back to top