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.
How to change the visual look of Notes
How to use UI icons in Notes and Dialogue
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)
background–color: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"> |