support Contact Support | system status System Status

In-Page Experiences Custom CSS Reference

This topic outlines the CSS classes that are used when creating In-Page Experiences. This information is provided so you can further style your experiences using CSS.

Styled components

These CSS classes apply to items which are styled through the UI.  These styles can be overridden with custom CSS by using these classes.  You can also have the UI styles apply to custom HTML by using these classes.  These classes are stable and shouldn’t change between template versions.

 

Class Description
ee-components-style-global Global styling for the experience
ee-components-style-anchor Normal link styling
ee-components-style-navigation Navigation link styling (back button, share button, etc.)
ee-components-style-videoInfo Video information box styling (non-overlay)
ee-components-style-videoTitle Video title styling (non-overlay)
ee-components-style-videoDescription Video description styling (non-overlay)
ee-components-style-overlay Overlay video information box styling
ee-components-style-overlayTitle Overlay video title styling
ee-components-style-overlayDescription Overlay video description styling
ee-components-style-overlayBanner Overlay banner / indicator styling (watched indicator)
ee-components-style-playButton Play button basic styling (see the Play Button component for more intricate styling)

Base components

These are basic components which can be styled using custom CSS.  The component classes are stable and shouldn’t change between template versions.  The inner classes are relatively stable and most likely will not change between template versions.

Play Button

The play button appears on every video thumbnail.

 

Class Description
ee-components-play-button Play button component
ee-components-play-button-svg SVG container
ee-components-play-button-group SVG inner group
ee-components-play-button-button Play button SVG group
ee-components-play-button-frame Play button circle frame
ee-components-play-button-icon Play button icon
ee-components-play-button-countdown Countdown SVG group
ee-components-play-button-pause Countdown pause icon
ee-components-play-button-text Countdown text
ee-components-play-button-track Countdown track
ee-components-play-button-runner Countdown progress

 

Arrow

Arrows for the carousel template (for single and full-bleed presentation options).

 

Class Description
ee-components-arrow Arrow component (including background)
ee-components-arrow-inner Arrow

 

Up Next

The Up-next indicator is displayed on large thumbnails when Advance to next video automatically is enabled in the Player settings.

 

Class Description
ee-components-up-next Up Next component
ee-components-up-next-thumbnail Next video thumbnail
ee-components-up-next-text Up next text (countdown + video name)
ee-components-up-next-text-countdown Countdown text
ee-components-up-next-close Close button

 

Watched Video Indicator

The Watched Indicator is displayed when the option is enabled in the Video settings.

 

Class Description
ee-components-watched-video-banner Watched Video Indicator

 

Video components

Components related to individual videos. These classes are stable and should not change between template versions.

Player

Container for the Brightcove player.

 

Class Description
ee-components-player Player container

 

Thumbnail

Basic container for video poster images (does not include the play button).

 

Class Description
ee-components-thumbnail Thumbnail container

 

Video Info

 

Class Description
ee-components-video-info Video info container
ee-components-video-info-content Inner video info container
ee-components-video-info-name Video name container
ee-components-video-info-name-content Video name
ee-components-video-info-duration Video duration
ee-components-video-info-description Video description
ee-components-video-info-related-link Video related link
ee-components-video-info-download Video download link

 

Video Thumbnail

Contains a Thumbnail component wrapped with a Video Info component.

 

Class Description
ee-components-video-thumbnail Video thumbnail component

 

Video Collection components

Components related to collections of videos (playlists, etc.). These classes are stable and shouldn’t change between template versions.

Cover Flow

Three-dimensional cover-flow presentation of videos.

 

Class Description
ee-components-cover-flow Cover flow component
ee-components-cover-flow-item Cover flow item (video thumbnail)

 

Dot Strip

A strip of dots representing each video in the list

 

Class Description
ee-components-dot-strip Dot strip component
ee-components-dot-strip-item Dot strip item
ee-components-dot-strip-dot Individual dot in the strip

 

Poster Carousel

A carousel of poster images (with arrows)

 

Class Description
ee-components-poster-carousel Poster carousel component
ee-components-poster-carousel-container Row container
ee-components-poster-carousel-row Poster row
ee-components-poster-carousel-cell Row item (video thumbnail)

 

Thumbnail Strip

A strip of thumbnail images (with arrows)

 

Class Description
ee-components-thumbnail-strip Thumbnail strip component
ee-components-thumbnail-strip-container Row container
ee-components-thumbnail-strip-row Thumbnail row
ee-components-thumbnail-strip-cell Row item (video thumbnail)

 

Video Grid

A grid of thumbnail images

 

Class Description
ee-components-video-grid Video grid component
ee-components-video-grid-cell Grid item (video thumbnail)

 

Video List

A vertical list of thumbnail images

 

Class Description
ee-components-video-list Video list component
ee-components-video-list-item List item (video thumbnail)

 

Sharing components

Components related to social sharing.  The Share Button classes are relatively stable and most likely won’t change between template versions.  The Share Panel classes are most likely going to be changed in the near future and should be considered unstable.

Share Button

Share button or icons.

or

 

Class Description
ee-components-share-button Share button component
ee-components-share-button-button Share button (not icons)

 

Share Panel

Sharing panel when social sharing display is set to button.

 

Class Description
ee-components-share-wrapper-panel Panel wrapper component
ee-components-share-wrapper-inner Panel
ee-components-share-wrapper-close Close button
ee-components-share-wrapper-item Share item
ee-components-share-wrapper-item-name Share item name

 

Editable components

Components which can be added to the experience via the plus buttons in the UI.  These classes are stable and shouldn’t change between template versions.  Screenshots for these components are not provided as their appearance depends heavily on the content entered by the user.

Advertisement

Advertisement component

 

Class Description
ee-components-advertisement Advertisement component

 

Custom HTML

Custom HTML component

 

Class Description
ee-components-html Custom HTML component

 

Image

Image component

 

Class Description
ee-components-image Image component
ee-components-image-image Internal image

 

Text

Text component

 

Class Description
ee-components-text Text component

 

Twitter

Twitter component

 

Class Description
ee-components-twitter Twitter component

 

Global classes

These are classes which are global to the experience.  These classes are stable and shouldn’t change between template versions.

 

Class Description
ee-components-app Outermost experience element
ee-components-view Experience view (in-page, lightbox)
ee-components-container Plus-button component container

 


Page last updated on 21 Jun 2020