Voici à quoi ressemble le fichier video.bmp

L'exemple utilisé correspond au skin standard de Winamp.

Les 2 premières lignes sont chacunes composées de 4 rectangles. Ces rectangles correspondent à la décoration de la bordure du haut du module : celui contenant le nom du module - la barre de titre.

Dans le cas où le module n'est pas sélectionné, la décoration de la seconde ligne sera utilisée. Par contre, si le module est sélectionné, ce sera la première ligne qui sera utilisée. Cela permet de distinguer si le module est sélectionné ou non. Bien sûr, il est possible d'utiliser les mêmes images dans les 2 cas, dans ce cas, il ne sera plus possible de faire la différence visuellement entre les 2 états.

Détaillons maintenant les 4 rectangles :

Le premier (25 x 20 pixels) et le dernier (25 x 20 pixels) servent à skinner les angles du haut du module, respectivement celui de gauche et de droite. Celui de droite contient un bouton permettant de fermer le module, en position non-cliqué. La surface réactive de ce bouton est un carré 9 x 9 pixels. Il y a 3 pixels au-dessus de cette surface réactive et 2 à sa droite.

Le troisième rectangle (25 x 20 pixels) sera intercalé en mosaïque horizontale autant de fois qu'il sera nécessaire entre les angles supérieurs gauche et droit.

Le deuxième rectangle (100 x 20 pixels) correspond à l'endroit où pourra être incrusté le nom du module. Dans celui-ci c'est vous qui devez écrire le nom du module ("Vidéo", "Winamp Vidéo", etc...).

Sur les 2 lignes, l'ordre des 4 rectangles est le même.
Le premier rectangle est collé en haut à gauche de l'image. Chaque rectangle est séparé du précédent par 1 pixel vide. La deuxième ligne est séparée de la première par 1 pixel vide.

Le petit carré 9 x 9 pixels en-dessous du troisième rectangle de la deuxième ligne correspond à la décoration du bouton [fermer] quand il est cliqué.

Les deux rectangle à gauche de carré 9 x 9 pixels, de dimensions 11 x 29 pixels et 8 x 29 pixels serviront respectivement de décorations des bordures gauche et droite du module. Le motifs seront répétés en mosaïques verticales.

Les 2 rectangles 125 x 38 pixels correspondent respectivement aux angles gauche et droit du bas du module.

L'angle inférieur gauche comporte 5 boutons de dimensions 15 x 18 pixels. Il y a 8 pixels à gauche de ces boutons et 8 pixels au-dessus. Les 5 boutons ne sont pas espacés les uns des autres par des pixels (ils se touchent). Ils correspondent aux boutons non-cliqués.

De gauche à droite, ces boutons correspondent à :

• vidéo en plein écran
• vidéo en taille normale
• vidéo en taille double
• affichage dans la médiathèque de la liste des TV Internet
• menu des options

L'angle inférieur droit est une surface réactive servant à redimensionner la fenêtre en hauteur et en largeur.

Dans ces modules, la description de la vidéo est affichée. Il y a 11 pixels au-dessus de cette zone de texte et 14 pixels en dessous. Dans l'angle inférieur gauche, les 92 premiers pixels de gauche seront toujours affichés à gauche de cette zone de texte. Dans l'angle inférieur droit, les 25 premiers pixels de droite minimum seront toujours affichés à droite de cette zone de texte.

Si le texte est plus court que l'espace entre les 2 limites indiquées, les pixels suivants de droite seront aussi affichés (ils ne seront pas remplacé par la couleur de fond de la zone de texte).

Ce rectangle de dimension 75 x 18 pixels correspond aux 5 boutons de 15 x 18 pixels en mode cliqués. L'ordre des boutons est le même.

Le rectangle 25 x 14 pixels à droite de l'angle inférieur droit servira à remplir en mosaïque horizontale l'espace entre les 2 angles inférieur.

Tout comme pour les 2 angles inférieur, il pourra y avoir une zone de texte sous les 11 pixels du haut et au-dessus de 14 pixels du bas.

Si le texte est plus court que l'espace entre les 2 limites indiquées, les premiers de ces rectangles en partant de la droite seront affichés tels quel eux aussi (ils ne seront pas remplacé par la couleur de fond de la zone de texte).

En fait, là où la zone de texte s'arrête, c'est l'image du skin qui est utilisée...