Styling Annotations

In this topic you will learn how to use a custom CSS file to style annotations.

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.

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

Click DOWNLOAD to 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 USE STYLE BUILDER to open the Style Builder. For more information on the Style Builder, see Using the Style Builder.

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.

  1. Use the Style Builder to style annotations as desired. Make sure the styling changes are published.
  2. Close the Style Builder.
  3. Click DOWNLOAD to download the custom CSS file.
  4. 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.)
  5. Upload and host the file on your server and retrieve the URL.
  6. Click USE CSS FILE.
  7. Paste the URL to the hosted CSS file into the text box under. Remember to remove the protocol (http: or https:).
  8. Click UPDATE.

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.