support Contact Support | system status System Status
Page Contents

    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