Home A - Z
Menu

An Otter Wiki

Blame

b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
1 
# Theme Customization
2
3
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.
4
5
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.
6
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.
8
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
9
## `custom directory`
b59643 Ralph Thesen 2024-03-23 14:47:34
added how-to on customize the otterwiki theme
10
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
11
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
12
13
```yaml
14
version: '3'
15
services:
16
otterwiki:
17
image: redimp/otterwiki:2
18
restart: unless-stopped
19
ports:
20
- 8080:80
21
volumes:
22
- ./app-data:/app-data
23
# a custom local directory with a custom.css and a custom.js
24
- ./custom:/app/otterwiki/static/custom
25
```
26
27
## Examples
28
29
### Serif Pages
30
31
This is an example custom.css that uses the serif font
32
`Baskervville` for the content rendered in the page.
33
34
```css
35
@import url('https://fonts.googleapis.com/css2?family=Baskervville');
36
37
.content > .page {
38
font-family: 'Baskervville', serif;
39
font-weight: 400;
40
}
41
```
42
2e88a6 Ralph Thesen 2024-03-23 23:06:53
reorganized customization
43
![](/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
44
45
> [!NOTE]
46
> 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