A Simple Skin

From TrillWiki

[edit] Summary

Skinning Trillian is a whole lot simpler than it used to be. With the introduction of Custom Window skinning, you no longer need to spend days or weeks working on your skin. You will have a fully functional skin done in no time!

[edit] The Files

Included in the skin zip file are the following files:

• simple\
  • trillian.xml
  • desc.ini
  • simplewindow.png
  • hide.png
  • preview.png

And that's it! This is a very basic skin, but it shows you how simple a skin can be!

Let's have a look at each file:

• trillian.xml - This file is the main guts of the skin. All the information on the layout of the skin is included in this file, as well as what buttons do and how things work.

• desc.ini - This file tells Trillian some important information about the skin.

• simplewindow.png - This is the main window graphics for this skin.

• hide.png - This file is the hide button.

• preview.png - And this file is just a preview which is shown in the skin chooser.

might want to delete this page

[edit] So How Do I Make My Skin?

All this is well and good, but I know a lot of people reading this are simply looking for the details on how to make their own skin. You probably don't care about how things happen, or why they happen, you just want it to happen.

DOWNLOAD SIMPLE.ZIP

Grab this skin file and unzip it into your Trillian/skins directory. If you have unzipped it correctly, it should create a "simple" directory inside your "skins" directory. As this tutorial guides you through editing the existing files, you should make a copy of this new "simple" directory and call it something like "tutorial".

[edit] The desc.ini File

This is the EASY part! Load up your text editor and load the desc.ini file. You'll see the following:

[ContactList]
Name=Simple
Description=Your first Custom Window
Author=Justin Trevena
Link=http://www.pixuality.com
Email=juz@ceruleanstudios.com
Preview=preview.png

Trillian=4.0

This is all pretty self explanatory so go through and change the details here. Just so things don't get a bit confusing, change the Name=Simple line to Name=Tutorial. The Preview=preview.png line is pointing to a preview picture of your skin - might want to leave this like it is until you're done and you can make a preview image.

One thing to make note of - The very first line defines what Trillian lists as a skin, and what it lists as a custom window. For now, leave this as it is, but it is good to know what this changes.

The Trillian=4.0 line should stay the same.

Save this file and you're on you're way to creating your very own Custom Window Skin!

[edit] A New Design

For this tutorial we're working on the Contact List, so you're going to need a design for this window.

We're not going to do any complex code for the background, so it might be a good idea to keep your design basic for now.

Included Window Design

My New Window Design

On the left is the window graphics as included in the Simple skin zip file. On the right is my new design. Note they're a totally different size - this was done on purpose, so you can see the adjustments needed to get this new background working.

[edit] Putting Your Design In The Skin

[edit] Telling Trillian About Your New Window Graphics

First up we need to tell Trillian to use your new window design. Load up the trillian.xml file in your text editor and look for the part where we're defining the images to be used in the skin.

It should look like:

<!-- Declare needed images -->
<bitmap name="simple:clistwindow" file="simplewindow.png"/>
<bitmap name="simple:clhide" file="hide.png"/>

You can see where we're calling the current window graphics. It's the simplewindow.png file, and we're giving it the name "simple:clistwindow". The names given to things like images are how Trillian refers to them later on in your code.

Note: It's a good idea to give anything in your custom window skin a unique name so it doesn't conflict with any given names in the skin you're running underneath the custom window.

Copy the window image you've created to the same directory as the other image files and edit the <bitmap name="simple:clistwindow" file="simplewindow.png"/> line so it points to your new window.

Mine now looks like:

<bitmap name="simple:clistwindow" file="tutorialwindow.png"/>

As you can see, all I've changed is the file name - I've kept the name (simple:clistwindow) that was given before as there's no real reason for me to change it.

[edit] Making Your Graphics Work in Trillian

Now you need to put the new window graphics into the skin. This is a lot easier than it sounds, and prior to Trillian Astra it was a real pain to code! Astra saw the introduction of the slice code which makes your life as a skinner a whole lot easier!

Here's the included code:

<!-- The actual background -->
<background transparent="1" middle="1" stretch="1">
	<source name="simple:clistwindow" left="0" top="0" right="205" bottom="152"/>
	<slice left="33" top="38" right="185" bottom="129"/>
</background>

There's a couple things here you will need to edit, and you might need your graphic editor for some of the coordinates. Be aware that Trillian doesn't use coordinates in a standard way, this page might explain things better for you.

First up is this line:

<background transparent="1" middle="1" stretch="1">

Depending on your skin, you might not need to change any of this.

• transparent="1" is telling Trillian that the the background image has transparency. If you're using a PNG for your background, leave this set to "1". My new window graphics is a PNG and does have transparency (to create smooth edges), so I leave this as "1".
• middle="1" is telling Trillian that when it slices up the background, to make sure it grabs the middle section and keeps it. Some skins overlay a different part over the middle section and don't need this section kept, in most cases this would stay "1" as it is now.
• stretch="1" tells Trillian that we want it to stretch the top, bottom, left and right sliced background sections. This is useful if you have curved edges which you want to stretch the width of a window. If, however, you have a simple plain edge that doesn't need to be stretched, you can change this to stretch="0" and it will tile those pieces instead. My new window graphics has a slight gradient - but I can get it to work with tiling, so I'll set the stretch tag to "0". If I had a gradient that was the full length of the window I would definitely turn on stretch.

My code should now look like:

<background transparent="1" middle="1" stretch="0">

Now we need to edit this line:

<source name="simple:clistwindow" left="0" top="0" right="205" bottom="152"/>

So load your new window graphics into your graphics editor. Most editors have some mechanism to report back your current cursors coordinates in the image, so make sure that is enabled in your application. Using your graphics editor work out the upper-left X,Y coordinate (usually 0,0). Then, keeping in mind that Trillian handles coordinates a little bit differently to what most people expect, find the lower-right X,Y coordinate.

PICTURE

As you can see, my coordinates are 0,0 and 126,175, so my code now looks like:

<source name="simple:clistwindow" left="0" top="0" right="126" bottom="175"/>

Now you will need to work out where the background should be sliced. We slice an image into 9 pieces, each of these pieces has a special way of working inside Trillian.

The 4 corner pieces are anchored to their respective corners. They aren't stretched or tiled in any way. The top, bottom, left and right pieces however do resize. You can tell trillian if you want it to tile the piece along it's edge, or you can tell it to stretch it.

The final piece of the slice is the middle! The middle piece can also tile or stretch, but unlike the edge pieces, it does so in both the X and Y direction.

PICTURE SHOWING CORNERS/SIDES AND HOW THEY WORK

Here's a picture of my window graphics with a guide overlayed showing where I want to slice it ready to be a background. Depending on your skin, these coordinates will vary, if you have large curves on the corners of your skin, then your corner pieces will be larger.

You're essentially making a big 3x3 grid over the image. So keeping this all in mind, using your graphics program, work out the coordinates for where the left slice would be. Be sure to fit the corner in the sliced area otherwise it will look a bit strange if it's accidentally stretched or tiled! Do the same for the top slice, right slice and bottom. Once you have the coordinates modify this line of code:

<slice left="33" top="38" right="185" bottom="129"/>

My new line of code looks like this:

<slice left="20" top="26" right="106" bottom="149"/>

Your completed section of code should look like:

<!-- The actual background -->
<background transparent="1" middle="1" stretch="1">
	<source name="simple:clistwindow" left="0" top="0" right="126" bottom="175"/>
	<slice left="20" top="26" right="106" bottom="149"/>
</background>

What this has done is construct the actual window. If you tried the skin out now, it would work fine, but things like the hide button and actual list might be in weird locations. Want to try it out anyway? Ok, bring up the Trillian preferences window (easy way is to right click on the systray icon and choose Preferences). Once the prefs window is showing click on the Skins icon, and then in the left column choose the Custom Window option.

This should list all the custom windows you have installed on your computer, and you should see your new skin "Simple" here. Select the skin and click on the "Apply" button and you should see your skin!

Custom Window Skin location

[edit] Moving Things To Where They Should Be

If you've done all of the steps above here, and you've tried the skin out in Trillian, you will find your new window graphics are working fine, but they're not exactly where they should be. We're going to fix this now!

There are a couple things you will need to learn here, so I'll cover these as simply as possible.

• What's an icontrol?
• The <rect> tag and how it works.

What's an icontrol?

An icontrol is like a placeholder, it tells Trillian to go off and find a certain object and place it at the defined location and then tells it what it should do. Icontrol is the shortened form of Inner Control. But I like to think of them as Interactive Controls! Just to confuse things a bit, you will see both Controls and iControls when you're skinning. We'll describe what a Control is later!

The <rect> tag and how it works

The <rect> tag is used quite regularly throughout a skin. It is a way for you to tell Trillian where you want to locate an item. As Trillian windows can (most of the time) be resized, the coordinate system that <rect> uses can originate at any of the 4 edges. This means you can place a button that "sticks" to the right edge or bottom edge even if the window is resized. You will see this in action very shortly.

[edit] The Hide Button

This simple skin already includes a hide button. The hide button does exactly that - hides the contact list; meaning you will need to double click the systray icon to reshow the list. To start with we will move this button into a much better location so it fits on the new window graphics better. After you learn how to move it around, I will then show you how to change how it looks!

Find this piece of code in the trillian.xml file:

<!-- Hide Button -->
<icontrol source="simple:clhide" name="hide" visible="1">
	<rect>
		<left num="36" width="1"/>
		<top num="29" height="0"/>
		<right num="11" width="1"/>
		<bottom num="45" height="0"/>
	</rect>
</icontrol>

The first line tells Trillian all about the icontrol itself.

• "source" is the name of the object you're telling Trillian to go find. This object is actually called a Control, and tells Trillian which images to use for the different states (flat, hover, push) of the button.
• "name" is how you actually tell Trillian what the button does. In this case the name of "hide" means the button will hide the contact list. The name here could be any of a set number of types, but for now, we'll stick to "hide".
• "visible" can be either 1 or 0. If it's 1, the button is visible, if it's 0, then the button will be hidden. This can be handy when debugging a skin, and can also be used in conjunction with variables so you can make buttons toggleable.

The next bits of code, the <rect> tags are to control the location of the button. Specifically they are the <left> <top> <right> and <bottom> tags.

There are 2 main parts to each of these tags. All of them have a "num" part, however the left and right tags have a "width" part and the top and bottom tags have a "height" part. The width or height can be either "0" or "1".

• A width of "0" in the left or right tags means the coordinate given originates from the left edge. →
• A width of "1" on the other hand, means the coordinate given originates from the right edge. ←
• A height of "0" in the top or bottom tags means the coordinate originates from the top edge. ↓
• A height of "1" alternatively means the coordinate given originates from the bottom edge. ↑

IMAGE ILLUSTRATING THIS

This allows you to place an item on your window that will stick to a certain edge. Handy when you want a button that's aligned to the top right corner.

So anyway, the hide button is almost in the right location, we just need to adjust the coordinates so it sits a lot nicer, so let's see what we can do!

The easiest way I find to work out the best location for a button is to use my graphics program. Load your background image, and then create a new layer and make a solid square that is the same size as your button. Drag this layer into the location you think is best and then using the coordinates shown in your paint program, work out the top left and bottom right coords.

VIDEO SHOWING HOW TO WORK THIS OUT

Armed with these coordinates, modify the <rect> information in your code and save the file. Your code should look like:

<!-- Hide Button -->
<icontrol source="simple:clhide" name="hide" visible="1">
	<rect>
		<left num="36" width="1"/>
		<top num="29" height="0"/>
		<right num="11" width="1"/>
		<bottom num="45" height="0"/>
	</rect>
</icontrol>

[edit] The Actual List

The list part of the contact list is the actual part that shows your contacts. The area you define only displays the text (contacts, groups, etc) but not the scrollbars, they are their own separate icontrols. The actual list code looks like this:

<!-- the actual list -->
<icontrol source="simple:clist" name="list" visible="1">
	<rect>
		<left num="21" width="0"/>
		<top num="60" height="0"/>
		<right num="4" width="1"/>
		<bottom num="16" height="1"/>
	</rect>
</icontrol>

As with the hide button, you will need to adjust the coordinates so it's located in the correct place.

Again, I find it easier to load up the background image in my paint program and create a new layer in which I make a big block of colour showing where I want the contact list shown. Remember the contact list is usually fully resizeable based on the size of the window. This means the corners of the list area should be anchored to their closest corners.

VIDEO SHOWING THIS

My new code looks like this:

<!-- the actual list -->
<icontrol source="simple:clist" name="list" visible="1">
	<rect>
		<left num="21" width="0"/>
		<top num="60" height="0"/>
		<right num="4" width="1"/>
		<bottom num="16" height="1"/>
	</rect>
</icontrol>

Make any changes you need to make and save your xml file again. Load the skin again in Trillian, to do this go to the Custom Window skin section as before and click on any other skin in the list and then click back on the "Simple" skin. The Apply button should reappear and will let you reload the skin again.

[edit] Changing The Look Of A Button

As a skinner you have complete control of how everything in a skin looks, it's just a matter of designing things the way you want them to look. So let's look at making a new Hide button to go with our new skin design.

Any button in a skin can have 3 states: flat, over, and push. Flat is shown when the button is sitting there doing nothing, Over is when you hover over the button, and Push is when you've clicked on the button.

If you wanted to, you could design just one button design and use it for all 3 states, but the end result is quite boring, and doesn't give any feedback that the button is active or available.

• So load up your graphics application and design yourself a new hide button! If you take a look at the hide.png file you can see that I have laid the 3 different states out side by side. Below you can see the new hide button I have created.

PIC OF NEW HIDE BUTTON

• If you kept the same dimensions as the hide.png file that's included in the zip file, you won't have to change any coordinates. My new button is different though, so I have to adjust some coordinates. To do this we have to venture into the preferences section of the code and work with Controls! The preference section is used to tell Trillian what a button or object looks like.

• So in the trillian.xml file, look for this piece of code:

<!-- Contact List Hide (contact list) -->
<control name="simple:clhide" type="button">
	<background name="flat">
		<source name="simple:clhide" left="0" top="0" right="25" bottom="16"/>
	</background>
	<background name="over">
		<source name="simple:clhide" left="25" top="0" right="50" bottom="16"/>
	</background>
	<background name="push">
		<source name="simple:clhide" left="50" top="0" right="75" bottom="16"/>
	</background>
</control>

The first line of this code has the <control> tag in it. As touched on briefly earlier, a Control differs from an iControl. Where an icontrol tells Trillian where a button or object is located and what it does, a Control only tells Trillian how a button looks and sometimes a few other little settings. In this control line we are giving the control a name (which makes it easier to refer to later in your code). We are also telling Trillian that this particular control is a button. There are a few different "types" which you can specify, but for now a button is all we need.

The next part of the code is telling Trillian what each state of the button looks like. The source tag is telling Trillian the name of the image it should use (we define the name simple:clhide early on in the code) and then it's giving the coordinates for each button state. If you wanted to cut corners here, you could have only one button design, and use the same coordinates for the flat, over and push states.

Because I have made my button a different size to the included button, I need to change all these coordinates, so my new code ends up looking like:

<!-- Contact List Hide (contact list) -->
<control name="simple:clhide" type="button">
	<background name="flat">
		<source name="simple:clhide" left="0" top="0" right="25" bottom="16"/>
	</background>
	<background name="over">
		<source name="simple:clhide" left="25" top="0" right="50" bottom="16"/>
	</background>
	<background name="push">
		<source name="simple:clhide" left="50" top="0" right="75" bottom="16"/>
	</background>
</control>

Reapply the skin and everything should look how you wanted it!

You might want to take this opportunity to make a new preview image for your skin and replace the current preview.png file. Just remember to modify the desc.ini file if you change the name of the preview image.

Congratulations, you have completed your first very simple skin for Trillian Astra.

You've learnt some basics while doing this which you will use in every single skin you create. The next step in the tutorial will be to move onto the slightly more complex version of the Custom Window skin. It's basically the same as what you've just done, but I've broken it up into seperate files as an introduction to moving onto skinning a complete skin.

Back