Sticky Notes

Notes

Sticky notes, or often called post-it notes can be useful in workshops and as a versatile editing item. They support HTML and CSS formatting.

Notes

How to change the visual look of Notes

How to use UI icons in Notes and Dialogue

Adding Images to Notes

How to change the visual look of Notes

Click the settings icon for a note

Change innerHTML is the text that appears on the note and can include html tags eg. <img>

Change style using CSS rules, see below for some useful examples including changing the size

Example: notes with no background

Transparent background (great for notes with images)

backgroundcolor:transparent

Example: notes with black background

Black background with white text

background-color:#000000;color:white

Example: notes with semi-transparent grey with white text label size

background:rgba(1,1,1,0.5);height:70px;min-height:70px;color:white

Example: change size of a note

background-color:#ffff6d; font-size:20px; width:800px; height:50px;min-height:50px

How to use UI icons in Notes and Dialogue

Example: Laser Pointer

<i class="fa fa-bullseye fa-stack-1.5x fa-lg" aria-hidden="true"></i>

Example: Hotspot Marker

<i class="fa fa-map-marker fa-1_5x fa-lg fa-fw fa-stack-1.5x" style="color:007bff;"></i>

A full list of available icons can be found here on the FontAwesome website. You can also get creative with rotating and stacking icons (see https://fontawesome.com/v4.7.0/examples/ )

Adding Images to Notes

The HTML <img> tag is supported. There are two things you need to add to image tags so they appear in the 3d scene and the popup correctly.

Eg. Change your original image tag

<img height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png">

To include the following two changes, add crossorigin="anonymous" and prepend your url with https://hurl.learnbrite.com/pr/ which will help avoid CORS loading errors.

<img crossorigin="anonymous" height="40" width="139" src="https://hurl.learnbrite.com/pr/https://platform.slack-edge.com/img/add_to_slack.png">

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?