Admonitions in CSS
I’ve never heard of that!
It took me an hour to figure out that a display section on a page like this:
was called an admonition.
The research
After searching around an reading various things about how these are implemented I came accross this page, Admonition Paragraphs, which looked easy enough for me to implement using my limited CSS skills.
I followed the basic design concept listed in the article. Creating the following HTML structure:
<div class="admonition note">
<div class="title">NOTE</div>
<div class="content">This is a note admonition</div>
</div>
The article contained an extra <div/> element with an .icon CSS class
assigned to it. I found that after some tinkering the extra <div/> wasn’t
needed to achieve the effect I wanted for this site.
Then I created the following CSS definitions for the effect displayed above:
.admonition {
padding: 15px;
margin-bottom: 21px;
border-left: 10px solid transparent;
}
The main thing to take note of in this stanza is the border-left property which creates the thick bar effect running down the left side of the tip.
Next is the title for the admonition:
.admonition .title {
margin: 0;
text-transform: uppercase;
padding-left: 3px;
border: 1px solid;
border-style: hidden hidden solid;
}
The main thing to take note of in this stanza is the border-style property which create the thin underline effect under the title.
The implementation
I wanted to have a few different types of admonition. I created 4 different types:
- note
- tip
- warning
- important
To define the colors each of these types:
.note {
border-color: olive;
background-color: #f6fffe;
}
.note .title {
color: olive;
border-color: olive;
}
and repeated each of these for the other types. I’ve displayed these below:
You can view the entire CSS file here: css/admonition.css
To make use of these styles you’ll to import the style sheet:
<link rel="stylesheet" href="{ $baseUrl }/css/admonition.css">
The { and } in the above code block should be {{ and }}.
I haven’t been able to determine how to properly escape the double curly braces in hugo.