Mot-clé - work in progress - Les ateliers du klafoutis

Par Kozlika le mercredi 18 février 2026, 06:38 - Carnet de notes

Le déménagement d’un blog (ou sa copie) est, dans le beau pays de Théorie, plutôt facile. On exporte les billets et les médias via l’item Import / Export puis on les importe sur le blog cible grâce au même item.

Attention cependant, il peut y avoir des ajustements à faire, comme ce fut le cas pour moi. J’ai créé un environnement de travail sur mon ordinateur pour poursuivre le travail de rafraîchissement du thème Ductile en m’appuyant sur les billets et médias du blog de démo des thèmes pour Dotclear.

Mon Dotclear local est basique, sans ajout d’aucun plugin, afin de reproduire l’environnement d’un·e utilisateurice venant tout juste d’installer son bébé. Or le blog de démo est augmenté du plugin MarkdownSyntax, qui comme son nom l’indique permet la saisie des billets en syntaxe Markdown. Il en est résulté que les billets écrits dans cette syntaxe sur le blog de démo sont arrivés dans mon blog local restitués en texte brut au lieu de la mise en forme qu’elle permettait.

Autre souci, plus difficile à gérer si l’on a beaucoup de médias dans le blog : les constructions respectives des URLs menant vers les médias peuvent différer entre le blog d’origine et le blog cible. Ainsi, dans mon blog local l’url relative est /dotclear/public/<chemin_du_fichier> alors que sur le blog de démo c’est /blogfiles/dc-demothemes/public/<chemin_du_fichier>. Plus aucune image ne s’affichait donc sur mon blog local. En l’occurrence, comme c’est un petit blog j’ai pu corriger les chemins à la main mais sur un gros blog cela peut demander un gros travail d’aller tout corriger…

Je ne sais pas s’il serait possible d’améliorer le plugin Import / Export pour faciliter ce type de tâche mais ce serait une amélioration non négligeable. Par exemple on pourrait offrir le choix entre sauvegarde simple et export en vue de migration avec un champ dédié pour le nouveau public_url ?

Rafraîchissement de Ductile : phase 1

Par Kozlika le lundi 16 février 2026, 10:16 - Carnet de notes

Histoire de me remettre dans le bain, je replonge dans le thème Ductile pour le rafraîchir. Ceci est un billet que je compléterai au fil de mon travail, une sorte de journal de bord, tant pour redécouvrir la mécanique des thèmes de Dotclear que réveiller ma mémoire côté CSS… et me remettre progressivement à jour de mes connaissances.

Les retours et suggestions sont évidemment plus que bienvenus dans les commentaires.

Environnement de travail

Pour pouvoir tester ici, j’ai commencé par dupliquer le thème Ductile. C’est sur cette copie que je vais travailler. Dans le fichier _define.php, je remplace le nom créé automatiquement (Ductile (copie)) par Ductile 2026.

Work in progress en live

On peut comparer ancienne et nouvelle version grâce au plugin Arlequin installé ici qui permet d’afficher un bloc « Changer le thème » dans le sidebar. L’ancienne continue de s’appeler Ductile et la nouvelle se nomme Ductile 2026.

Modifs CSS non visibles

Fusion des règles css dans un seul fichier : au lieu des include, copie-colle les règles dans des @layer {}.
Ajout de variables pour les fontes.

Modifs visibles

remplacement du logo par le même mais en svg et sombre pour rééquilibrer sombre/clair dans l’entête ;
remplacement des stickers png par des sitckers svg, même fond que la feuille ;
sur mobile, fond du titre du blog en bleu ;
famille de caractères : conservation du serif, mais remplacée par une serif dite transitionnelle ;
taille de base des caractères un peu augmentée (de 100% à 105%) ;
taille du titre du blog légèrement augmentée aussi et un peu plus d’espace au-dessus de la baseline ;
suppression des text-shadow en différents endroits (titre du blog
augmentation de l’interlignage de base de 1.5 à 1.6 ;
réduction des marges de côté pour la zone principale sur les écrans de largeur supérieure à celle des tablettes ;
réduction légère de la taille des titres de billet, de 2.5em à 2.25em ;
augmentation de la marge entre les billets (dans les présentations en liste) à 2em au lieu de 1em ;
appels de note en bleu, en gras, un peu décollés du texte ;
notes : filet de séparation un poil plus large ; marge au-dessus un peu plus grande ;
augmentation légère de l’espace intérieur des boîtes de la sidebar ;
suppression du hideux dégradé du bandeau de navigation de billet en billet ;
bandeau de navigation : précédent à gauche et suivant à droite au lieu des deux centrés ;
correction du débordement du post-info lorsque le nom de la catégorie ou du tag est trop long ;
soulignement des liens un poil moins collé, grâce à text-underline-position: from-font; et text-underline-offset: .2em; ;
remplacement du set d’icônes (et passage au format svg) ;
ajout de styles pour l’élément aside.

Les ateliers du klafoutis