Blame
b59643 | Ralph Thesen | 2024-03-23 14:47:34 | 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 | ||||
9 | ## `custom.css` | |||
10 | ||||
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 directories into the container, for example with a `docker-compose.yaml` like this: | |||
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 | 43 | ![](/Customization/a/baskervville-page.png) |