Page Contents

    Using the Style Builder

    In this topic you will learn how to use the Style Builder.

    The Style Builder provides an easy to use interface that can be used to style annotations:

    • Chapter menus
    • Overlays
    • Hotspots
    • Quizzes

    After the styling is complete, the changes can be published so that the styling is applied to all annotations in the account.

    To access the Style Builder, follow these steps:

    1. Login to Brightcove Interactivity.
    2. In the primary navigation, click Style. The Group CSS page will display.
    3. Click USE STYLE BUILDER.

    By default, when the style editor opens, the chapter menu styling options are displayed. Click an icon below the preview player to access the styling options for the other annotation types.

    After styling changes for an annotation are complete, click SAVE / NEXT to save the changes and move on to styling the next annotation. Click RESET to revert the changes.

    Styling chapter menus

    To style chapter menus, click the CHAPTER MENU icon below the preview player. The following styling options are available:

    • Background and font colors for the chapter menu
    • Initial Menu State - Controls if the chapter menu displayed expanded or collapsed
    • Chapter Menu - Controls the layout of the chapter menu
      • Column - Chapter menu will appear as a column on left side of player
      • Full Screen - Chapter menu will open in center of player

    As styling changes are made, they will be reflected in the Live Preview player on the page.

    Styling overlays

    To style overlays, click the OVERLAY icon below the Live Preview player. The following styling options are available:

    • Background and font colors for overlays

    Styling hotspots

    To style hotspots, click the HotSpot icon below the Live Preview player. The following styling options are available:

    • Opacity and background color for hotspots

    Styling quizzes

    To style quizzes, click the QUIZ icon below the Live Preview player. The following styling options are available:

    • Background, font and button colors for quizzes

    Publishing changes

    When all styling changes are complete, click Preview & Publish. Click PUBLISH to apply all styling changes to existing projects.


    Page last updated on 04 Nov 2022