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 | ||||
| f6e6a2 | Ranbeer Malhotra | 2025-07-28 13:34:33 | 9 | ## `custom directory` |
| b59643 | Ralph Thesen | 2024-03-23 14:47:34 | 10 | |
| f6e6a2 | Ranbeer Malhotra | 2025-07-28 13:34:33 | 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 | 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 |  |
| f6e6a2 | Ranbeer Malhotra | 2025-07-28 13:34:33 | 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 |