Brightcove Interactivity uses a group CSS file to control styling of annotations. The Group CSS is accessible from all projects, templates, and experiences and controls the styling for all annotations.
Follow these steps to access the group CSS file.
- Login to Brightcove Interactivity.
- In the primary navigation, click Style. The Group CSS page will display.
Clickto open the current group CSS in a new browser tab.
Creating custom annotation styles
The Style Builder provides an easy to use interface for styling annotations. Click Using the Style Builder.to open the Style Builder. For more information on the Style Builder, see
Modifying the custom style
You can further style annotations (for example adding the same font or font style you use on your web site) by following these steps.
- Use the Style Builder to style annotations as desired. Make sure the styling changes are published.
- Close the Style Builder.
- Click to download the custom CSS file.
- Edit the CSS file using a text editor. (You can inspect elements using tools provided by your web browser to see which selectors and classes to modify. For a simple guide on all the selectors and classes, click here.)
- Upload and host the file on your server and retrieve the URL.
- Click .
- Paste the URL to the hosted CSS file into the text box under. Remember to remove the protocol (http: or https:).
- Click .
Creating a custom annotation CSS file from scratch
You can also create a custom annotation CSS file from scratch. Download the code for the Brightcove Interactivity skeleton css and edit as needed. The skeleton css file can also be used to "reset" the current styles back to a "default" state.