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
idparameter 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 is the container for the thumbnails. With this class you can add padding, or, for instance, add a border or background color.
.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 controls the appearance of the title on each of the widget thumbnails.
.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).
style mosaic layout only
.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-bigis applied to the
<body>element of Mosaic when it is displaying at a width of 600px or more.
.prizma-unit-size-mediumis applied to the
<body>element of Mosaic when it is displaying at a width of between 377px and 599px, inclusive.
.prizma-unit-size-smallis applied to the
<body>element of Mosaic when it is displaying at a width of 376px or less.
style Filmstrip layout only
.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 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.