Home A - Z
Menu

An Otter Wiki

Blame

378010 Ralph Thesen 2025-12-12 22:58:48
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
1 
# Customization
2
3
## Theme Customization
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
4
5
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
If you've made improvements that you'd like to share, don't forget, pull requests are always welcome. Or upon up an [issue](https://github.com/redimp/otterwiki/issues) post your code and a screenshot.
8
9
Check [otterwiki/docs/custom_css_example](https://github.com/redimp/otterwiki/tree/main/docs/custom_css_example) on github for ready-to-test examples.
10
378010 Ralph Thesen 2025-12-12 22:58:48
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
11
### `custom directory`
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
12
f6e6a2 Ranbeer Malhotra 2025-07-28 13:34:33
Update customization.md: add a side note Update the title to "custom directory" since a single directory is mounted in the example below
13
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:
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
14
15
```yaml
16
version: '3'
17
services:
18
otterwiki:
19
image: redimp/otterwiki:2
20
restart: unless-stopped
21
ports:
22
- 8080:80
23
volumes:
24
- ./app-data:/app-data
25
# a custom local directory with a custom.css and a custom.js
26
- ./custom:/app/otterwiki/static/custom
27
```
28
378010 Ralph Thesen 2025-12-12 22:58:48
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
29
### Examples
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
30
378010 Ralph Thesen 2025-12-12 22:58:48
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
31
#### Serif Pages
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
32
33
This is an example custom.css that uses the serif font
34
`Baskervville` for the content rendered in the page.
35
36
```css
37
@import url('https://fonts.googleapis.com/css2?family=Baskervville');
38
39
.content > .page {
40
font-family: 'Baskervville', serif;
41
font-weight: 400;
42
}
43
```
44
2e88a6 Ralph Thesen 2024-03-23 23:06:53
reorganized customization
45
![](/Customization/a/baskervville-page.png)
f6e6a2 Ranbeer Malhotra 2025-07-28 13:34:33
Update customization.md: add a side note Update the title to "custom directory" since a single directory is mounted in the example below
46
47
> [!NOTE]
48
> 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
378010 Ralph Thesen 2025-12-12 22:58:48
Added documentation for HTML_EXTRA_HEAD and HTML_EXTRA_BODY
49
50
## Tweaking the HTML head and body
51
52
The HTML body and head of every html rendered can be tweaked via `HTML_EXTRA_HEAD` and `HTML_EXTRA_BODY`.
53
54
This can be used for small tweaks, e.g. adding the "Fork me on github" ribbon:
55
56
```yaml
57
services:
58
otterwiki:
59
image: redimp/otterwiki:2
60
restart: unless-stopped
61
ports:
62
- 8080:80
63
environment:
64
HTML_EXTRA_HEAD: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
65
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>
66
volumes:
67
- ./app-data:/app-data
68
```
69
70
![](/Customization/github-ribbon.jpg)