Skinning tutorial

Languages:

[[::Skinning tutorial|English]] • [[::Skinning tutorial/de|Deutsch]] • [[::Skinning tutorial/es|Español]] • [[::Skinning tutorial/fr|Français]] • [[::Skinning tutorial/he|עברית]] • [[::Skinning tutorial/it|Italiano]] • [[::Skinning tutorial/nl|Nederlands]] • [[::Skinning tutorial/pl|Polski]] • [[::Skinning tutorial/pt|Português]] • [[::Skinning tutorial/ru|Русский]] • [[::Skinning tutorial/zh-hant|‪中文(繁體)]]

e

Recovered

This page is recovered at 1st level only yet (red links mostly to nowhere ATM). This part of the wiki involves complex formatting and still needs to be recovered. I have added recovered content. Date unknown. This content need to be verified by competent community member if it is OK. Until this comment is here treat it unverified. I will look for 2nd level when I will get confirmation this is needed - it is worth to do this.OCE

e

Skinning Tutorial

Creating skins for Shareaza is easy. You can make skins as simple or as complex as you want. These pages provide a simple tutorial and a detailed reference for Shareaza skinning capabilities. With this tutorial you'll be able to make:

• Visual skins - Changes visual theme and or customizes buttons/layout of program.
• Language skins - Translates text into a different language.

Getting Started

This tutorial goes in parts. A great way to learn is to go through element-by-element and build your own skin!

Skins are stored in the C:\Program Files\Shareaza\Skins folder. Each skin has its own folder, such as C:\Program Files\Shareaza\Skins\MySkin. Each folder contains the main skin file and support files, such as images or icons. Every skin has a skin definition file, which is in XML format. XML is an easy to read text format not unlike HTML, but for more general purpose use. It is recommended, but not required, that a text editor with XML syntax highlighting be used. Examples are Notepad++ or EmEditor. The skin definition file tells Shareaza about the skin -- things like who created it, which parts of the interface to change, and how to change them.

Here is a very simple skin file, called MySimpleSkin.xml:

<source lang="xml">

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd%22 version="1.0">
<manifest name="My Simple Skin" author="Me" type="Skin"/>
<watermarks>
 <watermark target="CCoolMenuBar" path="MyWatermark.bmp"/>
</watermarks>
</skin>

</source>

This skin specifies its name and author, and adds a watermark image to the main menu bar. Easy! Skins are just like this: you can change as much or as little as you want.

Note: The first two lines of this example should always be used without modification. The xmlns and version tags are important, and should not be edited at all. This is the version of the skinning core, not the version of your skin.

Tip: If you need to quickly reload the skin you are working on, press Ctrl-Shift-Z.

The Manifest Element

The example above included a <manifest> element, which specified the name of the skin. It's important to include some good meta-information about your skin so that others can identify it and search for it. Here is a complete reference for the <manifest> element:

<source lang="xml">

<manifest
name="The name of the skin"
author="The person or organisation who created it"
updatedBy="The person who updated it"
description="A longer description of the skin, if desired"
link="http://a.url.for.the.skin.com/if/applicable/%22
email="an@email.address.example.com"
version="1.5"
type="Skin"
dir="ltr"
/>

</source>

All of the attributes except for name are optional:

• name - The name of the skin.
• author - The person who created the skin.
• updatedBy - The person who updated/improved the skin.
• description - A longer description of the skin.
• link - An optional web URL to visit for more information.
• email - An optional email address to contact for more information.
• version - The revision number of the skin.
• type - Most skins should set this to "skin". The exception is language translation skins, which would set this to "language".
• language - Only include if the type is set to "language" above. It specifies the language code which the translation provides, for example "en".
• dir - Most skins can omit this. The values can be: "ltr" for left-to-right languages and "rtl" for right-to-left languages.

Visual Guide

The visual guide is a collection of screenshots and other visuals demonstrating what parts of the default skin correspond to which IDs.

Default.xml and Definitions.xml show a list of Shareaza's default icons and their corresponding IDs to help in figuring out how to modify a certain icon. The documentation on commandImages should be consulted for the exact syntax for replacing icons.

Skin Elements

This section lists all of the different elements you can include in a skin file, with links to more detailed descriptions.

Element	Description	Used For
<colourScheme>	Specifies the user interface colour scheme used throughout the program.	Skinning
<watermarks>	Adds watermark images to parts of the interface.	Skinning
<windowSkins>	Drastically changes the appearance of windows.	Skinning
<commandImages>	Changes images displayed on toolbars, menus and windows.	Skinning
<menus>	Defines the menus in the program.	Skinning
<toolbars>	Defines the toolbars in the program.	Skinning
<fonts>	Changes the fonts used in the interface.	Skinning
<documents>	Provides the RichDoc displayed on the Home tab.	Skinning
<tipMap>	Controls the Tip map.	Translation
<controlTips>	Changes the text displayed in tooltips for various dialogs.	Translation
<dialogs>	Changes the text displayed in dialogs.	Translation
<commandTips>	Changes the text displayed in tooltips and command help messages.	Translation
<strings>	Changes the text used in all other messages.	Translation
<listColumns>	Changes the text displayed in list views.	Translation

Adding RTL (Right-to-Left) Compatibility

So that people all around the world can enjoy your skin you should make sure it is RTL (Right-to-Left) compatible. This is for languages that start on the right and read to the left like Hebrew and Arabic.

Shareaza Remote Skinning

Once you've learned the elements of Shareaza skinning, give skinning the remote a try!

Distributing Your Skins

Once you've created a cool skin, there isn't much point in keeping it all to yourself, right? Distributing Shareaza skins is easy, but there are a few tips which are worth mentioning.

• Make sure the skin is ready for prime-time.

Test that it works without any strange results. If possible test it on a different computer.

• Make sure everything is as neat & small as possible.

If you've created image files, convert them to 8-bit, 256 colour bitmaps.

• Check your manifest element.

This should provide an accurate name for the skin, the type of skin, and any other information you think is relevant.

The best way to package and distribute a Shareaza skin is to ZIP up all the files, and take advantage of the automatic skin installer that comes with Shareaza.

To do this: ZIP the skins folder. Rename your .ZIP file to a .SKS file. Shareaza skin (.sks) files are automatically unzipped and installed into the correct location when they are opened by end-users.

Finally, be sure to submit your skin to the Shareaza skin library, and share it on Shareaza! Sharing skins on Shareaza is very important, as it will allow everyone to download them faster. After all, that's what we're about!

Getting Help

Need help with skinning? Want to talk to others about it, or make an announcement about your new skin? If so, visit the Skinning Forum.

Templates used on this page:

• <a href="/wiki/index.php?title=Template:Box" title="Template:Box">Template:Box</a> (<a href="/wiki/index.php?title=Template:Box&action=edit" title="Template:Box">view source</a>)
• <a href="/wiki/index.php?title=Template:Languages" title="Template:Languages">Template:Languages</a> (<a href="/wiki/index.php?title=Template:Languages&action=edit" title="Template:Languages">view source</a>)
• <a href="/wiki/index.php?title=Template:Languages/Lang" title="Template:Languages/Lang">Template:Languages/Lang</a> (<a href="/wiki/index.php?title=Template:Languages/Lang&action=edit" title="Template:Languages/Lang">view source</a>)

---

Navigation:     ShareazaWiki > Skinning > Skinning tutorial

---