Predefined block quote formats

Support
1

Is there a predefined way to highlight block quotes as tip/note/warning etc. etc.

Example:

2

That’s easy to do with shortcodes

3

Thanks for the prompt response.

I was and am having trouble getting the conditional color and icon formatting to show.

As far as I can tell there does not seem to be any Theme demo that shows this feature, did I miss one? If not, is there a Zola site you know of where I can take a look at all the tricks?

4

We just added our own CSS to the Adidoks theme- we have been meaning to do Shortcodes but haven’t got around to it yet.
e.g. Inbound Shipments - mSupply

5

Worked it out. In case anyone else comes along this path…

In order to add alerts in the following way, for danger(), info(), note(), success(), and warning():

{% note() %}
    A note.
{% end %}

Proceed as follows:

  1. Download Bootstrap icons (v1.8.1)
  2. Unzip then move files here:
    • source/static/fonts/bootstrap-icons.woff
    • source/static/fonts/bootstrap-icons.woff2
    • source/sass/bootstrap-icons.scss
  3. Add these shortcodes under: source/templates/shortcodes/*

    • source/templates/shortcodes/danger.html:

      <!-- 
Danger Alert -->
<div
  class="alert alert-danger alert-dark show"
  role="alert"
  style="background: #f8d7da; color: #721c24; border-color: #f5c6cb"
>
  <h4 class="h5 bi bi-exclamation-octagon">Danger!</h4>
  <hr />
  {{ body | markdown | safe }}
</div>
<!-- End Danger Alert -->

    • source/templates/shortcodes/info.html

      <!-- Information Alert -->
<div
  class="alert alert-info alert-dark show"
  role="alert"
  style="background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb"
>
  <h4 class="h5 bi bi-info-lg">Information</h4>
  <hr />
  {{ body | markdown | safe }}
</div>
<!-- End Information Alert -->

    • source/templates/shortcodes/note.html

      <!-- Note Alert -->
<div
  class="alert alert-primary alert-dark show"
  role="alert"
  style="background: #cce5ff; color: #004085; border-color: #b8daff"
>
  <h4 class="h5 bi bi-info-lg">Note</h4>
  <hr />
  {{ body | markdown | safe }}
</div>
<!-- End Note Alert -->

    • source/templates/shortcodes/success.html

      <!-- Success Alert -->
<div
  class="alert alert-success alert-dark show"
  role="alert"
  style="background-color: #d4edda; color: #155724; border-color: #c3e6cb"
>
  <h4 class="h5 b- bi-check-all">Success!</h4>
  <hr />
  {{ body | markdown | safe }}
</div>
<!-- End Success Alert -->

    • source/templates/shortcodes/warning.html

      <!-- Warning Alert -->
<div
  class="alert alert-warning alert-dark show"
  role="alert"
  style="background: #fff3cd; color: #856404; border-color: #ffeeba"
>
  <h4 class="h5 bi bi-exclamation-triangle">Warning!</h4>
  <hr />
  {{ body | markdown | safe }}
</div>
<!-- End Warning Alert -->