Edit
Embedded notes are different from regular notes in that they are opaque and have no border, plus they can have several styles applied to them.
Enable/Disable
In the edit mode on posts, there is a checkbox "Embed notes". Unchecking this option and saving the post will turn this option on or off.
There is also a bookmarklet on forum #136193 which allows one to enable/disable embedded notes without having to enter the post edit menu.
Usage
The border and opacity of an embedded note vary depending upon its current status.
| Status | Opacity | Border |
| Normal | Full | None |
| Normal + Hover | Full | Black |
| Unsaved | N/A | Red |
| Movable | Minimal | blue |
| Movable + Hover | Full | blue |
Opening up the edit menu of any note will cause the opacity for all notes on the page to go minimal.
Styling
Styles can be applied to the embedded notes box by using the CSS class "note-box-attributes". Allowed styles applied to an element with this class will apply the styles to the outer note box. It's best to use an empty element to avoid apply the same styles twice to inner text.
Allowed styles
background-color- Sets the background color the box.border-radius- Sets the radiuses of the 4 box corners. [1]transform- Applies a transformation to the box. [2]- The only allowed transformation is a rotation.
justify-content- Sets the horizontal alignment of inner containers. [3]- flex-start - Left alignment.
- flex-end - Right alignment.
- Not the same as "text-align", which is used to set the text alignment of an inner container.
- Note: Without this the note box defaults to a center alignment.
align-items- Sets the vertical alignment of inner containers. [4]- flex-start - Top alignment.
- flex-end - Bottom alignment.
- Note: Without this the note box defaults to a center alignment.
Template
<div class="note-box-attributes" style=""></div>
Examples
<div class="note-box-attributes" style="border-radius:25px;background-color:white"></div>
Stacking order
Since embedded notes are opaque, there is the possibility that one note box could cover up a portion of another box, to include the text in that box. However, the order of which box goes over which can be controlled by adding an additional class to the note-box-attributes element: level-1, level-2, level-3, level-4, level-5.
A box with a higher level will be placed over a box with a lower level, e.g. a level-2 note box would be seen above a level-1 note box.
Caveat: Note boxes without a level set are at the lowest level, almost like a level 0.
Examples
<div class="note-box-attributes level-1"></div>
Alignment
As mentioned under the Styling section above, align-items and justify-content can be used to set the placement of the text containers inside the note box, since by default, the text containers are aligned towards the center of the note box. In order to get this to work properly, the text containers must be block elements, which can be achieved by either surrounding the text with a <div></div> text container, or by choosing another HTML container tag (e.g. <span></span>) and setting the display style to "block".
To set the horizontal alignment of the text inside the text containers, you must also use a block text container and set the text-align style property to either left, right, center, or justify. [5]
Examples
<div>Text in a block text container.</div>
<span style="display: block;">Text in a block text container.</span>
Illustration
Use the following to determine how to use the various alignment styles and their properties to achieve the desired alignment of the inner text container.
See also
External links
| [1] | MDN | border-radius |
| [2] | MDN | transform |
| [3] | MDN | justify-content |
| [4] | MDN | align-items |
| [5] | MDN | text-align |
No posts found.