Hacking BookStack

I’m a big fan of open-source software. One that I’ve implemented in a couple of different places now is BookStack. BookStack is an open-source wiki platform. BooksStack is also very flexible.

However, we use formalized outlines. There is a desire to have a traditional outline:

1. Roman Upper Case (I.)
   1. Alpha Upper Case (A.)
      1. Numeric (1.)
         1. Alpha Lower Case (a.)
            1. Roman Lower case (i.)
               However, Markdown doesn’t follow that structure by default. Alas, neither does BookStack.

Traditionally, Markdown doesn’t really “do” the traditional outline. I like to write in Markdown, and BookStack supports Markdown.

One of the beauties of open-source software is usually flexibility.

BookStack does include a way to customize your text and entries. Head over to Settings, Customization. Scroll down to “Custom Head HTML Content”

Here you can add some CSS to style your pages as you wish.

First of all, I wanted to change the font. This is pretty straightforward.

<link href="https://fonts.google.com/noto/specimen/Noto+Serif" rel="stylesheet">
<style>
h1, h2, h3, h4, body, button, input, select, label, textarea {
  font-family: "Noto Serif", serif; font-size:1.2em; color: black; </style>
<style>
.page-content h1 { font-size: 2rem; }
.page-content h2 { font-size: 1.8rem; }
.page-content h3 { font-size: 1.6rem; }
.page-content h4 { font-size: 1.4rem; }
.page-content h5 { font-size: 1.3rem; }
.page-content h6 { font-size: 1.15rem; }
</style>

This sets the font to “Noto”, which is a serif Google Font. By including elements (h1,h2…), everything will be in the Noto font

The bottom section controls the header size, with each level being a bit smaller than the preceding level.

Great so far. But what about the outline?

To structure the outline, I added the following:

<link href="https://fonts.google.com/noto/specimen/Noto+Serif" rel="stylesheet">
<style>
h1, h2, h3, h4, body, button, input, select, label, textarea {
  font-family: "Noto Serif", serif; font-size:1.2em; color: black;
}
.CodeMirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
  font-family: monospace;
}
    ol {
       list-style: upper-roman; style="margin-bottom: 40px;margin-right: 40px;"
      } 
    ol > li >ol {
       list-style: upper-alpha; style="margin-bottom: 40px;margin-right: 40px;"
    }
    ol > li > ol > li > ol {
       list-style: decimal ; style="margin-bottom: 100px;margin-right: 40px;"
    }
    ol > li > ol > li > ol  li > ol {
       list-style: lower-alpha ; style="margin-bottom: 40px;margin-right: 40px;"
      }
    ol > li > ol > li > ol > li > ol  li > ol {
       list-style: lower-roman ; style="margin-bottom: 40px;margin-right: 40px;"
      }
</style>
<style>
.page-content h1 { font-size: 2rem; }
.page-content h2 { font-size: 1.8rem; }
.page-content h3 { font-size: 1.6rem; }
.page-content h4 { font-size: 1.4rem; }
.page-content h5 { font-size: 1.3rem; }
.page-content h6 { font-size: 1.15rem; }
</style>

This adds the outline (in Markdown, the ordered list) that I need.

Looking better, but…

The lines are too close together. There is no visual break between each element.

Back to Customizing.

I add:

li {
margin: 1em 0;
}

to each ordered outline. This creates visual space between each item. So, my customization now looks like this:

<link href="https://fonts.google.com/noto/specimen/Noto+Serif" rel="stylesheet">
<style>
h1, h2, h3, h4, body, button, input, select, label, textarea {
  font-family: "Noto Serif", serif; font-size:1.2em; color: black;
}
.CodeMirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
  font-family: monospace;
}
    ol {
       list-style: upper-roman; style="margin-bottom: 40px;margin-right: 40px;"
      } 
      li {
        margin: 1em 0;
        }
    ol > li >ol {
       list-style: upper-alpha; style="margin-bottom: 40px;margin-right: 40px;"
    }
      li {
        margin: 1em 0;
        }
    ol > li > ol > li > ol {
       list-style: decimal ; style="margin-bottom: 100px;margin-right: 40px;"
    }
      li {
        margin: 1em 0;
        }
    ol > li > ol > li > ol  li > ol {
       list-style: lower-alpha ; style="margin-bottom: 40px;margin-right: 40px;"
      }
      li {
        margin: 1em 0;
        }
    ol > li > ol > li > ol > li > ol  li > ol {
       list-style: lower-roman ; style="margin-bottom: 40px;margin-right: 40px;"
      }
      li {
        margin: 1em 0;
        }
</style>
<style>
.page-content h1 { font-size: 2rem; }
.page-content h2 { font-size: 1.8rem; }
.page-content h3 { font-size: 1.6rem; }
.page-content h4 { font-size: 1.4rem; }
.page-content h5 { font-size: 1.3rem; }
.page-content h6 { font-size: 1.15rem; }
</style>

This is looking better. I may have more work to do, but I’m happy with the results so far.