2025-12-12 22:58:48Ralph Thesen:
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
customization.md ..
@@ 1,4 1,6 @@
-
# Theme Customization
+
# Customization
+
+
## Theme Customization
An Otter Wiki was not designed with the idea that user-defined topics might become necessary. However, since there is a need, a way to modify the theme has been added.
@@ 6,7 8,7 @@
Check [otterwiki/docs/custom_css_example](https://github.com/redimp/otterwiki/tree/main/docs/custom_css_example) on github for ready-to-test examples.
-
## `custom directory`
+
### `custom directory`
With version **2.3.1** the template loads a `custom.css` and a `custom.js` which are empty by default. You can mount the directory into the container, for example with a `docker-compose.yaml` like this:
@@ 24,9 26,9 @@
- ./custom:/app/otterwiki/static/custom
```
-
## Examples
+
### Examples
-
### Serif Pages
+
#### Serif Pages
This is an example custom.css that uses the serif font
`Baskervville` for the content rendered in the page.
@@ 44,3 46,25 @@
> [!NOTE]
> In case of a local deployment the browser might cache the web app, so users are recommended to clear cookies and site data if the changes to `custom.js` or `custom.css` are not visible immediately even after restarting the docker
+
+
## Tweaking the HTML head and body
+
+
The HTML body and head of every html rendered can be tweaked via `HTML_EXTRA_HEAD` and `HTML_EXTRA_BODY`.
+
+
This can be used for small tweaks, e.g. adding the "Fork me on github" ribbon:
HTML_EXTRA_BODY: <a class="github-fork-ribbon right-bottom" href="https://url.to-your.repo" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
