Chapter 4
Styling the Output
Most of the colors used in the template are defined through CSS variables, which
can be customized directly in the configuration file.
An example how you could change the output shows the following CSS rule. Add the following text to your config.cfg configuration file:
\Css{
body{
--maintoc-background: \#f0f0f0;
--maintoc-color: \#00AFA0;
}
}
The \Css command allows you to insert raw CSS rules directly into the
generated CSS file. The content is not read verbatim, so we need to escape
special characters such as # or %. Otherwise, they would cause compilation
errors. In this case, we need to escape the hash sign used in hexadecimal color
codes.
Css variables are prefixed with – and can be set in a selector that is active in a whole document, such as body. In this example, we set the background and text color of the navigation menu.
Supported variables for adjusting the page design are following:
- maintoc
-
the navigation menu containing the document’s table of contents
- hamburger
-
the button used to open the hidden (collapsed) menu
- header
-
the top section of the document, typically containing the title or site navigation
- footer
-
the bottom section of the document, usually used for metadata or additional links
For each of these properties, you may define both the foreground and background colors by appending -color and -background to the property name.