Overview

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Remove icons from any note type

/* Remove icons from any note type. */
.note__title::before {
    display: none;
}

Remove note captions from any note type

/* Remove note captions */
.note__title {
    content: none;
}

Change note icons

You can implement images from an external repository like GitHub or from your Heretto CCMS Content Library. For more information, see Implementing Graphics.

/* The following examples show custom icons implemented for a regular note and for a tip note.
To modify icons for different note types, use one of the following commented-out selectors instead.*/

/*
.note_trouble > .note__title::before,
.note_fastpath > .note__title::before,
.note_important > .note__title::before,
.note_remember > .note__title::before,
.note_restriction > .note__title::before,
.note_attention > .note__title::before,
.note_caution > .note__title::before,
.note_warning > .note__title::before,
.note_danger > .note__title::before
*/

/* An icon implemented from a public GitHub repository. */
.note_note > .note__title::before {
  content: "";
  margin-right: -20.5px;
  background-image:url('https://jorsek.github.io/pdfgen.github.io/shared_images/note-icon.png'); /* provide your own URL */
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px; 
  height: 16px;
  padding-left: 20.5px;
}

/* An icon implemented from the CCMS content library. */
.note_tip > .note__title::before {
  content: "";
  margin-right: -20.5px;
  background-image:url(a15dc8d0-5fb8-11e9-9279-42010a8e0005); /* provide your own UUID */
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px; 
  height: 16px;
  padding-left: 20.5px;
}

Style note titles

/* The following code selects every note type. If needed, remove selectors that you don't want to use for styling. */
.note_note > .note__title,
.note_trouble > .note__title,
.note_tip > .note__title,
.note_fastpath > .note__title,
.note_important > .note__title,
.note_remember > .note__title,
.note_restriction > .note__title,
.note_attention > .note__title,
.note_caution > .note__title,
.note_warning > .note__title,
.note_danger > .note__title {
    text-transform: capitalize;
    letter-spacing: 0.1em;
    color: #404040;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: normal;
}

Change note colors

/* The following code selects every note type. If needed, remove selectors that you don't want to use for styling. */
.note_note > .note__title,
.note_trouble > .note__title,
.note_tip > .note__title,
.note_fastpath > .note__title,
.note_important > .note__title,
.note_remember > .note__title,
.note_restriction > .note__title,
.note_attention > .note__title,
.note_caution > .note__title,
.note_warning > .note__title,
.note_danger > .note__title {
 color: #6d597a
}
.note_note,
.note_trouble,
.note_tip,
.note_fastpath,
.note_importan,
.note_remember,
.note_restriction,
.note_attention,
.note_caution,
.note_warning,
.note_danger {
    border-left: 5px solid #6d597a;
    color: #6d597a;
    background-color: #eaac8b;
}