In some cases it might be desirable to customize the styling of Pootle to fit in with your other websites or other aspects of your identity. It might also be required to add a common header or footer for proper visual integration. Before you start editing the CSS of Pootle, have a look at our styling guidelines for developers.
Custom changes are kept separate from the distributed files, so that upgrades are unlikely to affect your customizations.
Warning
After doing any customization, please execute the following commands to collect and build static content such as images, CSS and JavaScript files that are served by Pootle server.
$ python manage.py collectstatic --noinput --clear
$ python manage.py assets build
Edit the file in static/css/custom/custom.css to override any rules from the main CSS file. That CSS file will be included in every page.
Any custom images can be placed in static/css/custom/
. The
custom.css
file can refer to it directly by name, including any paths
relative to static/css
directory, for example:
url('custom/image.png')
to refer to static/css/custom/image.png
.
The favicon can be customized by editing the base template directly templates/base.html). This has the downside that you have to reimplement this on upgrades if the base template is replaced. Alternatively the base template can be overridden as a whole with the favicon customized to your needs (see the next section).
In case you need to change a template, copy it into templates/custom/ with the same name as it had before. Make sure that you have a complete copy of the template and then make any changes you require.
If you edit any templates, keep in mind that any changes to the text could result in untranslated text for users of the non-English user interface.
On upgrades, it would be ideal to ensure that any changes to the distributed templates are reflected in your customized versions of them, to ensure all features and improvements are present.