|
|
(One intermediate revision by one other user not shown) |
Line 1: |
Line 1: |
| {{Language}} | | {{Language}} |
| {{RecoveredPage| This is during recovery The following content has been recovered from the old wiki and pantheraproject*net. Competent verification is needed.}} | | {{Updated|2014.05.07| 2.7.x.0}} |
|
| |
|
| | =<controlTips>= |
|
| |
|
| | The '''<controlTips>''' element can be used to display tooltips for almost all dialog controls when mouse is moved over them. |
|
| |
|
| | The element is useful while translating settings pages, when detailed explanation is needed or when translation text is very long and doesn't fit in the dialog. The translators can shorten the text and put the full text in tooltips. Each element consists of a '''message''' that is displayed in the tooltip. The '''id''' is taken from the [[Skinning.tipMap|'''<tipMap>''']]. |
|
| |
|
| | Here is an example from '''MyControlTipSkin.xml''': |
|
| |
|
| = start content<controlTips> =
| | <controlTips> |
| The '''<controlTips>''' element can be used to display tooltips for almost all dialog controls when mouse is moved over them.
| | <tip id="IDC_THROTTLE_MODE" message="In the maximum mode the bandwidth won't |
| | exceed the specified value. In the average mode it will fluctuate around the |
| | value to both sides."/> |
| | </controlTips> |
| | |
|
| |
|
| The element is useful while translating settings pages, when detailed explanation is needed or when translation text is very long and doesn't fit in the dialog. The translators can shorten the text and put the full text in tooltips. Each element consists of a message that is displayed in the tooltip. The id is taken from the [[Skinning.tipMap|tipMap]].
| | To create a translation skin, copy the existing control tip database from '''default-en.xml''' in your skins folder and start translating each entry. |
|
| |
|
| Here is an example from '''MyControlTipSkin.xml''':
| | {{Nav2|Skinning tutorial}} |
| | |
| <nowiki><controlTips></nowiki>
| |
| | |
| <nowiki><tip id="IDC_THROTTLE_MODE" message="In the maximum mode the bandwidth won't </nowiki>
| |
| exceed the specified value. In the average mode it will fluctuate around the
| |
| value to both sides."/>
| |
| | |
| <nowiki></controlTips></nowiki>
| |
| | |
| To create a translation skin, copy the existing control tip database from '''default-en.xml''' in your skins folder and start translating each entry.
| |
| | |
| Retrieved from now untrusted pantheraproject*net <center>This page was last modified on March 27, 2008, at 20:08. </center>
| |
| * <center>Content is available under [/wiki/index.php%3Ftitle=Shareaza_Wiki:Copyrights GNU Free Documentation License 1.3]. </center>
| |
| | |
| Copyright © 2002-2009 Shareaza Development Team.
| |
| | |
| | |
| | |
| | |
| | |
| | |
| <!-- start content -->
| |
| <span id="languageselector-box-1" class="languageselector " style=""><form name="languageselector-form-1" id="languageselector-form-1" method="get" action="/wiki/index.php" style="display:inline;"><input name="title" type="hidden" value="Skinning.Tutorial" /><select name="setlang" id="languageselector-select-1" style=""><option value="en" selected="selected">English</option><option value="es">Español</option><option value="de">Deutsch</option><option value="fr">Français</option><option value="he">עברית</option><option value="it">Italiano</option><option value="nl">Nederlands</option><option value="pl">Polski</option><option value="ru">Đ ŃŃŃкий</option><option value="pt">PortuguĂŞs</option><option value="tw">Twi</option></select><input type="submit" value="set" id="languageselector-commit-1" style="" /></form></span><div class="LanguageLinks">
| |
| <table width="100%" style="border: 1px solid #aaaaaa; margin-bottom: 0.5em">
| |
| <tr valign="top" style="background: #EEF3E2;">
| |
| <td style="width: 25px; padding-left: 0.5em;"><a href="/wiki/index.php?title=File:Geographylogo.png" class="image" title="Languages"><img alt="Languages" src="/wiki/images/thumb/5/59/Geographylogo.png/25px-Geographylogo.png" width="25" height="25" border="0" /></a></td>
| |
| <td style="width: 10px; white-space: nowrap; padding: 4px 1em 0 0.5em; border-right: 1px solid #aaaaaa;"><b><a href="/wiki/index.php?title=Shareaza_Wiki:Language_policy" title="Shareaza Wiki:Language policy">Languages</a>:</b> </td><td style="padding: 1px 1em 0; background: #F6F9ED;">
| |
| <p><b><strong class="selflink">English</strong></b>
| |
| • <span lang="de"><a href="/wiki/index.php?title=Skinning.Tutorial/de" title="Skinning.Tutorial/de">Deutsch</a></span>
| |
| • <span lang="es"><a href="/wiki/index.php?title=Skinning.Tutorial/es" title="Skinning.Tutorial/es">Español</a></span>
| |
| • <span lang="fr"><a href="/wiki/index.php?title=Skinning.Tutorial/fr" title="Skinning.Tutorial/fr">Français</a></span>
| |
| • <span lang="he"><a href="/wiki/index.php?title=Skinning.Tutorial/he" title="Skinning.Tutorial/he">עברית</a></span>
| |
| • <span lang="it"><a href="/wiki/index.php?title=Skinning.Tutorial/it" title="Skinning.Tutorial/it">Italiano</a></span>
| |
| • <span lang="nl"><a href="/wiki/index.php?title=Skinning.Tutorial/nl" title="Skinning.Tutorial/nl">Nederlands</a></span>
| |
| • <span lang="pl"><a href="/wiki/index.php?title=Skinning.Tutorial/pl" title="Skinning.Tutorial/pl">Polski</a></span>
| |
| • <span lang="pt"><a href="/wiki/index.php?title=Skinning.Tutorial/pt" title="Skinning.Tutorial/pt">PortuguĂŞs</a></span>
| |
| • <span lang="ru"><a href="/wiki/index.php?title=Skinning.Tutorial/ru" title="Skinning.Tutorial/ru">Đ ŃŃŃкий</a></span>
| |
| <span></span>
| |
| <span></span>
| |
| </p>
| |
| </td></tr></table></div>
| |
| <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
| |
| <ul>
| |
| <li class="toclevel-1"><a href="#Skinning_Tutorial"><span class="tocnumber">1</span> <span class="toctext">Skinning Tutorial</span></a></li>
| |
| <li class="toclevel-1"><a href="#Getting_Started"><span class="tocnumber">2</span> <span class="toctext">Getting Started</span></a></li>
| |
| <li class="toclevel-1"><a href="#The_Manifest_Element"><span class="tocnumber">3</span> <span class="toctext">The Manifest Element</span></a></li>
| |
| <li class="toclevel-1"><a href="#Visual_Guide"><span class="tocnumber">4</span> <span class="toctext">Visual Guide</span></a></li>
| |
| <li class="toclevel-1"><a href="#Skin_Elements"><span class="tocnumber">5</span> <span class="toctext">Skin Elements</span></a></li>
| |
| <li class="toclevel-1"><a href="#Adding_RTL_.28Right-to-Left.29_Compatibility"><span class="tocnumber">6</span> <span class="toctext">Adding RTL (Right-to-Left) Compatibility</span></a></li>
| |
| <li class="toclevel-1"><a href="#Shareaza_Remote_Skinning"><span class="tocnumber">7</span> <span class="toctext">Shareaza Remote Skinning</span></a></li>
| |
| <li class="toclevel-1"><a href="#Distributing_Your_Skins"><span class="tocnumber">8</span> <span class="toctext">Distributing Your Skins</span></a></li>
| |
| <li class="toclevel-1"><a href="#Getting_Help"><span class="tocnumber">9</span> <span class="toctext">Getting Help</span></a></li>
| |
| </ul>
| |
| </td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
| |
| <a name="Skinning_Tutorial" id="Skinning_Tutorial"></a><h3> <span class="mw-headline">Skinning Tutorial</span></h3>
| |
| <p>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:
| |
| </p>
| |
| <ul><li> <b>Visual skins</b> - Changes visual theme and or customizes buttons/layout of program.
| |
| </li><li> <b>Language skins</b> - Translates text into a different language.
| |
| </li></ul>
| |
| <a name="Getting_Started" id="Getting_Started"></a><h2> <span class="mw-headline">Getting Started</span></h2>
| |
| <p>This tutorial goes in parts. A great way to learn is to go through element-by-element and build your own skin!
| |
| </p><p>Skins are stored in the <i>C:\Program Files\Shareaza\Skins folder.</i>
| |
| Each skin has its own folder, such as <i>C:\Program Files\Shareaza\Skins\MySkin.</i>
| |
| 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 <a href="http://notepad-plus.sourceforge.net/" class="external text" title="http://notepad-plus.sourceforge.net/">Notepad++</a> or <a href="http://www.emeditor.com/" class="external text" title="http://www.emeditor.com/">EmEditor</a>. 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.
| |
| </p><p>Here is a very simple skin file, called MySimpleSkin.xml:
| |
| </p>
| |
| <div dir="ltr" style="text-align: left;"><div class="source-xml" style="font-family: monospace;"><pre> <span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"UTF-8"</span><span class="re2">?></span>
| |
| <span class="re1"><skin</span> <span class="re0">xmlns</span>=<span class="st0">"http://www.shareaza.com/schemas/Skin.xsd"</span> <span class="re0">version</span>=<span class="st0">"1.0"</span><span class="re2">></span>
| |
| <span class="re1"><manifest</span> <span class="re0">name</span>=<span class="st0">"My Simple Skin"</span> <span class="re0">author</span>=<span class="st0">"Me"</span> <span class="re0">type</span>=<span class="st0">"Skin"</span><span class="re2">/></span>
| |
| <span class="re1"><watermarks<span class="re2">></span></span>
| |
| <span class="re1"><watermark</span> <span class="re0">target</span>=<span class="st0">"CCoolMenuBar"</span> <span class="re0">path</span>=<span class="st0">"MyWatermark.bmp"</span><span class="re2">/></span>
| |
| <span class="re1"></watermarks<span class="re2">></span></span>
| |
| <span class="re1"></skin<span class="re2">></span></span></pre></div></div>
| |
| <p>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.
| |
| </p><p>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.
| |
| </p>
| |
| <div style="width:95%; border:1px solid #8cacbb; margin: 0.5em 1em; padding: 0 0.5em;">
| |
| <p><b>Tip:</b>
| |
| If you need to quickly reload the skin you are working on, press Ctrl-Shift-Z.
| |
| </p>
| |
| </div>
| |
| <a name="The_Manifest_Element" id="The_Manifest_Element"></a><h2> <span class="mw-headline">The Manifest Element</span></h2>
| |
| <p>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:
| |
| </p>
| |
| <div dir="ltr" style="text-align: left;"><div class="source-xml" style="font-family: monospace;"><pre> <span class="re1"><manifest</span>
| |
| <span class="re0">name</span>=<span class="st0">"The name of the skin"</span>
| |
| <span class="re0">author</span>=<span class="st0">"The person or organisation who created it"</span>
| |
| <span class="re0">updatedBy</span>=<span class="st0">"The person who updated it"</span>
| |
| <span class="re0">description</span>=<span class="st0">"A longer description of the skin, if desired"</span>
| |
| <span class="re0">link</span>=<span class="st0">"http://a.url.for.the.skin.com/if/applicable/"</span>
| |
| <span class="re0">email</span>=<span class="st0">"an@email.address.example.com"</span>
| |
| <span class="re0">version</span>=<span class="st0">"1.5"</span>
| |
| <span class="re0">type</span>=<span class="st0">"Skin"</span>
| |
| <span class="re0">dir</span>=<span class="st0">"ltr"</span>
| |
| <span class="re2">/></span></pre></div></div>
| |
| <p>All of the attributes except for name are optional:
| |
| </p>
| |
| <ul><li><b>name</b> - The name of the skin.
| |
| </li><li><b>author</b> - The person who created the skin.
| |
| </li><li><b>updatedBy</b> - The person who updated/improved the skin.
| |
| </li><li><b>description</b> - A longer description of the skin.
| |
| </li><li><b>link</b> - An optional web URL to visit for more information.
| |
| </li><li><b>email</b> - An optional email address to contact for more information.
| |
| </li><li><b>version</b> - The revision number of the skin.
| |
| </li><li><b>type</b> - Most skins should set this to "skin". The exception is language translation skins, which would set this to "language".
| |
| </li><li><b>language</b> - Only include if the type is set to "language" above. It specifies the language code which the translation provides, for example "en".
| |
| </li><li><b>dir</b> - Most skins can omit this. The values can be: "ltr" for left-to-right languages and "rtl" for right-to-left languages.
| |
| </li></ul>
| |
| <p><br />
| |
| </p>
| |
| <a name="Visual_Guide" id="Visual_Guide"></a><h2> <span class="mw-headline">Visual Guide</span></h2>
| |
| <p>The visual guide is a collection of screenshots and other visuals demonstrating what parts of the default skin correspond to which IDs.
| |
| </p><p><a href="http://shareaza.sourceforge.net/?id=skindocs/xml-default" class="external text" title="http://shareaza.sourceforge.net/?id=skindocs/xml-default">Default.xml</a> and <a href="http://shareaza.sourceforge.net/?id=skindocs/xml-definitions" class="external text" title="http://shareaza.sourceforge.net/?id=skindocs/xml-definitions">Definitions.xml</a> 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 <a href="/wiki/index.php?title=Skinning.commandImages" title="Skinning.commandImages">commandImages</a> should be consulted for the exact syntax for replacing icons.
| |
| </p>
| |
| <a name="Skin_Elements" id="Skin_Elements"></a><h2> <span class="mw-headline">Skin Elements</span></h2>
| |
| <p>This section lists all of the different elements you can include in a skin file, with links to more detailed descriptions.
| |
| </p>
| |
| <table border="1" cellspacing="0" cellpadding="5">
| |
| | |
| <tr style="background-color:#FFFFC0;">
| |
| <td><b>Element</b>
| |
| </td><td><b>Description</b>
| |
| </td><td><b>Used For</b>
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.colourScheme" title="Skinning.colourScheme"><colourScheme></a>
| |
| </td><td>Specifies the user interface colour scheme used throughout the program.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.watermarks" title="Skinning.watermarks"><watermarks></a>
| |
| </td><td>Adds watermark images to parts of the interface.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.windowSkins" title="Skinning.windowSkins"><windowSkins></a>
| |
| </td><td>Drastically changes the appearance of windows.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.commandImages" title="Skinning.commandImages"><commandImages></a>
| |
| </td><td>Changes images displayed on toolbars, menus and windows.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.menus" title="Skinning.menus"><menus></a>
| |
| </td><td>Defines the menus in the program.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.toolbars" title="Skinning.toolbars"><toolbars></a>
| |
| </td><td>Defines the toolbars in the program.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.fonts" title="Skinning.fonts"><fonts></a>
| |
| </td><td>Changes the fonts used in the interface.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.documents" title="Skinning.documents"><documents></a>
| |
| </td><td>Provides the RichDoc displayed on the Home tab.
| |
| </td><td>Skinning
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.tipMap" title="Skinning.tipMap"><tipMap></a>
| |
| </td><td>Controls the Tip map.
| |
| </td><td>Translation
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.controlTips" title="Skinning.controlTips"><controlTips></a>
| |
| </td><td>Changes the text displayed in tooltips for various dialogs.
| |
| </td><td>Translation
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.dialogs" title="Skinning.dialogs"><dialogs></a>
| |
| </td><td>Changes the text displayed in dialogs.
| |
| </td><td>Translation
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.commandTips" title="Skinning.commandTips"><commandTips></a>
| |
| </td><td>Changes the text displayed in tooltips and command help messages.
| |
| </td><td>Translation
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.strings" title="Skinning.strings"><strings></a>
| |
| </td><td>Changes the text used in all other messages.
| |
| </td><td>Translation
| |
| </td></tr>
| |
| <tr>
| |
| <td><a href="/wiki/index.php?title=Skinning.listColumns" title="Skinning.listColumns"><listColumns></a>
| |
| </td><td>Changes the text displayed in list views.
| |
| </td><td>Translation
| |
| </td></tr></table>
| |
| <a name="Adding_RTL_.28Right-to-Left.29_Compatibility" id="Adding_RTL_.28Right-to-Left.29_Compatibility"></a><h2> <span class="mw-headline">Adding RTL (Right-to-Left) Compatibility</span></h2>
| |
| <p>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.
| |
| </p>
| |
| <a name="Shareaza_Remote_Skinning" id="Shareaza_Remote_Skinning"></a><h2> <span class="mw-headline">Shareaza Remote Skinning</span></h2>
| |
| <p>Once you've learned the elements of Shareaza skinning, give <a href="/wiki/index.php?title=Skinning.remote" title="Skinning.remote">skinning the remote</a> a try!
| |
| </p>
| |
| <a name="Distributing_Your_Skins" id="Distributing_Your_Skins"></a><h2> <span class="mw-headline">Distributing Your Skins</span></h2>
| |
| <p>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.
| |
| </p>
| |
| <ul><li><b>Make sure the skin is ready for prime-time.</b>
| |
| </li></ul>
| |
| <dl><dd><dl><dd>Test that it works without any strange results. If possible test it on a different computer.
| |
| </dd></dl>
| |
| </dd></dl>
| |
| <p><br />
| |
| </p>
| |
| <ul><li><b>Make sure everything is as neat & small as possible.</b>
| |
| </li></ul>
| |
| <dl><dd><dl><dd>If you've created image files, convert them to 8-bit, 256 colour bitmaps.
| |
| </dd></dl>
| |
| </dd></dl>
| |
| <p><br />
| |
| </p>
| |
| <ul><li><b>Check your manifest element.</b>
| |
| </li></ul>
| |
| <dl><dd><dl><dd>This should provide an accurate name for the skin, the type of skin, and any other information you think is relevant.
| |
| </dd></dl>
| |
| </dd></dl>
| |
| <p>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.
| |
| </p><p>To do this:
| |
| <b>ZIP</b> the skins folder.
| |
| Rename your <b>.ZIP</b> file to a <b>.SKS</b> file.
| |
| Shareaza skin (.sks) files are automatically unzipped and installed into the correct location when they are opened by end-users.
| |
| </p><p>Finally, be sure to submit your skin to the <a href="http://www.shareazasecurity.be/forum/viewforum.php?f=18" class="external text" title="http://www.shareazasecurity.be/forum/viewforum.php?f=18">Shareaza skin library</a>, 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!
| |
| </p>
| |
| <a name="Getting_Help" id="Getting_Help"></a><h2> <span class="mw-headline">Getting Help</span></h2>
| |
| <p>Need help with skinning? Want to talk to others about it, or make an announcement about your new skin? If so, visit the <a href="http://www.shareazasecurity.be/forum/viewforum.php?f=18" class="external text" title="http://www.shareazasecurity.be/forum/viewforum.php?f=18">Skinning Forum</a>.
| |
| </p>
| |
| | |
| <!-- end content -->
| |
| | |
| <li class="interwiki-es"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/es">Español</a></li>
| |
| <li class="interwiki-de"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/de">Deutsch</a></li>
| |
| <li class="interwiki-fr"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/fr">Français</a></li>
| |
| <li class="interwiki-he"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/he">עברית</a></li>
| |
| <li class="interwiki-it"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/it">Italiano</a></li>
| |
| <li class="interwiki-nl"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/nl">Nederlands</a></li>
| |
| <li class="interwiki-pl"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/pl">Polski</a></li>
| |
| <li class="interwiki-ru"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/ru">Đ ŃŃŃкий</a></li>
| |
| <li class="interwiki-pt"><a href="http://www.pantheraproject.net/wiki/index.php?title=Skinning.Tutorial/pt">PortuguĂŞs</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <li id="lastmod"> This page was last modified on December 23, 2008, at 15:59.</li>
| |
| <li id="copyright">Content is available under <a href="/wiki/index.php?title=Shareaza_Wiki:Copyrights" title="Shareaza Wiki:Copyrights">GNU Free Documentation License 1.3</a>.</li>
| |
| | |
| | |
| <p>Proud to be Open Source </p>
| |