All Collections
Styling Annotations
Styling Annotations

How to set a custom style for annotations that meets your brand. Setting colors, fonts, opacity and more.

Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

Creating a Custom Annotation Style

HapYak has 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 adding 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"

8.  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. Download the code for HapYak's skeleton css, or code for HapYak's default css. Choose the file you need, then follow steps 4-7 above.

Still have a question?  Drop us an email at

Did this answer your question?