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 |  |