Creating a Custom Annotation Style

We have made styling annotations easier than ever, with the rollout of our new Style Builder.

Modifying the Custom Style with CSS:

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

  1.  Complete the style builder and click Publish

Note:  Once you confirm and publish your new styles, these styles will be active across all projects.

2.  Click the exit button to the Style Builder menu.

3.  Download your Custom CSS file by clicking the download icon on the right side of the screen.

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.  Paste this url into the text box under (removing the protocol http: or https:), "Use your CSS file" or follow along with this article to replace the css at the project level.

7.  Click, "Replace"

7.  Congratulations!  You have now customized and edited your styles.

Creating a Custom Annotation CSS from Scratch

You can simply create a custom annotation CSS from scratch. Here is the code for HapYak's skeleton css. Download the file, then follow steps 4-7 above.

Still have a question?  Drop us an email at support@hapyak.com.

Did this answer your question?