Simple Text Color Styling using CSS

A few lines of CSS can give your project a new look and feel. Start by updating the Hapyak-enabled Brightcove Player to point to a CSS file:

1. Login to Video Cloud Studio.
2. Open the Players module.
3. Locate the HapYak-enabled Brightcove Player and click on it to open the player properties.
4. Click Plugins in the left navigation.
5. Click the hapyak plugin to edit the plugin properties.
6. Edit the Options(JSON) to point to the following CSS file.

   //hapyak_demos.s3.amazonaws.com/css/customer/sample_on_hover_text_change.css

   

7. Save the changes and publish the changes to the player.

Another option is to 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;
}

Follow these steps to change the color of text annotations in a project:

1. Login to Brightcove Interactivity Studio (https://www.hapyak.com/login).
2. In the left navigation, click Manage.
3. Click on a project to open it.
4. Locate a text annotation and click Edit.
5. Click More....
6. Click Add Class.
7. In the Classes textbox, add a color, ex: bright-red.

   

8. Click SUBMIT.
9. Click Done.