How to use HTML/CSS for reusable styled boxes in Bookdown

Question

I would like to create reusable sections for my bookdown project.

What works: I create a style.css including

.titeldefbox{
  display: flex;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: darkslategray;
  height: 30px;
  color: white;
  border-radius: 10px 10px 0 0;
  padding: 10px 0 10px 0;
}
.defbox{
  background-position: 0px;
  background: linear-gradient(
  315deg,
  hsl(240deg 50% 95%) 0%,
  hsl(158deg 13% 64%) 100%);
  padding: 1em 1em 1em 1em;
  border-radius: 10px;
  position: relative;
}
.svgdefbox{
  width: auto;
  height: 25px;
  padding-left: 1em;
}
.defbox h2{
font-size: 16px;
margin-top: 0px;
width: 100%;
height: 20px;
padding: 5px 0 10px 15px;
}

.defbox p{
  margin-top: 40px;
  padding: 10px 10px 0 0;
}

I call a div span in any .Rmd as

::::: {.defbox}
A **definition** is a statement of the meaning of a term.
:::::

Renders to:

What does not work: A friend of mine designed a titled box with a SVG image (as you see it everywhere, e.g. https://swcarpentry.github.io/r-novice-inflammation/01-starting-with-data/index.html).

This

<div class="defbox">
  <div class="titeldefbox">
  <svg  class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
  <h2> Definition </h2>
  </div>
  <p>A 
    <strong> definition </strong>
    is a statement of the meaning of a term.
  </p>
</div>

should render to that

But I fail to implement it in my markdown structure. Either I can use pure css in the YAML header or I can use a entire .html file in the includes option as is often done for a general everywhere-message like this:

output: 
  bookdown::gitbook:
    includes:
      before_body: top_message.html

You didn't include the css style rules for class `svgdefbox` and `titeldefbox`. I am not getting the same HTML output due to lack styles for these classes. — shafee, Sep 30 '22 at 13:30
I still could not reproduce this, look [here on codepen](https://codepen.io/sshafee/pen/Vwxxevy) what I have got when I ran those html codes along with css. — shafee, Oct 01 '22 at 09:56
Here is the codepen. Sorry, for missing elements. That's because I do not understand all components completely. https://codepen.io/marco_k/pen/PoeezZj — Marco, Oct 01 '22 at 12:44
I would recommend updating your question (the css part) accordingly to your codepen. — shafee, Oct 01 '22 at 17:05

score 1 · Accepted Answer · answered Oct 01 '22 at 17:20

One possible way to do this is using a little bit of javascript to insert that svg element in every places where the classes .defbox and .titeldefbox are used.

Now for example, if we wanted to use Definition boxes in our 01-intro.Rmd file, we can use pandoc divs in the following way,

01-intro.Rmd

# Hello bookdown 

All chapters start with a first-level heading followed by your chapter title, like the line above. There should be only one first-level heading (`#`) per .Rmd file.


:::: {.defbox}

::: {.titeldefbox}

<h2> Definition </h2>

:::

A **definition** is a statement of the meaning of a term.

::::



## More styled box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique nibh mauris, id ullamcorper massa convallis et. Aliquam pharetra rutrum bibendum. Quisque diam lorem, varius ac tincidunt vel, volutpat et est. 


:::: {.defbox}

::: {.titeldefbox}

<h2> More Definition </h2>

:::

Praesent iaculis sed metus sed imperdiet. Nunc vitae augue bibendum, pulvinar neque id, suscipit justo. Quisque convallis, erat vel consectetur mattis, ante est euismod mauris, at condimentum enim erat id lorem. Phasellus volutpat id sapien a sollicitudin. Maecenas nec hendrerit felis.

::::

Now notice these divs doesn't contain that tiny little svg icon. We are going to insert those with js in a html file and include that html file with includes: after_body: yaml key in the _output.yml.

_output.yml

bookdown::gitbook:
  css: style.css
  includes:
    after_body: custom_def.html

custome_def.html

<div class="svg">
  <svg  class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
  
</div>


<script>

function add_svg () {
  svg = document.querySelector(".svg svg")
  svg_in = document.querySelectorAll(".defbox .titeldefbox")
  
  for (i = 0; i < svg_in.length; i++) {
    svg_clone = svg.cloneNode(true)
    svg_in[i].insertBefore(svg_clone, svg_in[i].firstElementChild)
  }
}

window.onload = add_svg();

</script>

And then add these following css rules in the style.css

style.css

.titeldefbox {
display: flex;
width: 100%;
left: 0;
top: 0;
position: absolute;
background-color: darkslategray;
height: 50px;
color: white;
border-radius: 10px 10px 0 0;
padding: 10px 0 10px 0;
}

.defbox {
  background-position: 0px;
background: linear-gradient(
  315deg,
  hsl(240deg 50% 95%) 0%,
  hsl(158deg 13% 64%) 100%
);
  padding: 1em 1em 1em 1em;
  border-radius: 10px;
  position: relative;
}

.svgdefbox {
  width: auto;
  height: 25px;
  padding-left: 1em;
}

.defbox h2{
font-size: 16px !important;
margin-top: 0px !important;
width: 100% !important;
height: 20px !important;
padding: 0 0 10px 15px !important;
}

.defbox p{
  margin-top: 40px !important;
  padding: 10px 10px 0 0 !important;
}

Your result looks excellent. But I cannot fully replicate it. I started a fresh bookdown minimal example. The box is fine. But the SVG script is not working. In addition, I plan to have different boxes with different SVG. `add_svg` looks like I need to create one of these functions per icon and box. — Marco, Oct 02 '22 at 16:17
Yes you need to define functions for each svg element. That's why using direct svg tag is a complicated process and is not common to me. I have seen people to use svg image of icon and for the case of icon you just need to set that icon image as the background-image for a class and it would work without this mess of using javascript. By the way, Did you use the `custom_def.html` exactly as I have shown. Becasue You can see that, for me its working :) — shafee, Oct 02 '22 at 17:05
Hi shafee, I managed to get it working without SVG. The javascript seems to have some conflicts with another complex script I am running for the `webexercises` package. The code of this is here https://codepen.io/marco_k/pen/RwyBmKY Can you spot why this might not be working with your `add_svg` function? — Marco, Oct 06 '22 at 03:34

How to use HTML/CSS for reusable styled boxes in Bookdown

1 Answers1