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:
- Login to Brightcove Interactivity.
- In the primary navigation, click Style. The Group CSS page will display.
- Click .
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 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 . Click PUBLISH to apply all styling changes to existing projects.
