Windows > Third Party Plug-ins, Programs, and Skins

Standard View Skinning Tutorial

<< < (12/17) > >>

marko:
Skinning The 'experimental' tag window

The 'how do you do that?' question has been asked in various threads, so I figured an answer here might be appropriate. Bear in mind that things might change in the future, but for now, it's quite simple to do, mostly because we don't have much to customise.

To apply skinning to the experimental tag window you just need three images and some xml for the skin file.

Images
1. Group image (with expanded/collapsed image)


2. Field label image


3. Field image


required xml
The skinning engine needs to know what to do with your images, so you need to add a "TAGWINDOW" block to the skin's 'main.xml' file. In Black and Blue Too, it looks like so:

--- Code: ---<TAGWINDOW>
  <Entry Name="Group" Bitmap="TagWindow_Group.png" NumberImages="2" Columns="20,?-Flex,10" Rows="1,?-Flex,1" Cells="B1-HTILE,B2-HTile,B3-HTILE" />
  <Entry Name="Field" Bitmap="TagWindow_Field.png" Scale="4" NumberImages="2" Rows="4,?-Flex,4" />
  <Entry Name="FieldLabel" Bitmap="TagWindow_FieldLabel.png" Scale="4" NumberImages="1" Columns="?-Flex" Rows="?-Flex" Cells="A1-Tile" />
</TAGWINDOW>

--- End code ---

The text colour is derived from the value entered in the <FRAME> block, but be careful here as that value is used in other areas too, such as tooltip borders and text, so a balance needs to be found. Hopefully we can get exclusive values for the tag window in the near future.

Put all that together, and here's how it looks in action (pardon the pun ;)):


The example is called Black and Blue Too, which can be found here if you would like to try it.
The experimental tag window has a blue-ish mouse over shade as you move the mouse between fields in the tag window. This colour is currently hard coded into MC and we have no control over it. This may change though. Luckily for me, it works quite well in this skin.

So there you have it, quick and simple experimental tag windoow skinning.
Enjoy.

-marko

kurushi:
Marko this skin is really beautiffull a clean evolution of you're old blue one!

marko:
Trust me, the picture shows the experimental tag window, skinned. Try it. Save the three images in your skin folder, copy/paste the code into your main.xml file, save it, reload your skin, open new tag window. It won't look right in your skin, especially if you don't have scaling enabled, but should be enough to get you started.

kurushi:
Yep my bad it's really the new one :p
so thank you for the tutorial!

Just one thing on you're blue skin, the playerbar progreession is not in the same blue than button and it 'll better with the same colour or if you really want another color you can try it grey or black.

marko:
:)
Thank you. It was the same as the rest of the blue, but I felt that it got kind of lost amongst all the other blue lines around it, so changed the shade... I might try a different colour, we'll see.

Remember to watch out for that frame text colour when you skin yours, it's more restrictive than you might think at first...

Navigation

[0] Message Index

[#] Next page

[*] Previous page