Page Contents

    Styling Annotations

    In this topic you will learn how to set a custom style for annotations.

    Creating a custom annotation style

    The Brightcove Interactivity Style Builder can be used to easily create CSS that can be used to style annotations.

    Modifying the custom style with CSS

    You can further style your annotations (for example adding the same font or font style you use on your web site) by following these steps.

    1. Complete the Style Builder and click Publish.
    2. Click Exit to exit the Style Builder.
    3. Click Download to download your Custom CSS file.
    4. Edit the CSS file in your favorite text editor. (You can inspect element using Chrome to see which selectors and classes to modify. If you you'd like 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 this URL into the text box under (removing the protocol http: or https:), "Use your CSS file" . To replace the CSS file at the project level, follow these steps.
    8. Click UPDATE.

    Creating a custom annotation CSS from scratch

    You can also create a custom annotation CSS file from scratch. Download the code for HapYak's skeleton css, or code for HapYak's default css. Choose the file you need, then follow steps 4-8 above.

    Page last updated on 20 Sep 2022