I was a little bit bored tonight so I decided to write a little guide about skinning an addon that you love to match Tukui. I'll take Recount as an example in this guide, because it's almost complete and introduced into t14 version.

First of all, I'll explain the good and the bad way of doing it.


The bad way

I know that currently a lot of users make skin directly by editing Lua files into the original addons and upload the new versions with our upload service. This is bad, really bad. Don't edit any code directly into the addon folder because at every update you'll make, everything will be erased.


The good way

It's simple! You create a separate addon!


Where to begin?

Create a new addon folder. I'll call it in this example:

    TukuiRecountSkinning

Inside of it, we will make 2 new files called:

    TukuiRecountSkinning.toc
    skin.lua

The TOC file need to match the name of your folder or it will fail to load. Skin.lua is just the file where you'll put all your codes.



What I should write in the TOC file?

Let's focus on the TOC now. Open it with your favorite text editor and use this code as a start.


Let's explain every lines.

  • Interface
      • This need to match the current patch on Live Servers. 40000 is 4.0. 40200 is 4.2, 40300 is 4.3, etc.

  • Title
      • The name of the addon.
      Just a note, in the example there is "|cffC495DD" and "|r", this is just a HEX color to match Tukui in addon list.

  • Notes
      • What you want to show in the tooltip when you put your mouse over it at the character selection screen.

  • Author
      • Really I don't think I need to explain this.

  • RequiredDeps
      • This is the most important line when skinning an addon. You need to verify that the selected addon that you'll skin and Tukui is installed and checked. The order is not really a problem here. When a character is selected and you are going in game, this line will also specify to Tukui and Recount to always load before your addon because you know, you need to create the original frames before skinning them or it will fail and you'll get Lua errors. By default, addons are loaded in alphabetical order. "A..." will load first, "Z..." at the end unless a RequiredDeps is specified.

  • skin.lua
      • It tell the WoW client to load this file at the loading screen which contain our skinning codes.

Edit these lines to match your addon. You are now done with the toc file. Save and exit.


And now, the skin.lua file?

Here is the most difficult part. I'll try my best to explain how to do it. First of all, you'll mostly work with 2 commands.

  • /rl
      • This is a Tukui built command, it reload the interface.

  • /framestack

      • This will open a tooltip in one corner of your screen and will display every frames where your mouse is. This is the most easiest way to find a frame name to skin. If a name is show as "TABLE: XXXXXXX" where X is a letter or number, then it's because the author of the addon didn't wrote a global name for this frame. When it happen, you are still able in most of the case to skin it. You need to inspect the codes into the original addon to see if you can find a link or a name for the frame. In the screenshot above, you see that my mouse is over the main windows of Recount and also at the same time over another frame. That frame, with no global name, is in fact a button on top right to open config. You'll see in the final code at the bottom of this guide that I found a link in the Recount files for this button being "Recount.MainWindow.ConfigButton".

Let's start with the Lua file now. To be able to skin addon to match Tukui, you need to include everytime at the top of a new file this part of code:

local T, C, L = unpack(Tukui)

This is telling your addon to import the Tukui functions, configurations and locales.


Now you can work your way to a total reskin by finding frame names, writing new codes with our previously imported functions, configurations, locales. To see our API (Application programming interface), you can look into /Tukui/Docs/. Test your skin by reloading the UI (/rl) everytime you want to see the result of the new saved code until you like your new skin. Here a screenshot of what my Recount look like after writing my skinning codes:

Click here to see the final code.


Final note

I'm seeing more and more edits of Tukui every year. One thing I noticed, nobody use this trick to make their edit. I've seeing in the past, only 1 member doing it this way which I don't remember at all who did it. You can apply this guide to edit Tukui to your own liking by creating a separate addon (example: TukuiObamaEdit) and moving, resizing, skinning everything. Almost all frames I've created in Tukui have a global name. They are easy to find with framestack command. This way, you can update a lot more easily Tukui to latest version by keeping your change (with your edit addon) every time an update is available.

That's it for tonight. I'm out. I hope you liked this little guide I wrote before going to sleep and sorry for my english. As most of you already know, my native language is french. Before I've created tukui.org website, I had 0 knowledge with english but i'm learning a lot with all of you in here since 2008. I'm now able to travel and speak english easily everywhere I go!



~ Tukz

Comment this article

Last updated: 20-09-2011