Custom Windows - Moving a Button
From TrillWiki
Starting from the beginning! Our first project will be very simple, but will introduce some skills that you will use through all stages in developing a skin. First up you will learn how to move an existing button.
Files you will be working with:
- skins\base-custom\xml\layout\contactlist.xml
Contents |
[edit] Step 1
Load up the contactlist.xml file in your text editor. Once it's loaded you will see a collection of commands that might not make a lot of sense at the moment. Don't worry, all of this will get a whole lot clearer as you go along!
[edit] Step 2
Look for the line that says <!-- Hide Button -->. If you know anything about HTML you will recognize this as a comment. It actually does nothing in the skin except to make it easier for you or anyone else to decipher all the code.
In this case, it's telling you that the following piece of code is the code behind the placement of the Hide button on the contact list, and this is what we're going to work with in this tutorial!
[edit] Step 3
If you look at the code for this button, it looks like this (without the line numbers!):
1: <icontrol source="hidebutton" name="hide" visible="1">
2: <rect>
3: <left num="25" width="1"/>
4: <top num="3" height="0"/>
5: <right num="9" width="1"/>
6: <bottom num="19" height="0"/>
7: </rect>
8: </icontrol>
This is an <icontrol>. An icontrol is like a placeholder, and tells Trillian to go off and find a certain object and place it at the defined location. Icontrol is the shortened form of Inner Control. But I like to think of them as Interactive Controls!
Without going into all the details of how things are placed onto a window in Trillian, focus your attention on lines 3, 4, 5, and 6. These lines specify where the button actually sits by specifying a coordinate (the number in the num="" tag). These are pretty straight forward looking until you look at the last bit of the line; the width="" and height="" tags.
What the width and height tags do is tell Trillian that the location of the coordinate originates from a certain side. A width="0" means the coordinate originates from the left hand side, whereas a width="1" means it originates from the right hand side. The same goes for the height="" tag. If it's a "0" it means it originates from the top, but a "1" means it starts from the bottom.
So in the example given above:
-
<left num="25" width="1"/>
means that the left edge of the hide button is 25px in from the right hand edge. -
<top num="3" height="0"/>
means the top of the button is 3px down from the top. -
<right num="9" width="1"/>
means the right edge of the button is 9px in from the right and -
<bottom num="19" height="0"/>
means the bottom of the button is 19 down from the top.
This means that the button will sit on the right top edge of the contact list no matter what the size of the window.
See also: Explaining Coordinates in Trillian
[edit] Step 4
So let's change the location! Let's move the button to the top left corner of the window instead! As we're only changing the horizontal position of the button, we only need deal with the <left> and <right> tags.
[edit] Step 5
Change line 3 from <left num="25" width="1"/> to read: <left num="9" width="0"/>
[edit] Step 6
Change line 5 from <right num="9" width="1"/> to read: <right num="25" width="0"/>
So instead of the button being 9px in from the right edge, it's now 9px in from the left edge.
Save this file and reload the skin to see your changes.
The easiest way to reload the skin is by going to the Trillian preferences, and then into the Skin section. Just click on another skin in the list and then back on your skin and choose Apply Skin.
All going well, you should now have a hide button on the top left corner of the window. It might not look too good here, but you can see how easy that was to move!
[edit] Follow Up
Try experimenting with the settings, if you adjust the top and bottom coords along with the left and right coords you can place icontrols anywhere you like on a window.
