Custom Skins Component Reference

Applies to Roles
Publisher, Developer
Version
Brightcove 4
Modules
BEML
Edition
Pro, Enterprise

This topic provides detailed information on how you can use custom skins with BEML components. Depending on the overall theme of your player template, different elements of a component may be available to be skinned. For each of the BEML components below, a table presents the key names of each of the skinnable component elements available for player templates using the Deluxe, Flat, or Minimal themes, and an image shows which element of the component can be skinned, using the Deluxe theme as an example.

Read about how to create and apply custom skins to BEML components.

Read a detailed example of a player with custom skins.

The sizes listed for skinnable component elements are based on our standard player templates at their default sizes; many of these elements can be resized in the BEML, enabling even more customization of your players. You can download a .zip file that includes image (.png) and Photoshop template (.psd) files for skins for each of the player component elements that accept a skin.

VideoPlayer

This example uses a single Video Player template.

Skins for VideoPlayer component

Deluxe Flat Minimal
playerChrome-skin
video-skin
buttons-skin
menuButton-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin		 playerChrome-skin
video-skin
buttons-skin
menuButton-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin		 video-skin
menuButton-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin

 Notes

  • playerChrome-skin appears behind all other skins.
  • buttons-skin appears behind the button's icon and text and appears only if the button's showBack attribute is set to true.
  • menuButton-skin appears only if the Brightcove branding is turned off for the player.
  • playhead-skin is the skin of the scrub bar on the playhead. This will display over the playhead.
  • playheadWell-unloadedSkin is the skin of the portion of the playhead that has not been buffered on a progressive download video.
  • playheadWell-bufferedSkin is the skin of the portion of the playhead that has been buffered on a progressive download video or the skin of the whole unwatched portion of the playhead on a streaming video.
  • playheadWell-watchedSkin is the skin of the portion of the playhead that has been watched.

List

This example uses the Compact Tabbed Navigation template.

Deluxe Flat Minimal
buttons-skin
thumbnail-skin
thumbnail-overlaySkin
listItemBoxes-skin
list-skin
scrollbar-buttonSkin
scrollbar-backSkin
scrollbar-sliderSkin		 buttons-skin
thumbnail-skin
thumbnail-overlaySkin
listItemBoxes-skin
list-skin
scrollbar-buttonSkin
scrollbar-backSkin
scrollbar-sliderSkin		 thumbnail-skin
thumbnail-overlaySkin
scrollbar-backSkin
scrollbar-sliderSkin

 Notes

  • thumbnail-overlaySkin appears over all thumbnails in the list. Unless the skin has transparency, it will obscure the thumbnail behind it.
  • thumbnail-skin appears behind the item's thumbnail and therefore is visible only if the item in the list has no thumbnail assigned to it.
  • scrollbar-buttonSkin appears behind the scrollbar button's icon.

TileList

This example uses the Widescreen with Horizontal List template.

Deluxe Flat Minimal
buttons-skin
thumbnail-skin
thumbnail-overlaySkin
pagingButtons-skin
pagingButtons-backSkin
listItemBoxes-skin		 buttons-skin
thumbnail-skin
thumbnail-overlaySkin
pagingButtons-skin
pagingButtons-backSkin
listItemBoxes-skin		 thumbnail-skin
thumbnail-overlaySkin
pagingButtons-backSkin

 Notes

  • listItemBoxes-skin will not appear if the TileList's showBack attribute is set to false.
  • thumbnail-overlaySkin appears over all thumbnails in the list. Unless the skin has transparency, it will obscure the thumbnail behind it.
  • thumbnail-skin appears behind the item's thumbnail and therefore is visible only if the item in the list has no thumbnail assigned to it.
  • pagingButtons-backSkin appears only when the paging button is rolled over.

TabBar

This example uses the Compact Tabbed Navigation template.

Deluxe Flat Minimal
tabs-skin
dropDownMenu-backSkin
dropDownMenu-itemSkin
dropDownMenu-upButtonSkin
dropDownMenu-downButtonSkin		 tabs-skin
dropDownMenu-backSkin
dropDownMenu-itemSkin
dropDownMenu-upButtonSkin
dropDownMenu-downButtonSkin		 dropDownMenu-backSkin
dropDownMenu-itemSkin
dropDownMenu-upButtonSkin
dropDownMenu-downButtonSkin

Notes

  • tabs-skin appears behind the tab's text and icon.
  • dropDownMenu-upButtonSkin appears behind the up button's icon.
  • dropDownMenu-downButtonSkin appears behind the down button's icon.
  • dropDownMenu-backSkin appears behind all other skins

ComboBox

This example uses the Widescreen with Dropdown Navigation template.

Deluxe Flat Minimal
button-skin
button-iconSkin
item-skin
item-firstItemSkin
item-lastItemSkin
item-firstItemScrolledSkin
item-lastItemScrolledSkin
background-skin
background-upSkin
scrollbar-sliderSkin
scrollbar-backSkin
scrollbar-backUpSkin		 button-skin
button-iconSkin
item-skin
item-firstItemSkin
item-lastItemSkin
item-firstItemScrolledSkin
item-lastItemScrolledSkin
background-skin
background-upSkin
scrollbar-sliderSkin
scrollbar-backSkin		 button-skin
button-iconSkin
background-skin
scrollbar-sliderSkin

Notes

  • item-firstItemSkin is applied to the first item in the drop down when the list drops up.
  • item-lastItemSkin is applied to the last item in the drop down when the list drops down.
  • item-firstItemScrolledSkin is applied to the first item in the drop down when the list drops up and the scroller is visible.
  • item-lastItemScrolledSkin is applied to the last item in the drop down when the list drops down and the scroller is visible.
  • background-upSkin is applied to the background of the drop down when the list drops up.
  • scrollbar-backUpSkin is applied to the back of the scrollbar when the list drops up.

MediaControls

This example uses the single Video Player template.

Deluxe Flat Minimal
chrome-skin
buttons-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin
volumeControl-sliderBackSkin
volumeControl-buttonSkin
volumeControl-sliderSkin
volumeControl-trackEmptySkin
volumeControl-trackFilledSkin		 chrome-skin
buttons-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin
volumeControl-sliderBackSkin
volumeControl-buttonSkin
volumeControl-sliderSkin
volumeControl-trackEmptySkin
volumeControl-trackFilledSkin		 buttons-skin
playhead-skin
playheadWell-unloadedSkin
playheadWell-bufferedSkin
playheadWell-watchedSkin
volumeControl-sliderBackSkin
volumeControl-buttonSkin
volumeControl-sliderSkin
volumeControl-trackEmptySkin
volumeControl-trackFilledSkin

Notes

  • chrome-skin appears behind all other skins.
  • buttons-skin appears behind the button's icon and text and appears only if the button's showBack attribute is set to true.
  • playhead-skin is the skin of the scrub bar on the playhead. This will display over the playhead.
  • playheadWell-unloadedSkin is the skin of the portion of the playhead that has not been buffered on a progressive download video.
  • playheadWell-bufferedSkin is the skin of the portion of the playhead that has been buffered on a progressive download video or the skin of the whole unwatched portion of the playhead on a streaming video.
  • playheadWell-watchedSkin is the skin of the portion of the playhead that has been watched.
  • The volumeControl skins do not affect the videoPlayer or full-screen volume controls.
  • volumeControl-buttonSkin appears behind the button's icon.

TextRegion

Deluxe Flat Minimal
background-skin background-skin none

 

Tags
skins