Sie können die generische BBCode-Wrapper-Unterstützung verwenden, etwas wie dies:
[wrap=success]
**Erfolg!** Ihre Nachricht wurde erfolgreich gesendet
[/wrap]
…was zu diesem HTML wird:
<div class="d-wrap" data-wrap="success" dir="ltr">
<p><strong>Erfolg!</strong> Ihre Nachricht wurde erfolgreich gesendet</p>
</div>
Sie können CSS hinzufügen, das auf .d-wrap[data-wrap="success"] abzielt, um es zu gestalten.
Ich benutze das:
@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
padding: 8px;
padding-left: 4em;
padding-right: 2em;
color: $color;
border-left: 5px solid $bordercolor;
background-color: $bgcolor;
background-image: url($iconurl);
background-repeat: no-repeat;
background-size: 2em;
background-position: 1em 1.25em;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 1em;
}
.d-wrap[data-wrap="info"] {
@include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}
.d-wrap[data-wrap="warning"] {
@include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}
.d-wrap[data-wrap="danger"] {
@include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}
…was es mir ermöglicht, Dinge wie diese zu erstellen:
