Simple Text Color Styling using CSS

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.