Tutorial pour la création d'un bouton pour WLM
Nous allons créer notre propre bouton sur WLM à la fin de la barre des boutons.
L'avantage de ce petit tutorial est de personnaliser son propre WLM et d'avoir tout à portée de main.
Nous rappellons que ces tutoriaux sont présents à des fins personnelles et non pour tout ce qui est en relation avec le Hacking !
Comment fait-on pour ajouter un bouton ?
Pour éffectuer cette manipulation, il faut vous munir d'un programme très utile.
Télécharger ResHackerToutes les étapes seront détaillées plus bas.
1°) Préparer la modification de WLM
Pour mener à bien vos modifications, veillez à éffectuer les actions suivantes :
- Fermez WLM
- Faites une copie de votre dossier WLM afin de ne rien perdre en cas de problème(s) (situé dans C:\Program files\...).
- Trouvez une image de format 16*16 ou 32*32 (pixels) et pour extension .PNG
- Une fois la copie faite, ouvrez ResHacker.
- Cliquez sur "Fichier" puis "Ouvrir" et ouvrez msgsres.dll qui est dans votre dossier copié.
2°) Création du bouton
Comme dit ci-dessus, pour ce bouton, recherchez une image au format .png pour ne pas être troublé lors des manipulations prochaines et qui soit impérativement de taille 16*16 (pixels). Si elle n'est pas de ce format, redimensionnez-la.
Nous allons maintenant créer une nouvelle ressource. Pour cela :
- Cliquez sur "Action"
- Cliquez ensuite sur « Ajouter une nouvelle ressource … »
Vous devriez avoir ceci :
Nous allons maintenant mettre notre images au format .png et qui est de taille 16*16 (Mettez ce qu'il y a en rouge dans son emplacement respectif) :
- Cliquez sur "Ouvrir fichier nouvelle ressource"
- Sélectionnez votre image.
- Veillez à ce que vous n'ayez pas une ressouce nommée 9999 dans le dossier de l'arborescence 4000
- Dans type de ressource : 4000
- Nom de ressource : 9999 (Le nom que nous devront appeler plus tard)
- Langage de la ressource : PNG (Format de l'image)
- Cliquez sur "Ajouter une ressource"
Vous devriez avoir ceci :
Voici le code :
<Button AccRole=57 class="TransparentButton" Layout=flowlayout(0,2,0,2) id=atom(recus1) tooltip=true Active=MouseandKeyboard|NoSyncFocus>
<urlelem layout=borderlayout() url="http://tchatmania.com/">
<ButtonIcon class="ToolbarIcon" contentalign=middlecenter ID=Atom(ai002a)/>
</urlelem>
</Button>
Explication :
<Button AccRole=43 class="TransparentButton" Layout=flowlayout(0,2,0,2) id=atom(recus1) tooltip=true Active=MouseandKeyboard|NoSyncFocus>
"AccRole=43" :
Signifie que le type de bouton sera le type "43" c'est à dire que l'icône sera de taille 36*36.
Pour ceux qui choisissent une icone de taille 16*16, vous devez mettre "AccRole=57"
"Class="TransparentButton"" :
Permet au bouton d'avoir de la transparence.
"Layout=flowlayout(0,2,0,2)" :
Malheureusement, je ne sais pas ce que c'est, ca sert à faire pro ^^'
"id=atom(imotion)" :
Sert comme un genre d'identifiant.
"tooltip=true" :
Celà fait une bulle d'information. Il n'est pas obligatoire de la mettre. Pour les personnes ne voulant pas la mettre, mettez "false".
"Active=MouseandKeyboard|NoSyncFocus>" :
Rend le bouton cliquable avec la souris, et pour les flingués de la déguenne du clavier, cela permet également de sélectionner le bouton avec touche Tab.
<urlelem layout=borderlayout() url="http://tchatmania.com/"> :
Signifie l'action que va faire le bouton : Ici, il va ouvrir votre navigateur pour aller sur le site http://the-dadj-concept.com/Forum/.
Vous pouvez donc personnaliser le lien que vous souhaitez faire =).
<ButtonIcon class="ToolbarIcon" contentalign=middlecenter ID=Atom(ai002a)/> :
Cela fera un bouton icône.
"contentalign=middlecenter" :
L'icône sera au milieu du bouton.
ID=Atom(ai002a) :
Je ne vais pas rentrer dans les détails, juste de penser que si vous faites plusieurs boutons, n'oubliez pas de changer (ai002a) par (ai0055588) par exemple.
Donc, nous n'avons plus qu'à placer le code.
Où me direz-vous ?!
Bien, j'ai la réponse !
- Allez dans le dossier 4004 puis dans le sous-dossier 923 et cherchez : <element class="ToolbarIcon" ID=Atom(ai209)/>
Pour la recherche : CTRL+F de votre clavier.
Vous devez tromber sur ça :
<Button LayoutPos=None cmdid=40318 id=atom(brandedbtn) AccRole=43 Class="TransparentButton" Layout=flowlayout(0,2,0,2) Active=MouseandKeyboard|NoSyncFocus Padding=rect(5,4,5,4)>
<element class="ToolbarIcon" ID=Atom(ai209)/>
</Button> - Allez à fin de ce code
- Mettez le code suivant en dessous de </Button> :
<Button AccRole=43 class="TransparentButton" Layout=flowlayout(0,2,0,2) id=atom(recus1) tooltip=true Active=MouseandKeyboard|NoSyncFocus>
<urlelem layout=borderlayout() url="http://the-dadj-concept.com/Forum/">
<ButtonIcon class="ToolbarIcon" contentalign=middlecenter ID=Atom(ai002a)/>
</urlelem>
</Button> - Ensuite, compiler le script (Compil Script) en haut de la fenêtre
- Encore un code (Et oui, sinon ça ne marchera pas !)
Button[id=atom(recus1)]
{
accdesc:"recus1";
}
ButtonIcon[ID=Atom(ai002a)]
{
Content:rcimg(9999);
}
Pour les concepteurs de site Internet, vous reconnaîtrez que c'est du CSS.
Placer le code ci-dessus dans le dossier 4005 et dans le sous-dossier 923 tout à la fin juste avant le </style>. - Lancez Windows Live Messenger, et regardez votre joli bouton est installé =)
Voici ce que celà doit vous donner :
Notez que j'ai utilisé cette image
dans ma barre.
Ce bouton est tout à droite.
Donc pour chaque bouton que vous voudrez faire, il faut procéder de la même façon sauf qu'il faut changer le 9999 par un autre chiffre =)
Remplacez également id=atom(recus1) par le nom de votre image (actuellement recus1).
Et on reprend de tout en haut...
En espérant que ce tutorial vous sera d’une grande utilité !
Tutorial réalisé par Djé, le 16/07/2008