Table of Contents
NOTE: This is an example note. [NOTE] Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.
Renders:
This is an example note.
Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.
IMPORTANT: This is another example more important.
Renders:
This is another example more important.
CAUTION: This is another example important but less.
Renders:
This is another example important but less.
WARNING: This is a warning example.
Renders:
This is a warning example.
[icon="./images/icons/example.png"] NOTE: What lovely war.
Renders:
What lovely war.
[TIP] .A TIP admonition block ===================================================================== Qui in magna commodo, est labitur dolorum an. Est ne magna primis adolescens. . Fusce euismod commodo velit. . Vivamus fringilla mi eu lacus. .. Fusce euismod commodo velit. .. Vivamus fringilla mi eu lacus. . Donec eget arcu bibendum nunc consequat lobortis. =====================================================================
Renders:
A TIP admonition block
Qui in magna commodo, est labitur dolorum an. Est ne magna primis adolescens.
- Fusce euismod commodo velit.
-
Vivamus fringilla mi eu lacus.
- Fusce euismod commodo velit.
- Vivamus fringilla mi eu lacus.
- Donec eget arcu bibendum nunc consequat lobortis.
Behind the scene
Render is make with these CSS rules
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/stylesheets/admonition-iconsfont.css]
.
/*
Bootstrap backend styles of Handbook for admonitionblock icons font only
*/
.admonition {
/* bootstrap 3 .alert style */
padding: 15px;
margin-bottom: 21px;
border: 2px solid transparent;
border-radius: 4px;
}
.note {
border-color: olive;
}
.tip {
border-color: blue;
}
.warning {
border-color: yellow;
}
.caution {
border-color: fuchsia;
}
.important {
border-color: red;
}
.note .icon {
color: olive;
}
.tip .icon {
color: blue;
}
.warning .icon {
color: yellow;
}
.caution .icon {
color: fuchsia;
}
.important .icon {
color: red;
}
.note .icon .fa:before{
content: "\f05a"; /* fa-info-circle */
}
.tip .icon .fa:before{
content: "\f0eb"; /* fa-lightbulb-o */
}
.warning .icon .fa:before{
content: "\f071"; /* fa-exclamation-triangle */
}
.caution .icon .fa:before{
content: "\f06a"; /* fa-exclamation-circle */
}
.important .icon .fa:before{
content: "\f056"; /* fa-minus-circle */
}
.admonition .icon {
float: left;
font-size: 3em;
}
.admonition .icon .title {
font-size: 1em;
margin: 0;
}
.admonition .content {
padding-left: 0.5em;
margin-left: 4em;
border-left: 3px solid #DDDDDD;
min-height: 4em;
}
If you want to modify this render, copy at least the following CSS rules
in your user.css theme stylesheet (e.g. readable/user.css) and apply all changes you want.
-
.admonition
-
.admonition .icon
-
.admonition .icon .title
-
.admonition .content