Page Contents

    Simple Text Color Styling using CSS

    In this topic you will learn how to add CSS to a project to change the color of text annotations.

    A few lines of CSS can give your project a new look and feel. Follow these steps to change the color of text annotations in a project:

    1. Login to Brightcove Interactivity Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. Click Settings.
    5. In the Custom Annotation CSS (URL) field, add this style sheet. //hapyak_demos.s3.amazonaws.com/css/customer/sample_on_hover_text_change.css

      Or add this CSS to your current style sheet:

      .popcorn-pop.hapyak-theme-black.bright-red.active {
        color: #C60C46;
        background: rgba(255, 255, 255, 0);
        -webkit-transition: color 0.5s ease-in-out;
        -moz-transition: color 0.5s ease-in-out;
        -ms-transition: color 0.5s ease-in-out;
        -o-transition: color 0.5s ease-in-out;
        transition: color 0.5s ease-in-out;
      }
      
      .popcorn-pop.hapyak-theme-black.bright-red.active:hover {
        background: rgba(255, 255, 255, 0);
        color: #f40656;
      }
    6. Locate a text annotation and click Edit.
    7. Click More....
    8. Click Add Class.
    9. In the Classes textbox, add a color, ex: bright-red.
    10. Click SUBMIT.
    11. Click Done.

    Page last updated on 20 Sep 2022