Note Include

Created 21 Mar 2022 05:25, Updated 21 Mar 2022 05:25

The note include works by a large combination of CSS classes. Each type of note has its own classes to determine the look of the note. For each type, there is a class to determine the appearance of the overall note and the appearance of the title area. Additionally, there is an additional class per type for the text area, but only the idea note uses that class by default.

The last two classes are prepended with the note type. For example, the side note like this one uses the class .sidetitle.

The classes are as follows:

  • .side
  • .important
  • .question
  • .urgent
  • .idea
  • .personal
  • .caution
  • .typetitle
  • .typetext

The default code is:

    border: 1px solid #35669A;
    border: 1px solid #660;
    border: 1px solid #359A66;
    border: 2px solid #9A323B;
.idea{    border-left: 1px solid #660; }
.personal{    display: none; }
    border: 2px dashed #000;
.importanttitle, .sidetitle, .questiontitle,
.urgenttitle, .cautiontitle{
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-color: #BBD;
    background-color: #DDB;
    background-color: #BDB;
    background-color: #DBB;
    text-decoration: blink;
    background-image: url(/local--files/start/bulb.png);
    background-repeat: no-repeat;
    height: 30px;
    padding-left: 24px;
    text-transform: capitalize;
    font-weight: bold;
.ideatext{    padding-left: 24px; }
    background-image: url(/local--files/start/caution.png);

To simply this as much as possible, I will use type as a way of conveying the seven types of notes. .type is the overall setting of the note. .typetitle is the heading looks, and .typetext indicates the text area of the note.

Fix IE bug

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License