Edit online

Notes

Notes contain an additional piece of information that calls attention to particular content. They may have various types (note, tip, fastpath, restriction, important, remember, attention, caution, danger, other).

For information on how to add and manage mixed content before the note icons and labels, see How to Control the Image Size in Complex Static Content.

Edit online

How to Change Note Icons

Remember:
  • The recommended icon format is SVG.
  • The default size of the note icons is 24x24px.
To change the default icon for notes that do not have a @type attribute, add the following rule to your customization CSS:
div.note {
  background-image: url("../img/note.svg");
}
For a note with a @type attribute set to warning, caution, or trouble, add the following corresponding CSS rule:
div.warning {
  background-image: url("../img/warning.svg");
}
div.caution {
  background-image: url("../img/caution.svg");
}
div.trouble {
  background-image: url("../img/troubleshooting.svg");
}
For a note with @type attribute set to other and @othertype attribute set to Safety, add the following CSS rule:
div.note[type="other"][othertype=Safety] {
  background-image: url("../img/life-preserver.svg");
}
Edit online

How to Change Note Colors

To change the background-color for notes that do not have a @type attribute, add the following rule to your customization CSS:
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  background-color: #50bbff;
}
For a note with a @type attribute set to restriction, add the following CSS rule:
*[class~="topic/note"].note_restriction {
  background-color: #ff5566;
}
For a note with @type attribute set to other and @othertype attribute set to Safety, add the following CSS rule:
*[class~="topic/note"][type = "other"][othertype = Safety] {
  background-color: #ffaa00;
}