Warning: HTML preview using PygmentsRenderer failed (TypeError: function() takes at least 2 arguments (0 given))

source: trunk/fl5/doc/publishers/skinning.rst @ 1153

Revision 1153, 26.9 KB checked in by pablo, 4 years ago (diff)

Updating skinning guide to include missing documentation on Display skinning elements

Line 
1.. _skinning:
2
3XML/PNG Skinning
4================
5
6With skins, you can customize the face of your JW player. You can alter the design of any of the player's four component parts -- ControlBar, Display, Dock and Playlist, as well as skinning-enabled plugins.  Before JW Player 5, it was only possible to build skins using Adobe Flash (which was difficult and error-prone).  Now, with JW Player 5, designers can build skins in their graphical editor of choice, and save the visual elements as bitmaps. This allows for rapid prototyping without the need to compile a swf file, and opens up skinning to designers who don't have Flash experience or software.
7
8
9Supported Graphics Formats
10--------------------------
11
12JW Player 5 will accept most commonly used bitmap image formats including:
13
14 * JPG
15 * GIF (*Allows Transparency*)
16 * PNG (8-Bit) (*Allows Transparency*)
17 * PNG (24-Bit) (*Allows Transparency and Partial Transparency*)
18 
19Examples in this guide will use the PNG file format. It is the preferred format for creating slick skins due to its partial transparency support.
20
21JW Player 5.2 and up support the use of SWF assets in the XML skinning format.  However, we recommend that designers restrict themselves to the bitmap formats above, since skins created using SWF assets will not compatible with the JW Player for HTML5.
22
23.. note:: Animated gif files are not supported.
24
25
26
27
28The XML Document
29----------------
30
31The XML (Extensible Markup Language) file, or document, contains all the settings for your skin -- the color settings for text and dock elements; margins and font-sizes for the ControlBar; and paths to images for every element in the skin.
32
33A player skin consists of its own settings and its components. Here is an example of an XML document before the elements have been defined:
34
35Basic XML Structure
36^^^^^^^^^^^^^^^^^^^
37
38.. code-block:: xml
39
40   <?xml version="1.0"?>
41   <skin version="1.1" name="SkinName" author="http://www.yoursite.com/">
42      <components>
43         <component name="controlbar">
44            <settings>
45               <setting name="..." value="..." />
46            </setting>
47            <layout>
48               ...
49            </layout>
50            <element name="..." src="..." />
51            <element name="..." src="..." />
52            <element name="..." src="..." />
53         </component>
54         <component name="display">
55            <settings>
56               <setting name="..." value="..." />
57            </setting>
58            <element name="..." src="..." />
59            <element name="..." src="..." />
60            <element name="..." src="..." />
61         </component>
62         <component name="dock">
63            <settings>
64               <setting name="..." value="..." />
65            </setting>
66            <element name="..." src="..." />
67            <element name="..." src="..." />
68            <element name="..." src="..." />
69         </component>
70         <component name="playlist">
71            <settings>
72               <setting name="..." value="..." />
73            </setting>
74            <element name="..." src="..." />
75            <element name="..." src="..." />
76            <element name="..." src="..." />
77         </component>
78      </components>
79   </skin>
80
81
82Beginning Your XML Skin
83^^^^^^^^^^^^^^^^^^^^^^^
84
85The opening declaration of your XML document declares that it *IS* an XML document, and establishes that this is a JW Player skin.  Inside the skin element are two attributes:  *name* and *author*.
86
87.. code-block:: xml
88
89   <?xml version="1.0"?>
90   <skin version="1.1" name="SkinName" author="http://www.yoursite.com/">
91     
92You can replace these with your skin's name and your website, or your own name if you'd prefer not to have your URL in the *author* attribute.
93
94Linking to Images
95^^^^^^^^^^^^^^^^^
96
97Images must reside in a subdirectory corresponding to their parent container of the skin's folder.  For instance, Controlbar images should reside in the *controlbar* subdirectory.
98
99Component sections
100^^^^^^^^^^^^^^^^^^
101
102The player's controls are broken into four components.  Each of these is defined in a **<component>** tag, and are all placed inside of the skin's **<components>** block.  The player controls are:
103
104 * controlbar
105 * display
106 * dock
107 * playlist
108 
109In addition to player controls, it is also possible to define skinning elements for skinnable plugins as well.  These would be placed in another **<component>** tag, with the *name* attribute corresponding to the id of the plugin.
110
111.. image:: ../images/skinning/Components.png
112   :alt: Components layout
113
114
115
116
117The Controlbar
118--------------
119
120The ControlBar component is used more than any of the other JW Player skin components. It controls video playback, shows you your point in time, toggles to full-screen mode and allows you to control the volume.
121
122Controlbar XML Syntax
123^^^^^^^^^^^^^^^^^^^^^
124
125.. code-block:: xml
126
127   <component name="controlbar">
128
129      <settings>
130         <setting name="backgroundcolor" value="0x000000"/>
131         <setting name="margin" value="10" />
132         <setting name="font" value="_sans" />
133         <setting name="fontsize" value="10" />
134         <setting name="fontcolor" value="0x000000" />
135         <setting name="fontstyle" value="normal" />
136         <setting name="fontweight" value="normal" />
137         <setting name="buttoncolor" value="0xFFFFFF" />
138      </settings>
139
140      <elements>
141         <element name="background" src="file.png" />
142         <element name="capLeft" src="file.png" />
143         <element name="capRight" src="file.png" />
144         <element name="divider" src="file.png" />
145         <element name="playButton" src="file.png" />
146         <element name="playButtonOver" src="file.png" />   
147         <element name="pauseButton" src="file.png" />
148         <element name="pauseButtonOver" src="file.png" />
149         <element name="timeSliderRail" src="file.png" />
150         <element name="timeSliderBuffer" src="file.png" />
151         <element name="timeSliderProgress" src="file.png" />
152         <element name="timeSliderThumb" src="file.png" />
153         <element name="fullscreenButton" src="file.png" />
154         <element name="fullscreenButtonOver" src="file.png" />
155         <element name="normalscreenButton" src="file.png" />
156         <element name="normalscreenButtonOver" src="file.png" />
157         <element name="muteButton" src="file.png" />
158         <element name="muteButtonOver" src="file.png" />
159         <element name="unmuteButton" src="file.png" />
160         <element name="unmuteButtonOver" src="file.png" />
161         <element name="volumeSliderRail" src="file.png" />
162         <element name="volumeSliderBuffer" src="file.png" />
163         <element name="volumeSliderProgress" src="file.png" />
164         ...
165      </elements>
166
167      <layout>
168         ...
169      </layout>
170   </component>
171
172
173Controlbar Settings
174^^^^^^^^^^^^^^^^^^^
175
176In the example above, you will notice the bit of code containing the settings element for the ControlBar component. Here is a list of the Controlbar settings, along with their default values:
177
178.. describe:: backgroundcolor (undefined)
179   
180   Color to display underneath the controlbar. If the controlbar elements are transparent or semi-transparent, this color will show beneath those elements.  If this is not set, the Flash stage will be visible beneath the controlbar.
181
182.. describe:: margin (0)
183   
184   This is the margin which will wrap around the controlbar when the player is fullscreen mode, or when the player's *controlbar* setting is set to **over**.  The value is in pixels.
185
186.. describe:: font (_sans)
187   
188   The font face for the Controlbar's text fields, **elapsed** and **duration**.  (*_sans*, *_serif*, *_typewriter*)
189
190.. describe:: fontsize (10)
191   
192   The font size of the Controlbar's text fields.
193
194.. describe:: fontweight (normal)
195   
196   The font weight for the Controlbar's text fields. (*normal*, *bold*)
197
198.. describe:: fontstyle (normal)
199   
200   The font style for the Controlbar's text fields. (*normal*, *italic*)
201   
202.. describe:: fontcolor (undefined)
203   
204   The color for the Controlbar's text fields.
205
206.. describe:: buttoncolor (undefined)
207   
208   The color for any custom Controlbar icons.
209     
210.. note: Color values are defined in a hexidecimal value for the color, just like in HTML/CSS. So, for instance, you can make a color red in HTML by assigning the corresponding HTML color code value of #FF0000. In this XML document, to make a color red you will input the value as 0xFF0000. As you can see, instead of # you use 0x.
211
212
213Controlbar Elements
214^^^^^^^^^^^^^^^^^^^
215
216The controlbar contains a single background element:
217
218.. describe:: background
219
220   The background is a graphic which stretches horizontally to fit the width of the Controlbar.  *capLeft* and *capRight* (see below) are placed to the left and right of the background.
221
222The Controlbar has a few elements which allow you to add space between elements. They are non-functioning bitmaps meant to give space to the right and left edges of the Controlbar.
223
224.. describe:: capLeft
225   
226   The left cap graphic to your controlbar skin
227   
228.. describe:: capRight
229
230   The right cap graphic to your controlbar skin
231   
232.. describe:: divider
233
234   A separator element between buttons and sliders.  *(this same element can appear multiple times)*
235
236.. note:: JW Player 5.1 and below will fail to load without the **capLeft**, **capRight** and **volumeSlider** elements in the XML File.  This issue was resolved in version 5.2.
237   
238Next, there are the buttons. Controlbar buttons have two states. The **button** state is visible when the mouse is not hovering over the button.  The **buttonOver** state -- which should have the same dimensions as **button** -- is shown when the user hovers the mouse above the button. Here's a list of all buttons with their states:
239
240* **playButton** / playButtonOver
241* **pauseButton** / pauseButtonOver
242* **prevButton** / prevButtonOver
243* **nextButton** / nextButtonOver
244* **stopButton** / stopButtonOver
245* **fullscreenButton** / fullscreenButtonOver
246* **normalscreenButton** / normalscreenButtonOver
247* **muteButton** / muteButtonOver
248* **unmuteButton** / unmuteButtonOver
249* **blankButton** / blankButtonOver
250
251The **blankButton** element is used when plugins insert additional buttons into the Controlbar.  This element should simply be a button background; the foreground element will be added by the plugins.
252 
253Certain buttons replace each other depending on the state of the JW Player. For instance, when a video is playing, the **playButton** is replaced by the **pauseButton** element. Toggle button pairs:
254
255 * **playButton** / pauseButton
256 * **fullscreenButton** / normalscreenButton
257 * **muteButton** / unmuteButton
258
259
260Next to the caps and buttons, there's the two sliders (for time and volume). The **timeSlider** is a unique block built using several elements stacked on top of each other. Of those elements, three of them automatically scale to a width based on the free space in the player. Those elements are:
261
262.. describe:: timeSliderRail
263
264   the *background* graphic which serves as the frame for the timeSlider
265
266.. describe:: timeSliderBuffer
267
268   the file's buffer indicator
269   
270.. describe:: timeSliderProgress
271
272   the file's progress indicator
273
274With that in mind it is important to design your elements to gracefully scale horizontally.  The **timeSliderBuffer** and **timeSliderProgress** elements dynamically scale to indicate a percentage of progress of the total file length.
275Additional, non-scaling **timeSlider** elements are:
276
277.. describe:: timeSliderThumb
278
279   serves as a handle which can be dragged across the progress bar to allow the user to specify a seek position.
280   
281.. describe:: timeSliderCapLeft
282
283   Left-hand end-cap, placed to the left of the **timeSliderRail** element.
284
285.. describe:: timeSliderCapRight
286
287   Right-hand end-cap, placed to the right of the **timeSliderRail** element.
288
289.. image:: ../images/skinning/timeSlider.png
290   :alt: TimeSlider Screenshot
291
292The **volumeSlider** element is quite similar to the **timeSlider**, except that it does not scale automatically.  It will be as large as graphics you produce. 
293
294.. describe:: volumeSliderRail
295
296   the **background** graphic which serves as the frame for the volumeSlider
297
298.. describe:: volumeSliderBuffer
299
300   this shows the potential volume the slider can have.
301
302.. describe:: volumeSliderProgress
303
304   this is shows the current level at which the volumeSlider is set.
305
306.. describe:: volumeSliderThumb
307
308   the handle to slide the volume, also indicates the volume level.
309
310.. describe:: volumeSliderCapLeft
311
312   Left-hand end-cap, placed to the left of the **volumeSliderRail** element.
313
314.. describe:: volumeSliderCapRight
315
316   Right-hand end-cap, placed to the right of the **volumeSliderRail** element.
317
318
319   the handle to slide the volume, also indicates the volume level.
320
321.. image:: ../images/skinning/volumeSlider.png
322   :alt: VolumeSlider Screenshot
323
324
325.. note:: JW Player 5.1's skinning model will add 5 pixels of padding to each side of the **volumeSlider** if no end-caps are specified.  JW Player 5.1 and below will fail to load without the **volumeSliderRail** element in the XML file.
326 
327Two text fields can be laid out in the controlbar:
328
329.. describe:: elapsed
330
331   Amount of time elapsed since the start of the video (format: mm:ss)
332   
333.. describe:: duration
334
335   Duration of the currently playing video (format: mm:ss)
336
337
338
339
340Controlbar Layout
341-----------------
342
343The controlbar's components (*buttons*, *text fields*, *sliders* and *dividers*) are laid out according to a block of XML code in the Controlbar section.
344
345Layout XML Syntax
346^^^^^^^^^^^^^^^^^
347
348Inside the controlbar's **<component>** block, you can insert an optional **<layout>** block which allows you to override the default controlbar layout.
349
350.. code-block:: xml
351   
352   <layout>
353      <group position="left">
354         <button name="play" />
355         <divider />
356         <button name="prev" />
357         <divider />
358         <button name="next" />
359         <divider />
360         <button name="stop" />
361         <divider />
362         <text name="duration" />
363         <divider />
364      </group>
365      <group position="center">
366         <slider name="time" />
367      </group>
368      <group position="right">
369         <text name="elapsed" />
370         <divider />
371         <button name="blank" />
372         <divider />
373         <button name="mute" />
374         <slider name="volume" />
375         <divider />
376         <button name="fullscreen" />
377      </group>
378   </layout>
379
380Layout Groups
381^^^^^^^^^^^^^
382
383The Controlbar's layout is made up of three groupings, *left*, *right* and *center*.
384
385* **Left**:Elements placed in the **<group position="left">** tag will be placed left to right and be left-aligned.
386* **Center**: Elements placed in the **<group position="center">** tag will be placed between the *left* and *right* groups.  Furthermore, if the **timeSlider** element is placed here, it will be stretched to any space not assigned to other elements.
387* **Right**: Elements placed in the **<group position="right">** tag will be placed left to right and be right-aligned.
388
389Layout Elements
390^^^^^^^^^^^^^^^
391
392The **<group>** tag can contain the following elements:
393
394.. describe:: <button name="..." />
395
396   Used to place the Controlbar button elements described above.  For example, the **play** button would appear as **<button name="play" />**
397
398.. describe:: <text name="..." />
399
400   Used to place the Controlbar text elements, **elapsed** and **duration**.
401
402.. describe:: <slider name="..." />
403
404   Used to place the Controlbar slider elements, **timeSlider** and **volumeSlider**.
405
406.. describe:: <divider />
407
408   Used to place the **divider** element.  This tag can define two optional attributes (only one attribute may be used at a time):
409   
410* *element*: Allows an arbitrary element to be placed between other elements.  If no *element* or *width* attribute is set, the default **divider** graphic is used.  Example:
411
412.. code-block:: xml
413
414         <divider element="alternate_divider" />
415
416* *width*: If this attribute is set, the specified number of pixels will be placed into the layout.  No graphical element will be used; the controlbar's **background** element will be visible.  Example:
417   
418.. code-block:: xml
419
420         <divider width="10" />
421
422Default Controlbar Layout
423^^^^^^^^^^^^^^^^^^^^^^^^^
424
425If no **<layout>** block is included in the skin, the player will use a default layout, based on which skin elements have been defined in the **<elements>** block.  The elements will be layed out in the following order:
426
427 * capLeft
428 * playButton/pauseButton
429 * prevButton
430 * nextButton
431 * stopButton
432 * divider
433 * elapsedText
434 * timeSliderCapLeft
435 * timeSliderRail/timeSliderBuffer/timeSliderProgress/timeSliderThumb
436 * timeSliderCapRight
437 * durationText
438 * divider (*reused element*)
439 * blankButton
440 * divider (*reused element*)
441 * fullscreenButton/normalscreenButton
442 * divider (*reused element*)
443 * muteButton/unmuteButton
444 * volumeSliderCapLeft
445 * volumeSliderRail/volumeSliderBuffer/volumeSliderProgress/volumeSliderThumb
446 * volumeSliderCapRight
447 * capRight
448
449.. image:: ../images/skinning/controlBar.png
450   :alt: Controlbar Screenshot
451
452
453
454
455The Display
456-----------
457
458The display largely consists of the buttons you see in the middle of the player. You see the familiar triangular **play** icon before the movie is playing, and also when you pause.  When the user has muted the player, the **Mute** icon appears.  Display Icons come in two parts: a global background element to every icon, and the icon itself, which is programmatically centered over the background layer.  All images must reside in the *display* subdirectory of the skin.
459
460.. image:: ../images/skinning/Display.png
461   :alt: Display Screenshot
462
463.. note:: By default, the **bufferIcon** will slowly rotate clockwise. There are settings to influence this rotation.
464
465Display XML Syntax
466^^^^^^^^^^^^^^^^^^
467
468.. code-block:: xml
469
470   <component name="display">
471      <settings>
472         <settings>
473            <setting name="backgroundcolor" value="0x000000" />
474            <setting name="bufferrotation" value="15" />
475            <setting name="bufferinterval" value="100" />
476         </settings>
477      </settings>
478      <elements>
479         <element name="background" src="file.png" />
480         <element name="playIcon" src="file.png" />
481         <element name="playIconOver" src="file.png" />
482         <element name="muteIcon" src="file.png" />
483         <element name="muteIconOver" src="file.png" />
484         <element name="bufferIcon" src="file.png" />
485      </elements>
486   </component>
487
488Display Settings
489^^^^^^^^^^^^^^^^
490
491Here is a list of Display settings, along with their default values:
492
493.. describe:: backgroundcolor (0x000000)
494   
495   This is the color of the player's display window, which appears behind any playing media.
496
497.. describe:: bufferrotation (15)
498   
499   The number of degrees the buffer icon is rotated per rotation.  A negative value will result in the buffer rotating counter-clockwise.
500
501.. describe:: bufferinterval (100)
502   
503   The amount of time, in milliseconds between each buffer icon rotation.
504
505Display Elements
506^^^^^^^^^^^^^^^^
507
508The following elements are available for the Display.  All of the elements are optional, and will be excluded from the player if they are not
509
510.. describe:: background
511
512   The background is a graphic which is placed behind the display icons, and is centered inside the Display.
513
514.. describe:: playIcon
515
516   This element is displayed when the player is paused or idle.
517   
518.. describe:: playIconOver
519
520   This element replaces the *playIcon* element when the user hovers the mouse over it.
521   
522.. describe:: muteIcon
523
524   This element is displayed when the player is muted.
525
526.. describe:: muteIconOver
527
528   This element replaces the *muteIcon* element when the user hovers the mouse over it.
529
530.. describe:: bufferIcon
531
532   This element is displayed when the player is in a buffering state.  If *bufferIcon* is a static image, it will be rotated around its center.  If it is an animated SWF file, it will simply be placed in the center of the display. 
533
534
535The Dock
536--------
537
538Dock Icons elements sit at the top right corner of your player and can be both informative or functional.  For instance, if you've installed the HD plugin, once you've toggled High Definition Playback to ON, a small HD Dock Icon will appear in top corner of your player, letting you know you're watching in HD.
539
540.. image:: ../images/skinning/Dock.png
541   :alt: Dock Screenshot
542 
543Dock XML Syntax
544^^^^^^^^^^^^^^^
545
546.. code-block:: xml
547
548   <component name="dock">
549      <settings>
550         <setting name="fontcolor" value="0x000000" />
551      </settings>
552      <elements>
553         <element name="button" src="file.png" />
554         <element name="buttonOver" src="file.png" />
555      </elements>
556   </component>
557
558
559Dock Settings
560^^^^^^^^^^^^^
561
562The dock's *settings* block contains only one setting:
563
564.. describe:: fontcolor (0x000000)
565   
566   The color for the Dock buttons' text fields.
567
568Dock elements
569^^^^^^^^^^^^^
570
571The Dock only has two elements:
572
573.. describe:: button
574
575   The background image of a dock button when the mouse is not rolled over it.
576
577.. describe:: buttonOver
578
579   The background image of a dock button when the mouse is rolled over it. Is not required.
580
581
582
583The Playlist
584------------
585
586There are two main Playlist skin elements; Playlist Items, and the Playlist Slider.  Item graphics scale horizontally and are placed behind the description/thumbnail of videos in your playlist.  The slider is a vertical scrollbar rail and handle (thumb), with optional top and bottom endcaps.
587
588
589.. image:: ../images/skinning/Playlist.png
590   :alt: Playlist Screenshot
591
592
593Playlist XML Syntax
594^^^^^^^^^^^^^^^^^^^
595
596.. code-block:: xml
597
598   <component name="playlist">
599      <settings>
600         <setting name="fontcolor" value="0x999999" />
601         <setting name="overcolor" value="0xFFFFFF" />
602         <setting name="activecolor" value="0x990000" />
603         <setting name="backgroundcolor" value="0x000000"/>
604         <setting name="font" value="_sans" />
605         <setting name="fontsize" value="12" />
606         <setting name="fontweight" value="normal" />
607         <setting name="fontstyle" value="normal" />
608      </settings>
609   
610      <elements>
611         <element name="background" src="background.png" />
612         <element name="item" src="item.png" />
613         <element name="itemOver" src="itemOver.png" />
614         <element name="itemActive" src="itemActive.png" />
615         <element name="itemImage" src="itemImage.png" />
616         <element name="sliderRail" src="sliderRail.png" />
617         <element name="sliderThumb" src="sliderThumb.png" />
618         <element name="sliderCapTop" src="sliderCapTop.png" />
619         <element name="sliderCapBottom" src="sliderCapBottom.png" />
620      </elements>
621   </component>
622
623
624Playlist Settings
625^^^^^^^^^^^^^^^^^
626
627Here is a list of the settings that can be placed in the playlist's **<settings>** block, along with their default values:
628
629.. describe:: fontcolor (undefined)
630   
631   The color for the playlist's text fields.
632
633.. describe:: overcolor (undefined)
634   
635   The color for the playlist item's text fields when the mouse is hovering over an item.
636
637.. describe:: activecolor (undefined)
638   
639   The color for the playlist item's text fields when that item is the currently active item.
640
641.. describe:: backgroundcolor (undefined)
642   
643   The playlist's background color.
644
645.. describe:: font (_sans)
646   
647   Font used for the playlist's text fields (*_sans*, *_serif*, *_typewriter*)
648
649.. describe:: fontsize (undefined)
650   
651   Font size for the playlist's text fields.  By default, the playlist item's title has a fontsize of 13 pixels; the rest of the fields are 11 pixels.  If **fontsize** is set, all text fields will have the same font size.
652
653.. describe:: fontstyle (normal)
654   
655   Can be used to set the font style for the playlist's text fields (*normal*, *italic*)
656
657.. describe:: fontweight (normal)
658   
659   Can be used to set the font weight for the playlist's text fields (*normal*, *bold*)
660
661
662Playlist elements
663^^^^^^^^^^^^^^^^^
664
665The following Playlist elements are available:
666
667.. describe:: background
668
669   The *background* element serves as the default background of the playlist if there are fewer elements than the height of the playlist. It stretches in both the X and Y direction.
670
671.. describe:: item
672
673   Background graphic for each playlist item.  Stretch to the width of the playlist, minus the slider width (if necessary).
674
675.. describe:: itemOver
676
677   Over state for **item**.  Replaces **item** whenever the user mouses over.
678
679.. describe:: itemImage
680
681   Image placeholder.  This element is visible when the playlist item does not have an image associated with it.  If the playlist item image is present, **itemImage**'s shape serves as a mask around the playlist item image.  If the playlist item image has any transparency, **itemImage** will be visible behind it.
682   
683.. describe:: itemActive
684
685   Active state for **item**.  Replaces **item** whenever the corresponding playlist item is the currently playing/loaded playlist item.
686   
687.. describe:: sliderRail
688
689   Background of the vertical slider.  When the playlist's slider is visible, **sliderRail** is stretched to the height of the playlist, minus the height of any end caps.
690   
691.. describe:: sliderThumb
692
693   Draggable thumb for the vertical slider.  This element is stretched vertically, and is proportional to the visible area of the playlist versus its total size.  For example, if 50% of the playlist items are currently visible in the playlist, the thumb will be 50% of the height of the playlist.
694   
695.. describe:: sliderCapTop
696
697   Top end cap for the playlist slider.  Placed above **sliderRail**.
698
699.. describe:: sliderCapBottom
700
701   Bottom end cap for the playlist slider.  Placed below **sliderRail**.
702
703
704Plugins
705-------
706
707Some plugins allow their elements to be skinned as well.  If so, you can place those elements directly in your skin, the same way you skin built-in player components.  The *name* attribute must match the plugin's *id*.  All plugin elements must be placed in a folder whose name also matches the plugin's *id*.
708
709In the following example, the skin defines the HD plugin's two skinnable elements:
710
711.. code-block:: xml
712
713   <component name="hd">
714      <elements>
715         <element name="dockIcon" src="dockIcon.png" />
716         <element name="controlbarIcon" src="controlbarIcon.png" />
717      </elements>
718   </component>
719
720
721
722
723Packaging your Skin
724-------------------
725
726Packaging your skin is as easy as zipping the skin XML file along with the subfolders containing the component graphics.
727
728Zip File Structure
729^^^^^^^^^^^^^^^^^^
730
731The XML file should named the same as the skin itself.  For example, a skin called *myskin* would contain an XML file called *myskin.xml*, and would be zipped into *myskin.zip*.  All images belong in their corresponding folders and reside on the same level as the XML file.
732
733 * *skin_name*.xml
734 * controlbar (folder with images)
735 * display (folder with images)
736 * dock (folder with images)
737 * playlist (folder with images)
738
739Once you have zipped everything up, using a skin is a matter of:
740
741* Uploading the skin to your server
742* Setting the :ref:`skin option <options>` in your player's :ref:`embed code <embedding>` to the URL of the ZIP file.
743
744Example skins
745^^^^^^^^^^^^^
746
747A number of example skins can be freely downloaded from our `addons repository <http://www.longtailvideo.com/addons/>`_. Feel free to tweak any of these skins to make them fit your site design.
Note: See TracBrowser for help on using the repository browser.