Changeset 1104 for trunk/fl5/doc/publishers/skinning.rst
- Timestamp:
- 06/07/10 06:36:10 (3 years ago)
- File:
-
- 1 edited
-
trunk/fl5/doc/publishers/skinning.rst (modified) (27 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/fl5/doc/publishers/skinning.rst
r1082 r1104 1 1 .. _skinning: 2 2 3 --------------------------------- 4 XML-Image Skinning in JW Player 5 5 --------------------------------- 6 7 ======== 8 Overview 9 ======== 3 PNG Skinning 4 ============ 10 5 11 6 With 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 Flash. 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. 12 7 13 =============================== 14 Supported Graphics File Formats 15 =============================== 16 17 Bitmap File Formats 18 ------------------- 8 9 Supported Graphics Formats 10 -------------------------- 19 11 20 12 JW Player 5 will accept most commonly used bitmap image formats including: 13 21 14 * JPG 22 15 * GIF (*Allows Transparency*) … … 24 17 * PNG (24-Bit) (*Allows Transparency and Partial Transparency*) 25 18 26 *Examples in this guide will use the PNG file format* 27 19 Examples 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 21 JW 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 28 23 .. note:: Animated gif files are not supported. 29 24 30 Other Formats 31 ------------- 32 33 JW Player 5.2 and up supports 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. 34 35 ============= 36 Configuration 37 ============= 25 26 38 27 39 28 The XML Document … … 41 30 42 31 The 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. 43 44 Anatomy of the JW Player Skin45 -----------------------------46 32 47 33 A player skin consists of its own settings and its components. Here is an example of an XML document before the elements have been defined: 48 34 49 Basic XML Structure of a Skin50 ............................. 51 52 .. code-block:: xml 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 Beginning Your XML Skin Document97 ................................ 35 Basic XML Structure 36 ^^^^^^^^^^^^^^^^^^^ 37 38 .. code-block:: xml 39 40 <?xml version="1.0"?> 41 <skin version="1.0" 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 82 Beginning Your XML Skin 83 ^^^^^^^^^^^^^^^^^^^^^^^ 98 84 99 85 The 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*. … … 101 87 .. code-block:: xml 102 88 103 104 105 89 <?xml version="1.0"?> 90 <skin version="1.0" name="SkinName" author="http://www.yoursite.com/"> 91 106 92 You 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. 107 93 108 XML andLinking to Images109 ......................... 94 Linking to Images 95 ^^^^^^^^^^^^^^^^^ 110 96 111 97 Images 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. 112 98 113 ========== 114 Components 115 ========== 99 Component sections 100 ^^^^^^^^^^^^^^^^^^ 116 101 117 102 The 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: … … 125 110 126 111 .. image:: ../images/skinning/Components.png 127 :alt: Components layout 128 112 :alt: Components layout 113 114 115 116 129 117 The Controlbar 130 118 -------------- … … 132 120 The 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. 133 121 134 ControlbarXML Syntax135 ..................... 136 137 .. code-block:: xml 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 <element name="playButtonOver" src="file.png" /> 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 ControlbarSettings198 ................... 122 XML Syntax 123 ^^^^^^^^^^ 124 125 .. code-block:: xml 126 127 <component name="controlbar"> 128 <settings> 129 <setting name="backgroundcolor" value="0x000000"/> 130 <setting name="margin" value="10" /> 131 <setting name="font" value="_sans" /> 132 <setting name="fontsize" value="10" /> 133 <setting name="fontcolor" value="0x000000" /> 134 <setting name="fontstyle" value="normal" /> 135 <setting name="fontweight" value="normal" /> 136 <setting name="buttoncolor" value="0xFFFFFF" /> 137 </settings> 138 <layout> 139 ... 140 </layout> 141 <elements> 142 <element name="background" src="file.png" /> 143 <element name="capLeft" src="file.png" /> 144 <element name="capRight" src="file.png" /> 145 <element name="divider" src="file.png" /> 146 147 <element name="playButton" src="file.png" /> 148 <element name="playButtonOver" src="file.png" /> 149 <element name="pauseButton" src="file.png" /> 150 <element name="pauseButtonOver" src="file.png" /> 151 152 <element name="prevButton" src="file.png" /> 153 <element name="prevButtonOver" src="file.png" /> 154 <element name="nextButton" src="file.png" /> 155 <element name="nextButtonOver" src="file.png" /> 156 157 <element name="stopButton" src="file.png" /> 158 <element name="stopButtonOver" src="file.png" /> 159 160 <element name="timeSliderRail" src="file.png" /> 161 <element name="timeSliderBuffer" src="file.png" /> 162 <element name="timeSliderProgress" src="file.png" /> 163 <element name="timeSliderThumb" src="file.png" /> 164 165 <element name="fullscreenButton" src="file.png" /> 166 <element name="fullscreenButtonOver" src="file.png" /> 167 <element name="normalscreenButton" src="file.png" /> 168 <element name="normalscreenButtonOver" src="file.png" /> 169 170 <element name="muteButton" src="file.png" /> 171 <element name="muteButtonOver" src="file.png" /> 172 <element name="unmuteButton" src="file.png" /> 173 <element name="unmuteButtonOver" src="file.png" /> 174 175 <element name="volumeSliderRail" src="file.png" /> 176 <element name="volumeSliderBuffer" src="file.png" /> 177 <element name="volumeSliderProgress" src="file.png" /> 178 179 <element name="blankButton" src="file.png" /> 180 <element name="blankButtonOver" src="file.png" /> 181 </elements> 182 </component> 183 184 185 Settings 186 ^^^^^^^^ 199 187 200 188 In the example above, you will notice the bit of code containing the settings element for the ControlBar component. It looks like this: … … 203 191 .. code-block:: xml 204 192 205 206 207 208 209 210 211 212 213 214 193 <settings> 194 <setting name="backgroundcolor" value="0x000000"/> 195 <setting name="margin" value="10" /> 196 <setting name="font" value="_sans" /> 197 <setting name="fontsize" value="10" /> 198 <setting name="fontcolor" value="0x000000" /> 199 <setting name="fontstyle" value="normal" /> 200 <setting name="fontweight" value="normal" /> 201 <setting name="buttoncolor" value="0xFFFFFF" /> 202 </settings> 215 203 216 204 Here is a list of the Controlbar settings, along with their default values: … … 251 239 252 240 253 The Background Element 254 ...................... 241 Background 242 ^^^^^^^^^^ 255 243 256 244 **background** is a graphic which stretches horizontally to fit the width of the Controlbar. **capLeft** and **capRight** are placed to the left and right of the background. … … 258 246 259 247 Caps and Dividers 260 ................. 248 ^^^^^^^^^^^^^^^^^ 261 249 262 250 The 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. … … 264 252 .. describe:: capLeft 265 253 266 254 The left cap graphic to your controlbar skin 267 255 268 256 .. describe:: capRight 269 257 270 271 258 The right cap graphic to your controlbar skin 259 272 260 .. describe:: divider 273 261 274 262 A separator element between buttons and sliders. *(this same element can appear multiple times)* 275 263 276 264 .. 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. 277 265 278 266 Buttons 279 ....... 267 ^^^^^^^ 280 268 281 269 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. … … 295 283 296 284 Toggle Buttons 297 ++++++++++++++ 285 ^^^^^^^^^^^^^^ 298 286 299 287 Certain 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. … … 306 294 307 295 The TimeSlider 308 .............. 296 ^^^^^^^^^^^^^^ 309 297 310 298 The **timeSlider** element is a unique element which is really 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: … … 312 300 .. describe:: timeSliderRail 313 301 314 302 the *background* graphic which serves as the frame for the timeSlider 315 303 316 304 .. describe:: timeSliderBuffer 317 305 318 306 the file's buffer indicator 319 307 320 308 .. describe:: timeSliderProgress 321 309 322 310 the file's progress indicator 323 311 324 312 Additional **timeSlider** elements: … … 326 314 .. describe:: timeSliderThumb 327 315 328 329 316 serves as a handle which can be dragged across the progress bar to allow the user to specify a seek position. 317 330 318 .. describe:: timeSliderCapLeft 331 319 332 320 Left-hand end-cap, placed to the left of the **timeSliderRail** element. 333 321 334 322 .. describe:: timeSliderCapRight 335 323 336 324 Right-hand end-cap, placed to the right of the **timeSliderRail** element. 337 325 338 326 .. image:: ../images/skinning/timeSlider.png 339 327 :alt: TimeSlider Screenshot 340 328 341 329 … … 344 332 345 333 The VolumeSlider 346 ................ 334 ^^^^^^^^^^^^^^^^ 347 335 348 336 The **volumeSlider** element is quite similar to the **timeSlider**, except that it does not scale automatically. It will be as large as graphics you produce. … … 350 338 .. describe:: volumeSliderRail 351 339 352 340 the **background** graphic which serves as the frame for the volumeSlider 353 341 354 342 .. describe:: volumeSliderBuffer 355 343 356 344 this shows the potential volume the slider can have. 357 345 358 346 .. describe:: volumeSliderProgress 359 347 360 348 this is shows the current level at which the volumeSlider is set. 361 349 362 350 .. describe:: volumeSliderThumb 363 351 364 352 the handle to slide the volume, also indicates the volume level. 365 353 366 354 .. describe:: volumeSliderCapLeft 367 355 368 356 Left-hand end-cap, placed to the left of the **volumeSliderRail** element. 369 357 370 358 .. describe:: volumeSliderCapRight 371 359 372 373 374 375 360 Right-hand end-cap, placed to the right of the **volumeSliderRail** element. 361 362 363 the handle to slide the volume, also indicates the volume level. 376 364 377 365 .. image:: ../images/skinning/volumeSlider.png 378 366 :alt: VolumeSlider Screenshot 379 367 380 368 … … 383 371 384 372 BlankButton 385 ........... 373 ^^^^^^^^^^^ 386 374 387 375 The **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. 388 376 389 377 Text Fields 390 ........... 378 ^^^^^^^^^^^ 391 379 392 380 Two text fields can be laid out in the controlbar: … … 394 382 .. describe:: elapsed 395 383 396 397 384 Amount of time elapsed since the start of the video (format: mm:ss) 385 398 386 .. describe:: duration 399 387 400 Duration of the currently playing video (format: mm:ss) 388 Duration of the currently playing video (format: mm:ss) 389 390 401 391 402 392 403 393 Controlbar Layout 404 ................. 394 ----------------- 405 395 406 396 The controlbar's components (*buttons*, *text fields*, *sliders* and *dividers*) are laid out according to a block of XML code in the Controlbar section. 407 397 408 398 Layout XML Syntax 409 +++++++++++++++++ 399 ^^^^^^^^^^^^^^^^^ 410 400 411 401 Inside the controlbar's **<component>** block, you can insert an optional **<layout>** block which allows you to override the default controlbar layout. 412 402 413 403 .. code-block:: xml 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 <slider name="time" /> 430 431 432 433 434 435 436 437 438 439 440 441 404 405 <layout> 406 <group position="left"> 407 <button name="play" /> 408 <divider /> 409 <button name="prev" /> 410 <divider /> 411 <button name="next" /> 412 <divider /> 413 <button name="stop" /> 414 <divider /> 415 <text name="duration" /> 416 <divider /> 417 </group> 418 <group position="center"> 419 <slider name="time" /> 420 </group> 421 <group position="right"> 422 <text name="elapsed" /> 423 <divider /> 424 <button name="blank" /> 425 <divider /> 426 <button name="mute" /> 427 <slider name="volume" /> 428 <divider /> 429 <button name="fullscreen" /> 430 </group> 431 </layout> 442 432 443 433 Layout Groups 444 +++++++++++++ 434 ^^^^^^^^^^^^^ 445 435 446 436 The Controlbar's layout is made up of three groupings, *left*, *right* and *center*. 447 437 448 * Left: 449 450 Elements placed in the **<group position="left">** tag will be placed left to right and be left-aligned. 451 452 * Center: 453 454 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. 455 456 * Right: 457 458 Elements placed in the **<group position="right">** tag will be placed left to right and be right-aligned. 438 * **Left**:Elements placed in the **<group position="left">** tag will be placed left to right and be left-aligned. 439 * **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. 440 * **Right**: Elements placed in the **<group position="right">** tag will be placed left to right and be right-aligned. 459 441 460 442 Layout Elements 461 +++++++++++++++ 443 ^^^^^^^^^^^^^^^ 462 444 463 445 The **<group>** tag can contain the following elements: … … 465 447 .. describe:: <button name="..." /> 466 448 467 449 Used to place the Controlbar button elements described above. For example, the **play** button would appear as **<button name="play" />** 468 450 469 451 .. describe:: <text name="..." /> 470 452 471 453 Used to place the Controlbar text elements, **elapsed** and **duration**. 472 454 473 455 .. describe:: <slider name="..." /> 474 456 475 457 Used to place the Controlbar slider elements, **timeSlider** and **volumeSlider**. 476 458 477 459 .. describe:: <divider /> 478 460 479 480 461 Used to place the **divider** element. This tag can define two optional attributes (only one attribute may be used at a time): 462 481 463 * *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: 482 464 483 465 .. code-block:: xml 484 466 485 467 <divider element="alternate_divider" /> 486 468 * *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: 487 488 .. code-block:: xml 489 490 469 470 .. code-block:: xml 471 472 <divider width="10" /> 491 473 492 474 493 475 Controlbar Composition 494 ++++++++++++++++++++++ 476 ^^^^^^^^^^^^^^^^^^^^^^ 495 477 496 478 .. image:: ../images/skinning/controlBar.png 497 479 :alt: Controlbar Screenshot 498 480 499 481 … … 524 506 * volumeSliderCapRight 525 507 * capRight 526 527 528 529 Display Icons 530 ----------- --531 532 Display Icons are 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.508 509 510 511 The Display 512 ----------- 513 514 The 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. 533 515 534 516 .. image:: ../images/skinning/Display.png 535 517 :alt: Display Screenshot 536 518 537 519 .. note:: By default, the **bufferIcon** will rotate clockwise while buffering. 538 520 539 521 Display XML Syntax 540 .................. 541 542 .. code-block:: xml 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 522 ^^^^^^^^^^^^^^^^^^ 523 524 .. code-block:: xml 525 526 <component name="display"> 527 <settings> 528 <settings> 529 <setting name="backgroundcolor" value="0x000000" /> 530 <setting name="bufferrotation" value="15" /> 531 <setting name="bufferinterval" value="100" /> 532 </settings> 533 </settings> 534 <elements> 535 <element name="background" src="file.png" /> 536 <element name="playIcon" src="file.png" /> 537 <element name="muteIcon" src="file.png" /> 538 <element name="bufferIcon" src="file.png" /> 539 </elements> 540 </component> 559 541 560 542 Display Settings 561 ................ 543 ^^^^^^^^^^^^^^^^ 562 544 563 545 Here is a list of Display settings, along with their default values: … … 577 559 578 560 579 Dock Icons 580 -------- --561 The Dock 562 -------- 581 563 582 564 Dock 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. The Dock Icon only has one element: … … 586 568 587 569 .. image:: ../images/skinning/Dock.png 588 570 :alt: Dock Screenshot 589 571 590 572 591 573 Dock XML Syntax 592 ............... 593 594 .. code-block:: xml 595 596 597 598 599 600 601 602 603 604 574 ^^^^^^^^^^^^^^^ 575 576 .. code-block:: xml 577 578 <component name="dock"> 579 <settings> 580 <setting name="fontcolor" value="0x000000" /> 581 </settings> 582 <elements> 583 <element name="button" src="file.png" /> 584 <element name="buttonOver" src="file.png" /> 585 </elements> 586 </component> 605 587 606 588 607 589 Dock Settings 608 ............. 590 ^^^^^^^^^^^^^ 609 591 610 592 Here is a list of the settings that can be placed in the dock's **<settings>** block, along with their default values: … … 615 597 616 598 617 Playlist618 -------- 599 The Playlist 600 ------------ 619 601 620 602 There 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. The *background* element serves as the default background of the playlist if there are fewer elements than the height of the playlist. … … 622 604 623 605 .. image:: ../images/skinning/Playlist.png 624 606 :alt: Playlist Screenshot 625 607 626 608 The following Playlist elements are available: … … 628 610 .. describe:: background 629 611 630 631 612 Stretched behind the playlist items 613 632 614 .. describe:: item 633 615 634 616 Background graphic for each playlist item. Stretch to the width of the playlist, minus the slider width (if necessary). 635 617 636 618 .. describe:: itemOver 637 619 638 620 Over state for **item**. Replaces **item** whenever the user mouses over. 639 621 640 622 .. describe:: itemImage 641 623 642 643 624 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. 625 644 626 .. describe:: itemActive 645 627 646 647 628 Active state for **item**. Replaces **item** whenever the corresponding playlist item is the currently playing/loaded playlist item. 629 648 630 .. describe:: sliderRail 649 631 650 651 632 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. 633 652 634 .. describe:: sliderThumb 653 635 654 655 636 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. 637 656 638 .. describe:: sliderCapTop 657 639 658 640 Top end cap for the playlist slider. Placed above **sliderRail**. 659 641 660 642 .. describe:: sliderCapBottom 661 643 662 Bottom end cap for the playlist slider. Placed below **sliderRail**. 663 644 Bottom end cap for the playlist slider. Placed below **sliderRail**. 664 645 665 646 Playlist XML Syntax 666 ................... 667 668 669 .. code-block:: xml 670 671 <component name="playlist"> 672 <settings> 673 <setting name="fontcolor" value="0x999999" /> 674 <setting name="overcolor" value="0xFFFFFF" /> 675 <setting name="activecolor" value="0x990000" /> 676 <setting name="backgroundcolor" value="0x000000"/> 677 <setting name="font" value="_sans" /> 678 <setting name="fontsize" value="12" /> 679 <setting name="fontweight" value="normal" /> 680 <setting name="fontstyle" value="normal" /> 681 </settings> 682 <elements> 683 <element name="background" src="background.png" /> 684 <element name="item" src="item.png" /> 685 <element name="itemOver" src="itemOver.png" /> 686 <element name="itemActive" src="itemActive.png" /> 687 <element name="itemImage" src="itemImage.png" /> 688 <element name="sliderRail" src="sliderRail.png" /> 689 <element name="sliderThumb" src="sliderThumb.png" /> 690 <element name="sliderCapTop" src="sliderCapTop.png" /> 691 <element name="sliderCapBottom" src="sliderCapBottom.png" /> 692 </elements> 693 </component> 647 ^^^^^^^^^^^^^^^^^^^ 648 649 .. code-block:: xml 650 651 <component name="playlist"> 652 <settings> 653 <setting name="fontcolor" value="0x999999" /> 654 <setting name="overcolor" value="0xFFFFFF" /> 655 <setting name="activecolor" value="0x990000" /> 656 <setting name="backgroundcolor" value="0x000000"/> 657 <setting name="font" value="_sans" /> 658 <setting name="fontsize" value="12" /> 659 <setting name="fontweight" value="normal" /> 660 <setting name="fontstyle" value="normal" /> 661 </settings> 662 <elements> 663 <element name="background" src="background.png" /> 664 <element name="item" src="item.png" /> 665 <element name="itemOver" src="itemOver.png" /> 666 <element name="itemActive" src="itemActive.png" /> 667 <element name="itemImage" src="itemImage.png" /> 668 <element name="sliderRail" src="sliderRail.png" /> 669 <element name="sliderThumb" src="sliderThumb.png" /> 670 <element name="sliderCapTop" src="sliderCapTop.png" /> 671 <element name="sliderCapBottom" src="sliderCapBottom.png" /> 672 </elements> 673 </component> 694 674 695 675 Playlist Settings 696 ................. 676 ^^^^^^^^^^^^^^^^^ 697 677 698 678 Here is a list of the settings that can be placed in the dock's **<settings>** block, along with their default values: … … 740 720 .. code-block:: xml 741 721 742 743 744 745 746 747 748 749 750 751 =================== 722 <component name="hd"> 723 <elements> 724 <element name="dockIcon" src="dockIcon.png" /> 725 <element name="controlbarIcon" src="controlbarIcon.png" /> 726 </elements> 727 </component> 728 729 730 731 752 732 Packaging your Skin 753 =================== 733 ------------------- 754 734 755 735 Packaging your skin is as easy as zipping the skin XML file along with the subfolders containing the component graphics. 756 736 757 737 Zip File Structure 758 ------------------ 738 ^^^^^^^^^^^^^^^^^^ 759 739 760 740 The 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. … … 766 746 * playlist (folder with images) 767 747 768 Once you have zipped everything up, see :ref:`usingskins` for instructions on embedding your skin into the JW Player. 769 770 771 ============= 772 Example Skins 773 ============= 774 775 `Download Example Skin: Beelden <http://developer.longtailvideo.com/trac/changeset/643/skins/beelden?old_path=%2F&format=zip>`_ - Example Skin Source (Files, XML, Photoshop Originals) 748 Once you have zipped everything up, using a skin is a matter of: 749 750 * Uploading the skin to your server 751 * Setting the :ref:`skin option <options>` in your player's :ref:`embed code <embedding>` to the URL of the ZIP file. 752 753 Example skins 754 ^^^^^^^^^^^^^ 755 756 A 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 TracChangeset
for help on using the changeset viewer.
