Les ateliers du klafoutis

Le thème Ductile 2026 est prêt. Il fera partie de la distribution lors de la prochaine version de Dotclear, le 13 mai prochain. L’ancien Ductile sera supprimé des thèmes par défaut mais restera dans les thèmes disponibles sur votre installation. Libre à vous d’activer le nouveau via « Apparence du blog » ou de rester sur l’ancien.

L’activation de Ductile 2026 n’empêchera pas de revenir sur Ductile « tout court » si finalement vous préfériez l’ancien.

Comme la lectrice avertie l’aura subodoré à la lecture du billet précédent de ce matin, je vais poursuivre les travaux en parallèle avec Franck et pour ce faire, nous avons créé un dépôt de code commun et j’ai fait une installation sur mon ordinateur pour pouvoir récupérer ses modifs au fur et à mesure — et lui les miennes.

Il ne sera donc pas possible de voir les changements en live pour le moment. En revanche, je vais tâcher de continuer ici à indiquer au fur et à mesure ma liste en vrac des modifs. Elles seront d’ailleurs de deux ordres : les améliorations de l’existant (ce sera plutôt moi) et le configurateur (plutôt Franck).

Je remettrai le thème à jour ici quand nous aurons une version distribuable ou proche de la distribution.

Modifs de la phase 2

• Templates: il y avait un souci avec l’intégration de la description du blog dans l’entête, correction du template du top.
• Templates : la liste des billets d’une catégorie inclut ceux des sous-catégories éventuelles¹.
• Templates : réintégration des widgets blogcustom dans la sidebar.
• CSS : amélioration de l’affichage des images (petite réserve tout autour, fond légèrement grisé).
• CSS : correction du chapo qui était collé au premier paragraphe du corps du texte.
• CSS : présentation du code et texte préformaté, correction pour ne pas souligner chaque ligne en cas de pre + code.
• CSS : archives : la présentation en arbre des catégories et sous-catégories est désormais en full css sans images.
• CSS : distribution des blocs d’archives par catégorie et par tags améliorée.
• CSS : améliorations diverses et variées du rendu sur mobiles et petits écrans.
• CSS : les listes sont en pure CSS, sans images.
• CSS : présentation des blocs aside ainsi que des details/summary.
• CSS : styles pour le mode sombre.
• Couleurs : harmonisation couleur du fond des stickers, des icônes de flux et des boutons de prévisu/validation, suppression des dégradés.
• Images : optimisation, passage en svg chaque fois que possible.
• Tech : regénération du screenshot (petite image de prévisu du thème pour l’admin).

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.

On peut avoir envie d’insérer des images qui ne sont pas les nôtres dans ses billets. C’est tout à fait possible mais il faudra s’assurer que les droits le permettent et d’en créditer l’auteure.

Pour la nouvelle année, voici un nouveau thème. Don Carlo, habillé de rouge et noir, est construit sur une base assez conventionnelle, mais avec quelques améliorations (du moins à mes yeux) du traitement des différents contextes par rapport aux thèmes habituels.

Et si on disait que c’était le prin­temps ? Je viens de dépo­ser le thème Plop sur Dotad­dict. Je l’avais réa­lisé pour le pro­jet d’évo­lu­tion de Dot­clear 1.4, mais puis­que ce pro­jet ne verra jamais le jour, et que de tou­tes façons j’avais l’inten­tion de le publier pour les deux ver­sions, en voici l’adap­ta­tion pour Dot­clear 2.