about:embedded notes
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>
Example
<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.
Example
<div class="note-box-attributes level-1"></div>
See also
External links
[1] | w3schools | Border radius |
[2] | w3schools | Transform |
[3] | w3schools | Justify content |
[4] | w3schools | Align items |