{"id":3701,"date":"2021-06-23T10:35:17","date_gmt":"2021-06-23T10:35:17","guid":{"rendered":"https:\/\/learnbrite.com\/academy\/sticky-notes\/"},"modified":"2024-02-07T16:03:09","modified_gmt":"2024-02-07T16:03:09","slug":"sticky-notes","status":"publish","type":"page","link":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/","title":{"rendered":"Sticky Notes"},"content":{"rendered":"<html><head><meta content=\"text\/html; charset=UTF-8\" http-equiv=\"content-type\"><style type=\"text\/css\">@import url(https:\/\/themes.googleusercontent.com\/fonts\/css?kit=cGvuclDC_Z1vE_cnVEU6Ae_NZQ7StBcqH_vXVqoPMX0);ol{margin:0;padding:0}table td,table th{padding:0}.c15{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;background-color:#f0f0f0;border-left-style:solid;border-bottom-width:0pt;width:468pt;border-top-color:#000000;border-bottom-style:solid}.c11{-webkit-text-decoration-skip:none;color:#1155cc;font-weight:400;text-decoration:underline;vertical-align:baseline;text-decoration-skip-ink:none;font-size:11pt;font-family:\"Arial\";font-style:normal}.c20{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:\"Arial\";font-style:normal}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:\"Arial\";font-style:normal}.c19{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:\"Arial\";font-style:normal}.c13{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:\"Arial\";font-style:normal}.c18{margin-left:18pt;padding-top:3pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c24{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c9{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c23{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;color:#1155cc;text-decoration:underline}.c7{border-spacing:0;border-collapse:collapse;margin-right:auto}.c17{background-color:#f0f0f0;font-family:\"Consolas\";color:#397300;font-weight:400}.c10{background-color:#f0f0f0;font-family:\"Consolas\";color:#880000;font-weight:400}.c2{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c16{background-color:#ffff00;font-family:\"Consolas\";color:#880000;font-weight:400}.c0{background-color:#f0f0f0;font-family:\"Consolas\";color:#444444;font-weight:400}.c25{padding-top:3pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c8{background-color:#f0f0f0;font-family:\"Consolas\";color:#444444;font-weight:700}.c26{background-color:#ffff00;font-family:\"Consolas\";color:#444444}.c4{orphans:2;widows:2;height:11pt}.c21{background-color:#ffffff;}.c6{orphans:2;widows:2}.c1{color:inherit;text-decoration:inherit}.c22{font-weight:400;font-family:\"Consolas\"}.c5{height:0pt}.c27{font-weight:400}.c14{height:11pt}.c12{font-weight:700}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:\"Arial\"}p{margin:0;color:#000000;font-size:11pt;font-family:\"Arial\"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}<\/style><\/head><body class=\"c21 doc-content\"><h1 class=\"c6 c24\" id=\"hs5omggksme5\"><span class=\"c19\">Sticky Notes<\/span><\/h1><p class=\"c2 c6\"><span class=\"c3\">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.<\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 329.33px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu\" style=\"width: 624.00px; height: 329.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span>Visit an example space <\/span><span class=\"c23\"><a class=\"c1\" href=\"https:\/\/app.learnbrite.com\/dashboard\/spaces\/visit\/spc4ec40bd620cd635bf401c0\">https:\/\/app.learnbrite.com\/dashboard\/spaces\/visit\/spc4ec40bd620cd635bf401c0<\/a><\/span><span class=\"c3\">&nbsp;<\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c25\"><span class=\"c11\"><a class=\"c1\" href=\"#hs5omggksme5\">Sticky Notes<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#hw49l3o45fgr1\">Interacting with Notes<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#hrxhnodtszeih\">How to add Sticky Notes<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#hu8czrri6oeus\">How to change the visual look of Sticky Notes<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#hv61lhj1f9luc\">How to use UI icons in Sticky Notes and Dialogue<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#ho21fph7mwm99\">Adding Images to Sticky Notes<\/a><\/span><\/p><p class=\"c18\"><span class=\"c11\"><a class=\"c1\" href=\"#h1sjos1q50yhw\">Using Notes as Signs (disabling interaction)<\/a><\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><h2 class=\"c9 c6\" id=\"hw49l3o45fgr1\"><span class=\"c20\">Interacting with Notes<\/span><\/h2><p class=\"c2 c6\"><span class=\"c3\">Click and hold a note for 1 second to pick it up, then drag the note around to the desired location and click again to drop the note there.<\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><h2 class=\"c9 c6\" id=\"hrxhnodtszeih\"><span class=\"c20\">How to add Sticky Notes<\/span><\/h2><p class=\"c2 c6\"><span class=\"c3\">Click the top right toolbar icon Pencil+ &gt; Add note<\/span><\/p><p class=\"c2 c6\"><span class=\"c3\">A note will appear floating in front of you. Add your note text and drag it to your desired location in edit mode.<\/span><\/p><h2 class=\"c9 c6\" id=\"hu8czrri6oeus\"><span class=\"c20\">How to change the visual look of Sticky Notes<\/span><\/h2><p class=\"c2 c6\"><span class=\"c13 c12\">Click the settings icon for a note<\/span><\/p><p class=\"c2 c6\"><span>Change <\/span><span class=\"c12\">innerHTML <\/span><span class=\"c3\">is the text that appears on the note and can include html tags eg. &lt;img&gt;<\/span><\/p><p class=\"c2 c6\"><span>Change <\/span><span class=\"c12\">style <\/span><span class=\"c3\">using CSS rules, see below for some useful examples including changing the size<\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c13 c12\">Example: notes with no background<\/span><\/p><p class=\"c2 c6\"><span class=\"c3\">Transparent background (great for notes with images)<\/span><\/p><a id=\"t.c0377a9379411ab1e1c8aff5e4ba06026df50b1f\"><\/a><a id=\"t.0\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c17\">background<\/span><span class=\"c0\">&#8211;<\/span><span class=\"c17\">color<\/span><span class=\"c0\">:<\/span><span class=\"c17\">transparent<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c13 c12\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c12 c13\">Example: notes with black background<\/span><\/p><p class=\"c2 c6\"><span class=\"c3\">Black background with white text<\/span><\/p><a id=\"t.6cd3ea8735a48373ca6fd416cb388eee4d48b72a\"><\/a><a id=\"t.1\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">background-color<\/span><span class=\"c0\">:<\/span><span class=\"c10\">#000000<\/span><span class=\"c0\">;<\/span><span class=\"c8\">color<\/span><span class=\"c0\">:white<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c13 c12\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c13 c12\">Example: notes with a gradient background<\/span><\/p><p class=\"c2 c6\"><span class=\"c3\">Gradient background. Also supports Hex codes for specific colors.<\/span><\/p><a id=\"t.332bbac59b5ce3d9028b74708da958f37d855d9a\"><\/a><a id=\"t.2\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">background-image: linear-gradient(to bottom right, <\/span><span class=\"c0\">red<\/span><span class=\"c8\">, <\/span><span class=\"c0\">white<\/span><span class=\"c8\">);<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><a id=\"t.85646cfaa314dbfa802801a5097992fbe87531c1\"><\/a><a id=\"t.3\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">background-image: linear-gradient(to bottom right, <\/span><span class=\"c10\">#82b93f<\/span><span class=\"c8\">, <\/span><span class=\"c10\">#5ea85e<\/span><span class=\"c8\">);<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 173.50px; height: 162.12px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/k1ZJNLADbQmIQEwGsahvu1Va4iufzutq73ilu6oIdHgp5cKWpefU1vBacgFrL_GKOyhwaTLyU9cUeUivIeocmP4_DG8XPUSTrWtvfIEXTlNmGh6SRMR-lmIEBydi64JsvYvVmoCF2lAHA3LZ\" style=\"width: 173.50px; height: 162.12px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 166.50px; height: 163.28px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/m566zgx8XZoeX9krW5bTSgQv3-ApF4O9eW8cGqWoh7vK8CrDwh5rS-ur7bMdyvO9oCx75-laaAoGyYzqiaUcgSGHfalcIpTmQTDuhNDWBTnXBaw24e1s_qBWiOGe5KcFqXU87fujgOtoskw-\" style=\"width: 166.50px; height: 163.28px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c13 c12\">Example: notes with a border<\/span><\/p><p class=\"c2 c6\"><span>Border requires both <\/span><span class=\"c12\">style<\/span><span>&nbsp;and <\/span><span class=\"c12\">innerHTML<\/span><span class=\"c3\">&nbsp;settings. <\/span><\/p><p class=\"c2 c6\"><span class=\"c12\">style<\/span><span class=\"c3\">&nbsp;settings:<\/span><\/p><a id=\"t.aaf70ff56eef5081465f33faaa22c82a05764ae6\"><\/a><a id=\"t.4\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">width:<\/span><span class=\"c10\">400px<\/span><span class=\"c8\">; height:<\/span><span class=\"c10\">400px<\/span><span class=\"c8\">; background-color: green;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c6\"><span class=\"c12\">innerHTML<\/span><span class=\"c3\">&nbsp;settings:<\/span><\/p><a id=\"t.34cc479874e70dc5bdd411b0302e04ea15a6e559\"><\/a><a id=\"t.5\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">&lt;div style=&quot;width:<\/span><span class=\"c10\">380px<\/span><span class=\"c8\">; height:<\/span><span class=\"c10\">380px<\/span><span class=\"c8\">; margin:<\/span><span class=\"c10\">0px<\/span><span class=\"c8\">; border: <\/span><span class=\"c10\">10px<\/span><span class=\"c8\">&nbsp;solid <\/span><span class=\"c10\">#000000<\/span><span class=\"c8\">;&quot;&gt;&lt;h1 style=&quot;font-family: Arial, Helvetica, sans-serif;color:<\/span><span class=\"c10\">#000000<\/span><span class=\"c8\">;padding:<\/span><span class=\"c10\">10px<\/span><span class=\"c8\">;&quot;&gt;This is a note. You can edit this text in edit mode&lt;\/h1&gt;&lt;\/div&gt;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 186.50px; height: 183.37px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/ED0XnlBdAbIVe3M6Xxso2So--RgeoTwPIa0wFtCOK6YUczIrvlOGWYIYHSmMOPq5XnDG1BDfoSRXN2pDOoMUaJbNgyVMLY9FwkAD37Vsrcpr46MkDqMQHDuu2xEYJWHKL6vxkvtmG23LfbK-\" style=\"width: 186.50px; height: 183.37px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c2 c4\"><span class=\"c13 c12\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c13 c12\">Example: notes with semi-transparent grey with white text label size<\/span><\/p><a id=\"t.65087ded415c3463273f13ddcfbaf6d2964a0863\"><\/a><a id=\"t.6\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">background<\/span><span class=\"c0\">:rgba(<\/span><span class=\"c10\">1<\/span><span class=\"c0\">,<\/span><span class=\"c10\">1<\/span><span class=\"c0\">,<\/span><span class=\"c10\">1<\/span><span class=\"c0\">,<\/span><span class=\"c10\">0.5<\/span><span class=\"c0\">);<\/span><span class=\"c8\">height<\/span><span class=\"c0\">:<\/span><span class=\"c10\">70px<\/span><span class=\"c0\">;<\/span><span class=\"c8\">min-height<\/span><span class=\"c0\">:<\/span><span class=\"c10\">70px<\/span><span class=\"c0\">;<\/span><span class=\"c8\">color<\/span><span class=\"c0\">:white<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 298.50px; height: 130.78px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/742DWqqf3bnorWbEJu026DbOPg8qAzCkMzQv7XVTeQjqmS2erKUo-f7XkBcBn3FzFQscnVHqvEH5U2Xsd7MXzFGwknq7mrvhystiP0nm7viDKDEWncXyYuC2GY5g9_8cdz5DCotZSuHD-4Y\" style=\"width: 298.50px; height: 130.78px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span class=\"c13 c12\">Example: change size of a note<\/span><\/p><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 267.50px; height: 201.05px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/KcqusBhSUFx4tcPcrqxCV3hEfC0t_ty7JS_lp8dhQP8dGChDLbPcpIlKsyZv3XWrkfRhczskjOuDB9r8nTsheO0SVMtjWkklUjhg5DirJYyBQcY_drCkCjm6n6RbwXQ2nTCMm8tG62aqbIg\" style=\"width: 267.50px; height: 201.05px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><a id=\"t.976a3cfeb65510ab93dc384438bba710b7948891\"><\/a><a id=\"t.7\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c8\">background-color<\/span><span class=\"c0\">:<\/span><span class=\"c10\">#ffff6d<\/span><span class=\"c0\">; <\/span><span class=\"c8\">font-size<\/span><span class=\"c0\">:<\/span><span class=\"c10\">20px<\/span><span class=\"c0\">; <\/span><span class=\"c8\">width<\/span><span class=\"c0\">:<\/span><span class=\"c10\">800px<\/span><span class=\"c0\">; <\/span><span class=\"c8\">height<\/span><span class=\"c0\">:<\/span><span class=\"c10\">50px<\/span><span class=\"c0\">;<\/span><span class=\"c8\">min-height<\/span><span class=\"c0\">:<\/span><span class=\"c10\">50px<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 294.50px; height: 128.37px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/snuyT-JDJEOmKiTiXmi6-lFNTe7MOZJqEukzsu6G_gdcFgGa31XII6kTSHoe4JPtwcq1YAk0hoh6_7HvR3ORlkQq95FJzDGYuvkqS-mUgqU_YF8JPIaTPrOU28HdX_k7gYYh8iJNfwqRB94\" style=\"width: 294.50px; height: 128.37px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><h2 class=\"c9 c6\" id=\"hv61lhj1f9luc\"><span class=\"c20\">How to use UI icons in Sticky Notes and Dialogue<\/span><\/h2><p class=\"c2 c6\"><span class=\"c13 c12\">Example: Laser Pointer<\/span><\/p><a id=\"t.9865ec3d07ae13bf762870c8b775cf1f18634fae\"><\/a><a id=\"t.8\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c0\">&lt;i <\/span><span class=\"c8\">class<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;fa fa-bullseye fa-stack-1.5x fa-lg&quot;<\/span><span class=\"c0\">&nbsp;aria-hidden=<\/span><span class=\"c10\">&quot;true&quot;<\/span><span class=\"c0\">&gt;&lt;\/<\/span><span class=\"c8\">i<\/span><span class=\"c0\">&gt;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c14\"><span class=\"c3\"><\/span><\/p><p class=\"c2\"><span class=\"c13 c12\">Example: Hotspot Marker<\/span><\/p><a id=\"t.2e5ccfd8a19f4672c1ed2461771238aac05bdce2\"><\/a><a id=\"t.9\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c0\">&lt;i <\/span><span class=\"c8\">class<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;fa fa-map-marker fa-1_5x fa-lg fa-fw fa-stack-1.5x&quot;<\/span><span class=\"c0\">&nbsp;style=<\/span><span class=\"c10\">&quot;color:007bff;&quot;<\/span><span class=\"c0\">&gt;&lt;\/<\/span><span class=\"c8\">i<\/span><span class=\"c0\">&gt;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span>A full list of available icons can be found here on the <\/span><span class=\"c23\"><a class=\"c1\" href=\"https:\/\/fontawesome.com\/v4.7.0\/icons\/\">FontAwesome website<\/a><\/span><span>. You can also get creative with rotating and stacking icons (see <\/span><span class=\"c23\"><a class=\"c1\" href=\"https:\/\/fontawesome.com\/v4.7.0\/examples\/\">https:\/\/fontawesome.com\/v4.7.0\/examples\/<\/a><\/span><span class=\"c3\">&nbsp;) <\/span><\/p><h2 class=\"c6 c9\" id=\"ho21fph7mwm99\"><span class=\"c20\">Adding Images to Sticky Notes<\/span><\/h2><p class=\"c2 c6\"><span class=\"c3\">The HTML &lt;img&gt; 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.<\/span><\/p><p class=\"c2 c6\"><span class=\"c3\">Eg. Change your original image tag<\/span><\/p><a id=\"t.959e179b9d0e16a58f186249d62f87fe21cb21de\"><\/a><a id=\"t.10\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c0\">&lt;img <\/span><span class=\"c8\">height<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;40&quot;<\/span><span class=\"c0\">&nbsp;<\/span><span class=\"c8\">width<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;139&quot;<\/span><span class=\"c0\">&nbsp;<\/span><span class=\"c8\">src<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;https:\/\/cache.learnbrite.com\/_assets_\/img\/japan.jpg&quot;<\/span><span class=\"c0\">&gt;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><p class=\"c2 c6\"><span>To include the following two changes, add crossorigin=&quot;anonymous&quot; and prepend your url with <\/span><span class=\"c22\">https:\/\/hurl.learnbrite.com\/pr\/<\/span><span class=\"c3\">&nbsp;which will help avoid CORS loading errors. <\/span><\/p><p class=\"c2 c4\"><span class=\"c3\"><\/span><\/p><a id=\"t.ba3598981f37667181fd095604f596becb3afff4\"><\/a><a id=\"t.11\"><\/a><table class=\"c7\"><tr class=\"c5\"><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c2\"><span class=\"c0\">&lt;img <\/span><span class=\"c12 c26\">crossorigin<\/span><span class=\"c26 c27\">=<\/span><span class=\"c16\">&quot;anonymous&quot;<\/span><span class=\"c0\">&nbsp;<\/span><span class=\"c8\">height<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;40&quot;<\/span><span class=\"c0\">&nbsp;<\/span><span class=\"c8\">width<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;139&quot;<\/span><span class=\"c0\">&nbsp;<\/span><span class=\"c8\">src<\/span><span class=\"c0\">=<\/span><span class=\"c10\">&quot;<\/span><span class=\"c16\">https:\/\/hurl.learnbrite.com\/pr\/<\/span><span class=\"c10\">https:\/\/platform.slack-edge.com\/img\/add_to_slack.png&quot;<\/span><span class=\"c0\">&gt;<\/span><\/p><\/td><\/tr><\/table><p class=\"c2 c14\"><span class=\"c3\"><\/span><\/p><h2 class=\"c9 c6\" id=\"h1sjos1q50yhw\"><span class=\"c20\">Using Notes as Signs (disabling interaction)<\/span><\/h2><p class=\"c2 c6\"><span class=\"c3\">Often Notes can be used as text and signs in spaces as they offer a wide range of CSS styling options. But you don&rsquo;t want people to interact with them, so a design decision was made to not allow that when sceneryStatic property is set to true. <\/span><\/p><p class=\"c2 c6\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 466.67px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-us.googleusercontent.com\/Nq1mV49zTsl4rylzzEb52cAVMIOuMLaiBH35xmce4ZZfesKZCnCoWTjQ1ApZZQkzKAf5rWe7dcB4rC3_FK3RbXNAMCOi00pIGEwW7sQBTYvvfjc_HQqOfR7XWZYX7u52ctdd1IZZ__NqLeF-\" style=\"width: 624.00px; height: 466.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c2 c14\"><span class=\"c3\"><\/span><\/p><\/body><\/html>","protected":false},"excerpt":{"rendered":"Sticky NotesSticky notes, or often called post-it notes can be useful in workshops and as a versatile editing item. They support HTML and CSS formatting.Visit an example space https:\/\/app.learnbrite.com\/dashboard\/spaces\/visit\/spc4ec40bd620cd635bf401c0&nbsp;Sticky NotesInteracting with NotesHow to add Sticky NotesHow to change the visual look of Sticky NotesHow to use UI icons in Sticky Notes and DialogueAdding Images to [&hellip;]","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-3701","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sticky Notes<\/title>\n<meta name=\"description\" content=\"Sticky Notes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Notes\" \/>\n<meta property=\"og:description\" content=\"Sticky Notes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/\" \/>\n<meta property=\"og:site_name\" content=\"Metaverse Academy\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-07T16:03:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/\",\"url\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/\",\"name\":\"Sticky Notes\",\"isPartOf\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu\",\"datePublished\":\"2021-06-23T10:35:17+00:00\",\"dateModified\":\"2024-02-07T16:03:09+00:00\",\"description\":\"Sticky Notes\",\"breadcrumb\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage\",\"url\":\"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu\",\"contentUrl\":\"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperspace.mv\/academy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Notes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/#website\",\"url\":\"https:\/\/hyperspace.mv\/academy\/\",\"name\":\"Metaverse Academy\",\"description\":\"Learn to build WebXR metaverse experiences for 3D, 360, VR\/AR\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperspace.mv\/academy\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Notes","description":"Sticky Notes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Notes","og_description":"Sticky Notes","og_url":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/","og_site_name":"Metaverse Academy","article_modified_time":"2024-02-07T16:03:09+00:00","og_image":[{"url":"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/","url":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/","name":"Sticky Notes","isPartOf":{"@id":"https:\/\/hyperspace.mv\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage"},"image":{"@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu","datePublished":"2021-06-23T10:35:17+00:00","dateModified":"2024-02-07T16:03:09+00:00","description":"Sticky Notes","breadcrumb":{"@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperspace.mv\/academy\/sticky-notes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#primaryimage","url":"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu","contentUrl":"https:\/\/lh7-us.googleusercontent.com\/Qd_-7pdrPjPcKgfquCqrFTb8WDzjk8_FUlpDjtsV1kSqobcoJqhD8Kn5kXtgHzAUrLR_lNy0XEhPPJLN3MDJizT8B9LVkyRO2G6UAKIlhFvCBH1-zrdMXkHKc40l2i2bR8Um6VPXJY2hyUSu"},{"@type":"BreadcrumbList","@id":"https:\/\/hyperspace.mv\/academy\/sticky-notes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperspace.mv\/academy\/"},{"@type":"ListItem","position":2,"name":"Sticky Notes"}]},{"@type":"WebSite","@id":"https:\/\/hyperspace.mv\/academy\/#website","url":"https:\/\/hyperspace.mv\/academy\/","name":"Metaverse Academy","description":"Learn to build WebXR metaverse experiences for 3D, 360, VR\/AR","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperspace.mv\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/3701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/comments?post=3701"}],"version-history":[{"count":5,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/3701\/revisions"}],"predecessor-version":[{"id":4787,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/3701\/revisions\/4787"}],"wp:attachment":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/media?parent=3701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}