Assuming you are using
misago-docker, you can use the "override" feature.
misago-docker comes with empty
theme directory that can be used to override JS/CSS and HTML files.
How to customize HTML?
Misago is so called hybrid application. This means that final UI that users see in the browser is result of two things:
- HMTL templates used for server-side rendering
- React.js application that loads as soon as user enters the site and replaces parts of server-side rendered HTML with custom logic
How to customize server-side rendered template?
First, find the template file you wish to customize. Here's source of all templates Misago uses as of 0.27.
Once you've found template file, copy it to
theme/templates directory for customization. Remember to template's path within
theme/templates has to match original path within
Lets say you want to display custom HTML above the navbar. Misago comes with empty template named jumbotron.html for this purpose.
Path to original template looks like this:
So override template should be located in
Remember to restart misago's docker service to reload template changes:
./appctl restart or
docker-compose restart misago
How to customize client-side rendered React components?
frontend application's JS, build new JS files and then copy them from local
theme/static/misago to override default JS files, then rebuild Misago's docker instance.
How to customize CSS?
There are two paths available for customizing CSS:
frontend application's CSS, build new assets and upload them to
theme/static/misago to override default files, then rebuild Misago's docker instance.
- Use admin panel to create new theme that's not inheriting from default theme, then upload custom CSS file to this theme using assets admin. Then mark theme as active.
Both paths apply for other frontend assets like images and font files.