Hello,
I am looking for a plugin or markdown extension for notification blocks. Bootstrap has something like this
Would appreciate it if there’s a plugin out there.
AI-generated summary
The discussion is about creating notification blocks in Discourse. 2TapPrince is looking for a plugin or markdown extension and shares an example from Bootstrap. simonk suggests using the generic bbcode wrapper support with custom CSS to style the blocks. He provides an example of how to use it and shares his CSS code for adding styles to info, warning, and danger blocks. 2TapPrince tries to implement it but encounters an issue. simonk points out that the success style is not defined and suggests changing the wrap to warning. 2TapPrince applies the change and reports that it works perfectly.
You can use the generic bbcode wrapper support, something like this:
[wrap=success]
**Success!** Your message has been sent successfully
[/wrap]
…which will become this HTML:
<div class="d-wrap" data-wrap="success" dir="ltr">
<p><strong>Success!</strong> Your message has been sent successfully</p>
</div>
You can add CSS targeting .d-wrap[data-wrap="success"] to style it.
I use this:
@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");
}
…which allows me to create things like this:
Genius, thank you so much!
My CSS only added styles for info, warning and danger. Try changing [wrap=success] to [wrap=warning].
You’ll have to define your own style for sucess.
Oh yeah, I thought you coded it to be plug n play.
Works perfect.