Translate Toolkit & Pootle

Tools to help you make your software local

User Tools

There is some duplication of content and ideas between this page and this one. It should be unified at some stage.

Style customisation in Pootle

In some cases it might be desirable to customise 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.

Here are some ideas on how you can do that:

Pootle 2.2

Custom changes are kept separate from the distributed files, so that upgrades are unlikely to affect your customisations.

Customising CSS

Edit the file in html/custom/custom.css to override any rules from the main CSS file. That CSS file will be included in every page.

Customising images

Any custom images can be placed in html/custom. The custom.css file can refer to it directly by name, without having to specify a path, since it is in the same directory.

Customising the favicon

The favicon can be customised 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 customised to your needs (see the next section).

Customising templates

If 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.

On upgrades, it would be ideal to ensure that any changes to the distributed templates are reflected in your customised versions of them, to ensure all features and improvements are present.

Pootle 2.1 and earlier

Complete restyling

If you want to make big changes to Pootle's styling, you will probably create your own version of the CSS files. It is advisable to base your work on the CSS files shipped with your version of Pootle. These will provide optimum functionality and the best layout for most circumstances. If you do a completely new design, you will need lots of testing to ensure that things work well in all cases.

Styling won't change in major ways in bugfix releases of Pootle. Your work should be safe until the next upgrade to a release containing feature changes.

Small styling changes

If you only want to make some minor changes, include only these override rules in a separate CSS file. Then edit templates/base.html to include the extra CSS file. Include it below the line that contains

{% endblock css %}