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;
}

Use the other note type

By default, the PDF Generator does not natively support the note type of other. Whatever text you define in the othertype attribute becomes the note title. For example, <note type="other" othertype="Best practice"/>. To use the note type of other, you need to update both the XSL and CSS in the PDF Generator scenario.

XSL for note type="other"

Copy this XSL and paste it in the XSL tab of your scenario.

 <!--****** XSL needed to support note type="other" ******* -->
<xsl:template match="*" mode="process.note.other">
    <xsl:choose>
      <xsl:when test="@othertype">
        <xsl:apply-templates select="." mode="process.note.common-processing">
          <xsl:with-param name="type" select="'other'"/>
          <xsl:with-param name="title" select="string(@othertype)"/>
        </xsl:apply-templates>
      </xsl:when>
      <xsl:otherwise>
        <xsl:apply-templates select="." mode="process.note.common-processing">
          <xsl:with-param name="type" select="'note'"/>
        </xsl:apply-templates>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

CSS for note type="other"

Copy this CSS and paste it into the CSS tab of your scenario. Alternately, add the .note_other selector to an existing style configuration.

.note_other {
    color: #292D38;
    background-color: #F5F9FE;
    border-color: #3B93EE;
}
.note_other > .note__title {
  color: #000;
}