Skinning tutorial: Difference between revisions

From Shareaza Wiki
Jump to navigation Jump to search
(Added recovered content of 1st level. NEEDED VERIFICATION and feedback if this is needed? Look at recovery box.)
(→‎Getting Help: mistake of copy)
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{RecoveredPage|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.
{{Languages}}
I have added recovered content. Date unknown.
This content need to be verified by competent community member if it is OK. Untill 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}}


===Skinning Tutorial===
{{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.<br/><br/>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}}
 
= Where you should go (besides of this page) for skinning tutorial and skins (comment by oce) =  
As mentioned above this page is recoverd, yet not completely polished - forgive us. At Shareaza site there is subsite [http://shareaza.sourceforge.net/?id=addon Skins & Add-ons]. There you can find, among the others, two interesting for skinning links: [http://browse.deviantart.com/customization/skins/filesharing/shareaza/?alltime=yes#order=9 Download Skins for Shareaza] and [http://shareaza.sourceforge.net/?id=skindocs/default Designing your own Shareaza Skin] - this link is curently best formatted and most actual tutorial for Shareaza skinning. It is wise to read both, this Skinning tutorial page and above mentioned, as can happens they don't have the same content. This comment was left here to prevent accidental ommition so to help user, by [[User:Ocexyz|Ocexyz]] 08:48, 1 May 2010 (UTC)
 
= 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:
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:


Line 9: Line 13:
* '''Language skins''' - Translates text into a different language.
* '''Language skins''' - Translates text into a different language.


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


Line 33: Line 37:
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.
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.


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


==The Manifest Element==
== The Manifest Element ==
The example above included a &lt;manifest&gt; 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 &lt;manifest&gt; element:
The example above included a &lt;manifest&gt; 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 &lt;manifest&gt; element:


Line 67: Line 70:




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


[http://shareaza.sourceforge.net/?id=skindocs/xml-default Default.xml] and [http://shareaza.sourceforge.net/?id=skindocs/xml-definitions 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 [[Skinning.commandImages|commandImages]] should be consulted for the exact syntax for replacing icons.
[http://shareaza.sourceforge.net/?id=skindocs/xml-default Default.xml] and [http://shareaza.sourceforge.net/?id=skindocs/xml-definitions 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 [[Skinning.commandImages|commandImages]] should be consulted for the exact syntax for replacing icons.


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


Line 138: Line 141:
|}
|}


==Adding RTL (Right-to-Left) Compatibility==
== 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.  
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==
== Shareaza Remote Skinning ==
Once you've learned the elements of Shareaza skinning, give [[Skinning.remote|skinning the remote]] a try!
Once you've learned the elements of Shareaza skinning, give [[Skinning.remote|skinning the remote]] a try!


==Distributing Your Skins==
== 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.
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.'''
* '''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.
::Test that it works without any strange results.  If possible test it on a different computer.




*'''Make sure everything is as neat &amp; small as possible.'''
* '''Make sure everything is as neat &amp; small as possible.'''
::If you've created image files, convert them to 8-bit, 256 colour bitmaps.
::If you've created image files, convert them to 8-bit, 256 colour bitmaps.




*'''Check your manifest element.'''
* '''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.  
::This should provide an accurate name for the skin, the type of skin, and any other information you think is relevant.  


Line 167: Line 170:
Finally, be sure to submit your skin to the [http://www.shareazasecurity.be/forum/viewforum.php?f=18 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!
Finally, be sure to submit your skin to the [http://www.shareazasecurity.be/forum/viewforum.php?f=18 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==
== 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 [http://www.shareazasecurity.be/forum/viewforum.php?f=18 Skinning Forum].<div class='templatesUsed'>
Need help with skinning? Want to talk to others about it, or make an announcement about your new skin? If so, visit the [http://www.shareazasecurity.be/forum/viewforum.php?f=18 Skinning Forum].
<div class="mw-templatesUsedExplanation"><p>Templates used on this page:
 
</p></div><ul>
 
<li><a href="/wiki/index.php?title=Template:Box" title="Template:Box">Template:Box</a> (<a href="/wiki/index.php?title=Template:Box&amp;action=edit" title="Template:Box">view source</a>) </li><li><a href="/wiki/index.php?title=Template:Languages" title="Template:Languages">Template:Languages</a> (<a href="/wiki/index.php?title=Template:Languages&amp;action=edit" title="Template:Languages">view source</a>) </li><li><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&amp;action=edit" title="Template:Languages/Lang">view source</a>) </li></ul>
 
</div>
{{Navigation|Skinning}}

Latest revision as of 19:55, 29 April 2014

  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

Where you should go (besides of this page) for skinning tutorial and skins (comment by oce)

As mentioned above this page is recoverd, yet not completely polished - forgive us. At Shareaza site there is subsite Skins & Add-ons. There you can find, among the others, two interesting for skinning links: Download Skins for Shareaza and Designing your own Shareaza Skin - this link is curently best formatted and most actual tutorial for Shareaza skinning. It is wise to read both, this Skinning tutorial page and above mentioned, as can happens they don't have the same content. This comment was left here to prevent accidental ommition so to help user, by Ocexyz 08:48, 1 May 2010 (UTC)

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.




Navigation:     ShareazaWiki > Skinning > Skinning tutorial