Habillage¶

Canaille est fourni avec un thème par défaut basé sur Fomantic UI, mais n’importe quelle partie de l’interface utilisateur peut être légèrement modifiée, ou bien complètement ré-écrite si besoin.

Patrons personnalisés¶

Pour utiliser un thème personnalisé, pointez le paramètre de configuration THEME vers un répertoire dans lequel sont enregistrés vos patrons.

Dans ce répertoire, créez de nouveaux fichiers pour les patrons que vous voulez remplacer ou affiner. Une liste exhaustive des patrons est disponible dans la référence. Vous devez respecter les chemins des patrons. Par exemple, si vous souhaitez personnaliser la page « À propos », vous devez le faire dans un fichier core/about.html. Vous pouvez hériter du patron original en utilisant la directive Jinja extend.

core/about.html¶

{% extends "core/about.html" %}
{% import 'macro/form.html' as fui %}

{% block content %}
    Your custom content goes here
{% endblock %}

Feuilles de style personnalisées¶

Si vous souhaitez simplement utiliser votre feuille de style dans le thème par défaut, vous pouvez simplement l’insérer dans le patron base.html. Placez votre fichier dans un sous-répertoire static de votre thème, par exemple static/css/custom.css et référencez-le avec theme_static.

base.html¶

{% extends "base.html" %}

{% block style %}
    <link href="{{ theme_static("css/custom.css") }}" rel="stylesheet">
{% endblock %}

Développement¶

To write your custom theme and check how it is rendered, you can put the path to your theme in a .env file and run the Canaille development server, as described in the contributing guide

.env¶

 CANAILLE__THEME=/path/to/your/theme

Run the dev server¶

$ uv run devserver