Branding

maykin-common is typically used in Open Source products developed by Maykin. We provide some tooling to add branding information to the footer of the admin to make it clear which product is being used. Additionally, when the product is repackaged/redistributed under a custom name, the branding for this custom name can also be added.

Added in version 0.20.0.

Enable branding

Settings

Configuration is primarily done through Django settings:

from maykin_common.branding import ProductDefinition

MKN_BRANDING_PRODUCT_DEFINITION = ProductDefinition(
    name="Maykin Common",
    hyperlink="https://github.com/maykinmedia/django-common",
    logo_path="maykin_common/ico/favicon-32x32.png",
)

MKN_BRANDING_DERIVED_PRODUCT_DEFINITION = ProductDefinition(
    name="Derived Common",
    hyperlink="https://github.com/maykinmedia/django-common",
    logo_path="maykin_common/ico/favicon-32x32.png",
)

where only the name is a required parameter. If URLs are provided, the name will link to them.

Logo configuration

Optionally, you can display a small favicon sized logo in front of the product name. This image should not be bigger than 32x32.

For the developers of the product, we recommend checking in the logo in one of your staticfiles directories, and configuring logo_path accordingly.

For derived products, we recommend specifying the URL of a logo image via logo_url. You can make sure the logo exists in the settings.MEDIA_ROOT and configure it as /media/path/to/logo.png, or host it somewhere else and provide the fully qualified URL, e.g. https://example.com/my-awesome/logo.svg.

Warning

When hosting the logo externally, you may need to tweak the Content-Security-Policy configuration to make sure the browser loads the logo.

Templates

In your project, define a custom template for the admin base site: templates/admin/base_site.html and override the footer block:

{# Django 5.2 puts this block inside the <footer id="footer"> element #}
{% block footer %}
    {% include "maykin_common/includes/footer.html" with user=user only %}
{% endblock %}

This will emit the branding (if configured) and version information.

Styling

Styling options are limited, though you can define CSS variables for the logo sizes:

--mkn-product-branding-logo-maykin-max-block-size: Maximum block size (height, in this case) of the Maykin logo. Defaults to 20px.
--mkn-product-branding-logo-favicon-max-block-size: Maximum block size (height, in this case) of a product favicon logo. Defaults to 24px.

Reference

class maykin_common.branding.ProductDefinition(name: str, hyperlink: str = '', logo_path: str = '', logo_url: str = '')

Metadata about the product, typically displayed in the admin footer.

hyperlink: str = ''

Optional hyperlink, will make the product name clickable if provided.

For the white-label products, this should point to the (Github) repositories.

logo_path: str = ''

(Relative) path to the static asset of the favicon logo.

The path is fed into the {% static %} template tag, so the asset should be included in your staticfiles. The file should be favicon-sized. CSS will apply maximum block sizes too.

logo_url: str = ''

URL to the logo asset/icon.

Can be a fully qualified URL, or an absolute path to an asset hosted by the application. Note that you may need to tweak your Content-Security-Policy if using a URL.

If both the logo URL and path are specified, the URL has precedence.

name: str

Name of the product.

Examples: Open Zaak, Open Inwoner, Open Formulieren… but this can also be the name of a derived product (e.g. PodiumD Formulier).