Theme Builder Playlist CSS Class Names

Theme Builder relies on Cascading Style Sheets (CSS) to stylize the player and playlists.

The stylistic portions of a Theme Builder embed that can be altered with CSS are the player and the playlists:

  • Players: Ooyala's HTML5 player has its own set of CSS class names that are documented CSS Class Names in Player V3. An example of working with the class names is Overriding Default Styles with CSS in Player V3.
  • Playlists: Class names that affect playlists' characteristics are listed below. Only some of the more important classes that control visual effects are listed.
    Note: Many of the styles are enforced via !important, so you might not be able to override some particular styles.
Theme Builder Playlist CSS Class Name Description
.oo-caption-description
  • .vs_showDescription_false (Default)
  • .vs_showDescription_true
.oo-menu-active Color of active menu
.oo-menu-current Color of currently selected menu item
.oo-menu-item Color of item in menu
.oo-menu-items Title of each playlist that can be optionally displayed
.oo-next Width, height, shape, and other characteristics of "next" arrow.
.oo-playlists-thumbnails Master or "wrapper" class for thumbnail-related styles. Best not to alter.
.oo-previous Width, height, shape, and other characteristics of "previous" arrow.

Default: {width:100%; height:32px; display:block; position:absolute; z-index:1; background-position: center center; background-repeat:no-repeat;}

.oo-thumbnail-caption Padding, font size, and other characteristics of text for caption
.oo-thumbnail-image Width and height for thumbnail image
.oo-thumbnail-paging- Master or "wrapper" class for thumbnail paging. Best not to alter.
.oo-thumbnails-scrolls Structural class governing scrolling. Best not to alter.

Was this article helpful?