• Members 1 post
    Nov. 24, 2020, 7:32 p.m.

    I've been working on a capstone project with a team for a forum website and we've been making changes to the code base. We have a development server on Digital Ocean and we learned that we can make JS changes live on the server by running gulp build and copying over the local static folder to the server, and then running a couple commands when SSH in the server folders. But for making HTML and CSS changes, how can we apply them to the server? Are there different commands to follow?

  • Nov. 24, 2020, 7:47 p.m.

    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.