In your editor, you have access to some CSS classes that are built in to the HapYak Platform. The intention of these classes is to help solve issues commonly faced while authoring content. This Article will cover how to apply classes, followed by a breakdown of each class, what it does, and which annotations it is compatible with.   

In addition to the classes described below, there are a number of others available to you that add simple animated transitions to your annotations. To read an article about the animation CSS classes, click here.
​
HOW TO APPLY CLASSES: 

To Apply a custom class to an annotation, click into the edit  tab, and then into add-class . Once you do this, you will see this screen:
​

Add class names to the field exactly as they appear in the list below. Multiple classes can be applied to a single annotation, but must be separated by a space, and should not be preceded by a period.
​

Description:
This class will modify the selected annotation to snap to fit the entire frame of your video. 

Compatible Annotations types:
          Transparent Overlay
          Image Overlay
          Chapter Menu
          Quiz

Description:
​This class will make the selected annotation appear at the "Top" layer on top of your interactive experience. This is useful if you want to make sure an element always appears to be "in front" or "on top" of another element. ie

​Compatible Annotations types:
          Text Overlay
          Transparent Overlay
          Image Overlay
          Quiz
          User Sentiment Widget
          Custom Form Widget
          Drawing Tool
​

Description: This class is the anti-venom to bring-to-top. It will send your annotation to the back-most layer of your interactive experience. This is useful if you want to make sure a particular element always appears to be "behind" another element. 

Compatible Annotations types:
          Text Overlay
          Transparent Overlay
          Image Overlay
          Quiz
          User Sentiment Widget
          User Sign-in Widget
          Poll Widget
          Custom Form Widget
          Drawing Tool

Note: The Chapter Menu annotation will Always appear as the top most layer of any video UNLESS other annotations have the "hapyak-annotation-bring-to-top" class applied. 

Description: This Class will add a shimmer-effect to the selected annotation. The Shimmer will sweep across the frame of the annotation on mouse-hover. 

Compatible Annotations types:
          Transparent Overlay
          User Sentiment Widget
​          

Note: Shine will not work as expected with a transparent overlay in full-frame mode. 

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.