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 misago/templates.

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: misago/templates/misago/jumbotron.html
So override template should be located in theme/templates/misago/jumbotron.html

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?

Customize frontend application's JS, build new JS files and then copy them from local misago/static/misago to 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:

• Customize 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.