We've designed Prizma to look great the moment you embed it on your website, with styles that engage viewers at a high rate. However, we know keeping different parts of your site on-brand can be important, so we make it easy to apply exactly the styling you want to your pages. 

Check out this page for best practices on embedding and customizing Prizma!

Remember to add cssFiles: ['http://example.com/style.css'] to your widget's parameters once your CSS is ready!

General Guidelines for Adding CSS to the Prizma Widget

  • The Prizma logo must remain 100% visible and unchanged. You may not change the opacity, colors, or size of the logo, and it may not be obscured by any other elements on the page.
  • Style only existing classes, not IDs. While IDs are used in some places in the widget, these may be generated on a one-off basis or may change in the future, and should not be used in CSS selectors. (The one exception to this would be the container ID, if provided in the id parameter when instantiating the widget.)

  • Use em units to modify font sizes. The font-size property on elements in the Prizma widget is set using em units to ensure titles are sized responsively. You may use static px units, but you will need to include extra selectors to account for size support.

Common modifications and their classes

Video section (background color) .prizma-unit-videos

.prizma-unit-videos is the container for the thumbnails. With this class you can add padding, or, for instance, add a border or background color.

Widget title .prizma-unit-header

.prizma-unit-header controls the appearance of the widget's headerText parameter. You can change the font, font-weight, background, etc.

Video thumbnail titles .prizma-unit-title

.prizma-unit-title controls the appearance of the title on each of the widget thumbnails.

Play button .prizma-unit-play-button, .prizma-unit-play-button svg

.prizma-unit-play-button controls the circle around the play button (use background-color to change its color). Adding svg to your selector will target the triangular play button (use fill to change its color).

Styling Mosaic

style mosaic layout only .prizma-unit-mosaic

.prizma-unit-mosaic is the container for the default Mosaic layout. If you only want styling to apply to Mosaic, use this as the parent class in your CSS selector.

style Mosaic based on size .prizma-unit-size-big, .prizma-unit-size-medium, .prizma-unit-size-small

  • .prizma-unit-size-big is applied to the <body> element of Mosaic when it is displaying at a width of 600px or more.

  • .prizma-unit-size-medium is applied to the <body> element of Mosaic when it is displaying at a width of between 377px and 599px, inclusive.

  • .prizma-unit-size-small is applied to the <body> element of Mosaic when it is displaying at a width of 376px or less.

Styling Filmstrip

style Filmstrip layout only .prizma-unit-filmstrip

.prizma-unit-filmstrip is the container for Filmstrip. If you only want styling to apply to Filmstrip, use this as the parent class in your CSS selector. (Per the integration documentation, you can turn on Filmstrip by passing layout: "FILMSTRIP" as a parameter.)

style Filmstrip on number of videos .prizma-unit-visible-videos-X

.prizma-unit-visible-videos-X is the class that wraps the videos on the Filmstrip layout, where X is the number of videos currently showing, between 1 and 6. Note that CSS should never be used to change the number of videos displayed. Set the maxVideos parameter instead.