Les ateliers du klafoutis

Adèle

Kozlika — Sun, 29 Mar 2026 08:37:00 +0200

Voici un prochain thème pour Dotclear. Il s’appelle Adèle et est inspiré du thème de l’Auberge des blogueurs. Il sera livré dans les jours prochains, Franck et Philippe mettent la dernière main au configurateur.

Il ne nécessitera pas de plugin impératif mais le thème est prêt pour l’utilisation de Author Mode, Contact Me et Color Scheme Switcher.

Il est doté d’une variation sombre, qui s’affichera selon les réglages système des visiteurs et visiteuses du site.

Réglages et caractéristiques

Le configurateur permettra différents réglages :

La couleur des entêtes varie selon la catégorie ou l’auteurice.
L’image de bannière est remplaçable, le thème est livré avec un assortiment mais on peut choisir une autre image dans sa médiathèque.
L’accueil présente une « galerie » de billets, on peut choisir de n’afficher que le dernier, en entier.
Amorces : dans la présentation en galerie, on peut désigner des catégories pour lesquelles l’amorce texte sera remplacée par la première image.

Voici une galerie présentant différents réglages et bannières. Vous pouvez la parcourir en cliquant sur la première image puis en utilisant les flèches droite et gauche du clavier pour passer de l’une à l’autre.

Galerie

Par défaut : bannière Audierne et set de couleurs douces (mode clair).

Bannière Abstrait, accueil solo (mode sombre).

Bannière Chardons, set de couleurs vives (mode clair).

Bannière Hoorn, set de couleurs douces (mode clair).

Avec le choix d’une image personnelle (mode sombre).

Bannière Écrire, set de couleurs vives (mode clair).

Bannière Printemps, set de couleurs douces, accueil solo (mode clair).

Bannière Tang, set de couleurs douces (mode clair).

Bannière Sunset (mode sombre).

Bannière Oiseau, set de couleurs douces, accueil solo (mode clair).

Tester

Pour voir le thème en action, choisissez Adèle dans le menu Changer de thème ou cilquez sur ce lien. Pour le voir en mode sombre, actionnez le bouton correspondant dans le menu Mode clair/sombre. Merci de me faire part des anomalies que vous pourriez rencontrer ou vos suggestions d’amélioration.

Générer automatiquement des palettes via CSS avec OKLCH

Kozlika — Sat, 28 Mar 2026 08:52:00 +0100

Nous sommes en train de mettre la dernière main à un thème pour Dotclear dérivé de celui que nous utilisions sur le site de l’Auberge des blogueurs. Billet de présentation et démo ici.

Le problème

À l’auberge, il était facile d’attribuer des couleurs différenciées (en l’occurrence selon l’auteurice) puisque nous disposions de leur liste. Pour chaque nouvelle autrice ou auteur on indiquait sa couleur et voilà.

Ici, il s’agit d’un thème distribué : je ne connais pas le nombre de catégories, ni leur nom, ni leur identifiant. Idem pour les auteurices. Par ailleurs, nous souhaitions que le ou la proprio du blog puisse choisir une ambiance dominante de couleurs vives ou de couleurs douces, en harmonie entre elles et reconnaissables si l’on passe d’une gamme à l’autre. Je ne pouvais donc pas préciser telle couleur pour telle catégorie (ou auteurice).

Ah et puis il fallait une palette pour le mode dark aussi.

OKCLH à la rescousse

Dans mes découvertes récentes après mon interruption de veille des techno web depuis cinq ou six ans, je suis tombée sur le modèle de couleurs OKLCH. Pour ce que je cherchais à faire c’est idéal.

Vous pouvez aller lire l’article en lien ci-dessus pour des informations plus complètes que je vais simplifier ici. Dans oklch, l représente la luminosité, c la chromie, h la teinte (h pour hue). Selon le but recherché, en conservant un ou deux des paramètres et en faisant bouger le troisième, on obtient des gammes visuellement cohérentes. Je vous invite à aller jouer avec les curseurs pour vous en rendre compte.

J’ai donc défini quatre principes :

Un point de départ avant calcul propre à chaque catégorie : la teinte (h) 155.
Pour les couleurs douces, une luminosité (l) à 0.75 et une chromie (c) à 0.06 (résultat du point de départ).
Pour les couleurs vives, une luminosité (l) à 0.48 et une chromie (c) à 0.15 (résultat du point de départ).
Pour les couleurs du mode dark, je mélange les couleurs douces avec un gris-bleu très sombre (ma couleur de fond dans ce mode).

Une fois cela établi, le seul paramètre que je fais bouger c’est celui de la teinte, quelle que soit la gamme.

Le code

Pour faire varier la teinte, je m’appuie sur l’identifiant numérique de la catégorie, dont je me sers pour « faire bouger le curseur » avec des pas de 55 pour que les couleurs ne soient pas proches les unes des autres (donc un step avec juste le numéro de la catégorie ne serait pas suffisant) et pas un nombre qui ferait retomber trop vite sur les mêmes couleurs (donc pas un nombre entier d’une division de 360). Voici comment « bouge » la valeur de hue :

--hue: calc(h + (55 * id_de_la_cat));

Je ne détaille pas comment récupérer la valeur numérique de la catégorie¹, c’est trop spécifique à Dotclear mais vous pourrez toujours télécharger le thème et en étudier les sources si vous en avez besoin². Si bien que pour chaque élément (ici ma_div) possédant un identifiant numérique on aura trois variables à utiliser selon les contextes :


.ma_div {
  --hue: calc(h + (55 * id_de_la_div));

  /* gamme douce */
  --specific-color-muted: oklch(0.75 0.06 var(--hue)); 
  /* gamme vive */
  --specific-color-vibrant: oklch(0.48 0.15 var(--hue));
  /* gamme dark mode */
  --specific-color-dark: color-mix(oklch(0.75 0.06 var(--hue)), var(--body-bg));
}

/* affectation selon le contexte */
.muted .ma_div {
    --specific-color: --specific-color-muted;
  }
.vibrant .ma_div {
    --specific-color: --specific-color-vibrant;
  }
.dark .ma_div {
    --specific-color: --specific-color-dark;
  }

/* Utilisation */
.ma_div header {
  background-color: var(--specific-color);
  color: oklch(from var(--specific-color) round(1.21 - L) 0 0);
}

Note : la dernière ligne est la cerise sur le gâteau de ce qui est possible avec OKLCH, calculer automatiquement le texte noir ou blanc selon la couleur de fond. Merci Kevin Hamer .

J’ai fait un code pen sur ce principe, bien que je n’ai pas pu reproduire la récupération de la valeur de l’identifiant d’une catégorie avec les seuls outils proposés mais ça peut vous donner une idée en point de départ de vos propres expérimentations. Aussi, je ne sais pas pourquoi mais les couleurs sont vachement plus moches sur cette démo qu’en vrai !

Pour le moment, seuls les navigateurs chromium acceptent de traiter un nombre dans un attribut comme une valeur numérique, ce qui permettrait d’utiliser directement attr(data-cat_id type(<number>). Comme ça ne pouvait être utilisé partout, j’ai eu recours à un hack en introduisant la définition de la variable dans un attribut style inline. Spa beau mais ça marche en attendant que tous les navigateurs sachent interpréter un attribut en number. ↩︎
Parution dans les jours qui viennent et il y a un billet ici. ↩︎

Valadon

Kozlika — Tue, 10 Mar 2026 13:49:00 +0100

Un nouveau thème pour Dotclear, plutôt destiné aux diaristes je pense. Il est bien entendu adaptable sur toutes les tailles d’écran et également en fonction des préférences système de vos visiteuses et visiteurs pour alterner les modes clair/sombre selon l’heure.

L’image en exergue est le tableau « La Chambre bleue », de Suzanne Valadon, qu’elle a peint en 1923. À son sujet, vous pouvez lire par exemple cet article de Phalène ou le dossier ressources que le Centre Pompidou lui a consacré.

J’aime aussi beaucoup l’affiche que Solidaires en a faite.

Voici une petite galerie du thème avec différentes images et différents réglages. Les deux premières sont les captures du thème tel qu’il est sans personnalisations.

Configuration (optionnelle)

Le thème est utilisable tel quel ou personnalisable via son configurateur, qui permet :

De changer l’image mise en valeur dans la bannière.
De modifier le texte qui se situe dans le cartouche sous cette image, avec lien possible, ou de laisser le cartouche vide.
De choisir une autre couleur d’accompagnement pour le mode clair et/ou le mode sombre.

Si vous n’utilisez pas l’une des couleurs prédéfinies proposées dans le configurateur, faites attention à ce que le contraste résultant de ce choix soit suffisant pour ne pas gêner la lecture. Un lien vers un outil de vérification figure dans les notes au bas de cet article.

À savoir

Sidebar

Les widgets sont tous situés en bas des pages. Ceux rangés dans « Volet de navigation » et « Volet d’extra » sont affichés en boîtes encadrées, ceux placés dans « Volet supplémentaire » sont intégrés au footer. Sur mobile ces blocs sont repliés.

Menu simple

Si le nombre des éléments du « Menu simple » (partie droite de la bannière) est supérieur à quatre, seuls les trois premiers s’affichent, une flèche permet de dérouler la suite.

Pour le voir en action si ça n’est pas celui qui s’affiche chez vous cliquez ici ou choisissez-le via le menu Changer le thème. Il sera également sur le blog de démo de Dotclear incessamment sous peu, dès que je l’aurai déposé (dans les tout prochains jours).

Notes et crédits

Le style appliqué aux boîtes de bas de page lorsqu’elles sont repliées est inspiré de ce tutoriel de Geoff Graham sur CSS-tricks.
La taille des titres varie en fonction de la largeur d’écran. Je me suis servie de cet outil pour les formules magiques.
Les icônes ont été puisées sur icones.js et sur CSS-shape.
Les valeurs de contraste ont été vérifiées grâce à Contrast Finder, un outiil qui permet non seulement la vérification mais aussi des suggestions si le contraste est insuffisant.
Les petits coins des encadrés, en pur CSS, sont dérivés de ce code pen.

Ductile 2026 v1.0

Kozlika — Sun, 08 Mar 2026 13:40:00 +0100

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.

Aperçu du thème, page d’accueil. Cliquez sur l’image pour la voir en plus grand.

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

Rafraîchissement de Ductile : phase 3

Kozlika — Fri, 27 Feb 2026 13:33:00 +0100

Ductile est installé et prêt à être testé sur ce blog. Si ça n’est pas celui qui s’affiche sur votre écran, vous pouvez le sélectionner dans la boîte de menu « Changer le thème » ou en cliquant sur ce lien. Une boîte permet aussi de tester les modes clair et sombre, quelle que soit l’heure.

Si vous croisez un bug, merci de le signaler dans les commentaires de ce billet ou d’ouvrir un ticket sur le dépôt.

Rafraîchissement de Ductile : phase 2

Kozlika — Wed, 18 Feb 2026 10:40:00 +0100

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

C’était d’ores et déjà possible via un réglage des paramètres du blog, checkbox Inclure les sous-catégories dans la page des catégories et dans les flux de billets pour une catégorie mais c’est ici en dur parce que neuf utilisateurices sur dix ne savent même pas que ce réglage existe et qu’il me semble que le texte “Filtrer par sous-catégorie” au lieu de l’actuel “Sous-catégories” est plus clair. ↩︎

Pense-bête pour déménagement de blog

Kozlika — Wed, 18 Feb 2026 06:38:00 +0100

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

Kozlika — Mon, 16 Feb 2026 10:16:00 +0100

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.

Tests typographiques

Kozlika — Sun, 08 Feb 2026 08:52:00 +0100

Regroupement dans ce billet des principales balises d’enrichissement. Elles sont en partie présentées avec du faux texte. C’est une très ancienne tradition en vigueur dans l’imprimerie. Ce faux texte a ici été généré par un site dont je vous donne le lien ipsum generator, ce qui me permet du même coup de montrer la présentation des liens dans les billets.

Les outils de mise en forme typographique et sémantique

Les champs de saisie des billets sont surmontés d’une barre d’outils, comme dans les traitements de texte, permettant la mise en forme et la structuration. Selon vos choix opérés dans Mes préférences > Mes options, cette barre d’outil présentera de légères différences mais on retrouve peu ou prou les mêmes mises en forme possibles. Dans ce billet, un petit panorama des différents enrichissements, ce qui permet de visualiser en une seule page le rendu des différentes formes dans un thème en démonstration.

Les niveaux de titres (ici le niveau 3)

Lorsqu’on veut structurer un billet à l’aide d’intertitres, il est préférable d’utiliser la sémantique plutôt que modifier à la main l’aspect de ceux-ci. Ainsi, que votre billet soit restitué dans votre blog, dans un outil d’abonnement ou par des vocalisateurs d’écran, la hiérarchie sera restituée.

Dans Dotclear, le titre du blog est de premier niveau (<h1> en html) et le titre des billets sont de niveau 2 (tag <h2> en html). C’est pour cette raison que la petite barre d’outils au-dessus du champ de saisie du billet propose des niveaux de titre commençant au troisième (tag <h3> en html).

Titre de niveau 4

Fort logiquement, si on veut ajouter un niveau hiérarchique pour un intertitre, on utilisera les titres de niveau 4.

Titre de niveau 5

Et à encore un niveau en dessous, les titres de niveau 5. Il est important de ne pas rompre la hiérarchie : on n’utilisera pas un titre de niveau 5 en enfant direct d’un titre de niveau 3.

Enrichissements au sein du texte (gras, italique, etc.)

Entre parenthèses, le tag html correspondant mais vous n’avez pas besoin de le connaître si vous utilisez les barres d’outils.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. un passage en gras (<strong>). Integer mollis nonummy magna. Donec tristique lorem a pede. Nunc scelerisque sodales justo. Phasellus tempus eros. Praesent feugiat, mauris at malesuada blandit, justo nisl dignissim tortor, a ornare sem nulla in ante. Integer elit orci, tempor eu, rhoncus ut, tristique eu, tellus. quelques mots en italique. (<em>) Sed sodales, purus et luctus adipiscing, orci nulla scelerisque orci, at lobortis ante sapien vitae felis. Aenean varius tempor ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras malesuada commodo leo. des mots soulignés (<ins> senectus et netus et malesuada fames ac et des mots surlignés (<mark>). {{Une citation (<q>)}}

Pour finir, ~~une portion de texte barré~~ et un appel de note ¹.

Mise en forme de paragraphes

Paragraphes et retours à la ligne

Un paragraphe est créé lorsqu’on retourne à la ligne puis qu’on laisse une ligne vierge avant le paragraphe suivant. En html ça correspond à la balise <p>.

Le simple retour à la ligne (<br>) ne devrait être utilisé que dans des cas spécifiques, par exemple pour de la poésie :

C’est un trou de verdure où chante une rivière
Accrochant follement aux herbes des haillons
D’argent ; où le soleil, de la montagne fière,
Luit : c’est un petit val qui mousse de rayons.

Paragraphe de citation

Votre billet pourrait faire référence à un passage de texte, une citation longue d’un ou plusieurs paragraphes. On appelle ça un bloc de citation (<blockquote>). En ce cas, le rendu est celui-ci, variable bien sûr selon le thème choisi.

Morbi sed erat. Maecenas rutrum nunc a erat. Nam libero nunc, mattis eget, pellentesque nec, molestie in, wisi. Phasellus rutrum neque nec eros. Donec lectus lacus, lacinia in, lacinia non, semper eget, lectus. In hac habitasse platea dictumst.

Texte préformaté

On utilise les paragraphes de texte préformaté (<pre>) pour des usages particuliers, où le respect des éventuelles espaces successives est important. On l’emploie par exemple pour de la poésie ou de l’ASCII. Ci-dessous, un extrait d”Un coup de dés n’abolira jamais le hasard*, de Stéphane Mallarmé.

 Choit
           la plume
                     rythmique suspens du sinistre
                                                                         s'ensevelir
                                                    aux écumes originelles
           naguère d'où sursauta son délire jusqu'à une cime
                                                              flétrie
                           par la neutralité identique du gouffre

On rencontre aussi fréquemment cette mise en forme pour citer du code, comme dans l’exemple ci-dessous.

 figure {
    display: table;
 }
 figcaption {
    display: table-caption;
    caption-side: bottom;
 }

Les listes

Liste et sous-listes non-ordonnées (`<ul>`, `<li>`)

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
- Cras wisi sapien
- dictum id,
- fringilla ut,
- gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ul><li>)

Vivamus risus. Maecenas eros arcu, dictum ut, euismod et, dictum id, tellus. Etiam nonummy vestibulum mi. Donec leo dui, congue et, rhoncus eu, accumsan eu, arcu. Morbi id enim vel elit varius cursus.

Liste et sous-listes ordonnées (`<ol>`, `<li>`)

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
1. Cras wisi sapien
2. dictum id,
3. fringilla ut,
4. gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ol><li>)

Ci-dessus l’insertion d’une ligne horizontale. Que ce soit en wiki ou en markdown, le raccourci est le même, quatre traits d’union successifs sur une même ligne.

Affichage de code

  <div id="by-cat" class="arch-block">
    <h3>Par catégorie</h3>
    <ul>
      <li><a href="https://ateliers.klafoutis.org/category/Notes">Carnet de notes</a></li>
      <li><a href="https://ateliers.klafoutis.org/category/Billets-de-test">Billets de test</a></li>
      <li><a href="https://ateliers.klafoutis.org/category/Bonnes-pratiques-contenus">Bonnes pratiques pour les contenus</a></li>
      <li><a href="https://ateliers.klafoutis.org/category/Au-grenier">Au grenier (contenus obsolètes)</a>
        <ul>
          <li><a href="https://ateliers.klafoutis.org/category/Themes-dc1">Thèmes pour Dotclear 1</a></li>
          <li><a href="https://ateliers.klafoutis.org/category/Themes-dc2">Thèmes pour Dotclear 2</a></li>
          <li><a href="https://ateliers.klafoutis.org/category/Plugins">Plugins</a></li>
        </ul>
      </li>
    </ul>
  </div>

Blocs aside

Details et summary

Très utile par exemple pour afficher la transcription d’une vidéo, repliée par défaut ou une suite de contenus type accordéon ou un spoiler.

Transcription

On écrit toute la transcription. Comme elle peut être longue, c’est pratique de la replier.

Si c’est une suite, les blocs sont collés entre eux.

Texte toujours affiché

Et à l’intérieur on peut trouver un texte aussi long qu’on veut, ou même pourquoi pas une image.

Deux à la suite

On image qu’il pourrait y en avoir deux ou trois ou quatre…

D’ailleurs en voici un troisième

Merci c’était vraiment très intéressant.

J’espère n’avoir rien oublié dans les balises offertes par la syntaxe Markdown et non présentes en wiki ou en html.

Sous cet article, quelques commentaires et rétroliens pour en faire la démonstration de présentation.

Par exemple pour expliquer la suppression et qui permet de tester aussi cette mise en forme particulière. ↩︎

Utiliser des images de Wikimedia Commons

Kozlika — Sun, 01 Feb 2026 08:55:00 +0100

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.

Ici par exemple, une image puisée sur Wikimedia Commons, dont les images sont réutilisables. Sa fiche en précise les conditions d’usage. Je l’ai téléchargée, l’ai placée dans la médiathèque et renseigné les champs d’alternative et de description (qui viendra en légende) en recopiant les informations données dans la fiche.

Un stand de bouquiniste sur le quai de Montebello. Photo Benh Lieu Song, CC BY-SA 3.0. Source.

Une autre méthode consiste à ne pas télécharger l’image mais à l’insérer en utilisant la fonction d’insertion de media externe. Dans la fiche de Wikemedia Commons, il suffit de cliquer sur l’icône « Use this file on the web » pour obtenir le code html à insérer. Comme ci-dessous.

La place Nationale à Montauban, août 2023, photo Didier Descouens via Wikimedia Commons, CC BY-SA 4.0.

Réveil des ateliers

Kozlika — Sun, 01 Feb 2026 06:27:00 +0100

Je ranime ce blog pour bosser sur des thèmes. Je n’efface pas les billets anciens mais je les ai tous classés dans une catégorie « Grenier », pour mémoire.

Nonobstant, **tous les billets antérieurs au présent billet sont considérés obsolètes.**

Don Carlo

Kozlika — Thu, 01 Jan 2009 08:49:00 +0100

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.

Détails du thème

Cliquez sur les vignettes pour afficher la taille réelle.

Constantes

La boîte de recherche propose dynamiquement des suggestions de résultats ; c'est basé sur le plugin jQuery LiveSearch ; l'implémentation est identique (et pour cause puisque c'est là que j'ai récupéré la fonction ) à celle du thème Noviny.
Le menu horizontal, tout en haut à droite de la page reprend les quatre items « standard » de ce qu'on trouve sur tous les blogs actuellement. Il présuppose que vous créiez une page (Pages) dont la partie titre de l'url sera About et que vous installiez le plugin Contact Me. Si vous souhaitez modifier ou supprimer tout ou partie de ces liens, éditez le fichier _top.html
Tous les widgets sont situés en bas de la page, à l'exception de la recherche.

Accueil

La colonne de gauche du billet accueille une vignette de la première image du billet, s'il n'y a pas d'image dans le billet mais que la description de la catégorie à laquelle il appartient en possède une, c'est cette image qui sera affichée. Si ni l'une ni l'autre n'existe cette colonne reste vide.

La colonne de droite est prévue pour un bloc de présentation rapide à l'intention des nouveaux venus sur votre blog. Pour en rédiger le contenu, éditez le fichier _home-aside.html.

Billet seul

Un autre de mes dadas. Mettre en valeur le chapô (champ Extrait lors de la saisie du billet) traité comme une véritable accroche de l'article. Appuyé sur le flanc gauche du billet il est en caractères serif, plus gros que le corps du billet et en italique. Je décommande du coup l'usage d'images dans ces extraits (ou veiller à ce qu'elles soient petites, sinon ça va être super moche).

Les intertitres de niveau h3 à h6, en petites majuscules, sont également en police serif. Les détails de mise en forme des différentes balises peuvent être observés sur le blog de démonstration de DotAddict (du moins dès que j'y aurai déposé ce thème).

En affichant en taille réelle la réduction ci-contre, vous pourrez également avoir un aperçu du traitement des commentaires.

Résultats d'une recherche, liste des billets d'une catégorie

Ces deux contextes se voient dotés d'un bandeau sur la droite. Ce bandeau accueille dans le premier cas l'ensemble des résultats de la recherche et dans le deuxième cas l'ensemble des billets de la catégorie sous la forme d'une liste des titres des billets concernés. Dans le cas du tri par catégorie c'est en haut de ce bandeau que se trouveront la description et les liens d'abonnement aux billets de la catégorie.

Ce bandeau est présent à l'identique sur toutes les pages du contexte.

Page 404

Vous pourrez encore enrichir cette page à votre idée (en éditant le fichier 404.html) qui comporte d'ores et déjà des liens pour se rendre sur la page globale des archives, vers la page de contact et vers le bloc de recherche.

Pour le bloc de recherche j'ai hésité un peu à le « sortir » du haut de page pour l'intégrer dans le corps de page comme pour les archives. Si d'aucuns d'entre vous le souhaitent j'expliquerai ici comment faire.

On peut le prendre ?

Oui et non. Je suis en vacances et n'ai pas d'Internet Explorer 6 ou 7 sous la main pour tester les pages (je me méfie de l'extension pour Firefox qui s'est révélée ne pas être fiable à 100%).

Je serais donc ravie si quelques-uns des lecteurs de ce billet acceptaient de télécharger le thème (lien zip en pièce jointe) et le soumettre à la torture sur un poste Windows et Internet Explorer pour que je sois informée des bugs éventuels et puisse les corriger avant de le distribuer officiellement sur DotAddict. Je n'ai pas testé ni pu faire tester sous Linux non plus…

Pendant quelques jours

Vous pouvez le visualiser in situ ici (mais pas longtemps car je dois repasser sur Magda pour y bosser et parce que je dois reprendre tous mes articles ici pour les débarrasser de vieilleries qui me servaient sur un autre thème et que j'ai des soucis avec le switcher).

Woof

Kozlika — Mon, 15 Dec 2008 23:00:00 +0100

Vous avez vu ou entendu parler de Hair ? C’est à cette comédie musicale que ce nouveau thème doit son nom. Woof en est l’un des personnages. Cette œuvre aussi emblématique des années 70 que le combi VW du footer et les illustrations et couleurs ici utilisées.

Sur deux colonnes (disons trois si l’on tient compte du sidebar divisé en deux verticalement) de largeur fixe (940px), Woof fait pousser les fleurs, rend les joues roses, favorise la barbe et les cheveux longs et apporte la paix aux esprits chagrins.

Attention si vous placez souvent des images dans vos billets : pour faire jouli j’ai appliqué une transparence au fond des div.post. Sur les images ça donne un p’tit brouillard que vous aimerez… ou pas. Si vous n’aimez pas, deux solutions s’offrent à vous :

supprimer les règles de transparence dans style.css ;
placer tout élément pour lequel vous voulez un fond mat dans une <div class="opaque">.

Les fonds transparents sont en effet automatiquement transmis à leurs « enfants » sauf si l’enfant est une div avec des règles spéciales. Autrement dit, pour ceux d’entre vous auxquels je ne cause pas chinois, une règle appliquée à .post img {} est hélas sans aucune efficacité. En revanche on peut annuler la transparence sur une div, d’où la création dans style.css d’une class “opaque”.

J’espère que vous vous amuserez autant à utiliser ce thème que moi à le faire :-)

Woof sur DotAddict :

Plaf ? Plop !

Kozlika — Mon, 08 Dec 2008 19:20:00 +0100

Et si on disait que c’était le printemps ? Je viens de déposer le thème Plop sur Dotaddict. Je l’avais réalisé pour le projet d’évolution de Dotclear 1.4, mais puisque ce projet ne verra jamais le jour, et que de toutes façons j’avais l’intention de le publier pour les deux versions, en voici l’adaptation pour Dotclear 2.

Plop est un thème fixe (840 pixels) avec deux colonnes, sidebar à gauche. Voyez la démo in vivo de Plop. Je l’ai voulu simple, clair, coloré. Pas de trucs-machins web 2.0, pas de fonctionnalités de la morkitue, Plop est fait pour ~~ploper~~ bloguer. Voilà à quoi il ressemble.

Pour le télécharger, rendez-vous sur sa fiche de DotAddict (ou ici en pièce jointe au présent billet).

Mieux encore, connectez vous sur votre admin, lancez daInstaller et servez-vous (je pense qu’il y sera dès demain matin).

Vous avez un souci ? Vous voulez de l’aide pour sa personnalisation ? C’est sur ce billet que ça se passe.

MediaSizeClass, des CSS pour les zimages

Kozlika — Fri, 24 Oct 2008 14:52:00 +0200

Ce plugin ajoute dans toutes les balises <img /> une class en fonction de la taille (thumbnail, square, small, medium) de l’image insérée.

L’idéal aurait été de pouvoir traiter le xhtml en sortie de traitement pour y ajouter par des chercher/remplacer magiques mes fameuses class, un peu comme le fait le plugin Typo. C’était très au-dessus de mes compétences ! En revanche, je savais pouvoir le faire en passant par la moulinette magique de jQuery et que c’est ainsi d’ailleurs que s’y prend le plugin externalLinks.

En me basant sur ce plugin et avec de l’aide sur le forum, j’ai réussi à obtenir le résultat souhaité et je vous le fais partager.

Il fait quoi ?

Il ajoute dans toutes les balises <img /> une class en fonction de la taille (thumbnail, square, small, medium) de l’image insérée. Les class sont :

thumbnail-img
square-img
small-img
medium-img

Et ça sert à quoi ?

Eh bien à leur appliquer un style différent.

Exemple 1

Un cadre d’épaisseur différente.

.thumbnail-img, .square-img, .small-img, .medium-img {
  border-color: #ddd;
  border-style: solid
}
.thumbnail-img {
  border-width: 1px;
}
.square-img {
  border-width: 3px;
}
.smalll-img {
  border-width: 5px;
}
.medium-img {
  border-width: 8px;
}

Exemple 2

Une marquise pour les photos de taille medium (et uniquement elles).

.medium-img {
  padding: 12px;
  background: #e5e5e5;
  border: 1px solid #bbb;
  display: block;
  margin: 1em auto;
}

Ça ne fonctionnera pas si…

… javascript est désactivé

C’est pour ça qu’un traitement du contenu du post aurait été préférable. Comme ce plugin utilise la bibliothèque jQuery, les class ne seront pas affectées sur les navigateurs de vos visiteurs qui ont désactivé javascript.

… si vous donnez des instructions contradictoires

Les règles dites « inline » ont priorité sur les règles de style.css. Donc, si par exemple vous indiquez dans la CSS que les images de taille medium doivent être centrées mais qu’au moment de l’insertion d’une image dans votre billet vous choisissez “à gauche”, c’est cette dernière règle qui sera appliquée. (Par exemple, dans le cas de l’exemple numéro 2, la dernière ligne de la règle sera inopérante.)

On récupère ton plugin comment ?

En le téléchargeant depuis la pièce jointe. Cette pièce jointe est un .zip, décompressez-le puis envoyez-la dans /plugins de votre installation ou renseignez le champ idoine du gestionnaire d’extensions de votre installation.

Ce plugin sera déposé sur DotAddict dès que ça sera à nouveau possible.

Kameleon for Dissitou

Kozlika — Thu, 28 Feb 2008 12:39:00 +0100

Trois colonnes à l’accueil, deux colonnes dans les pages intérieures, Kameleon for Dissitou offre trois déclinaisons possibles selon que l’on préférera accueillir des brèves, un édito ou les billets “à retenir” dans la colonne supplémentaire de l’accueil.

Je me rends compte que je n’avais pas publié ici le thème Kameleon for Dissitou, ce billet répare cette omission.

Ce thème est disponible dans les galeries de Dotaddict :

Un fichier lisez-moi.txt placé dans le répertoire du thème détaille la procédure pour choisir votre variation. Vous pouvez aussi le consulter ici même.

Pour vous dire la vérité, je me souviens qu’il restait des cas à régler (trop peu de brèves, moins de billets que celui déterminé par la pagination) mais je ne sais plus du tout si je l’avais fait ou non ! N’hésitez donc pas à hurler ici si le fonctionnement du thème sur votre blog présente des anomalies.

Kameleon For Dissitou (en test)

Kozlika — Sun, 11 Nov 2007 12:48:00 +0100

Personne pour tester Malaclemys (voir billet précédent) ? Aurai-je plus de chances avec Kameleon ou il n’y a plus personne qui passe dans le coin ? Je tente ma chance… Kameleon For Dissitou est l’adapatation un peu relookée de Kaméléon pour Dotclear 1. Le principe : une page d’accueil dont la partie principale présente deux colonnes, le contenu de ces colonnes étant proposé en trois déclinaisons.

Pour le moment je vous propose de ~~télécharger l’archive~~ puis de la décompresser sur votre disque dur avant de l’envoyer en ligne. Le répertoire contient un fichier lisez-moi.txt qui comme son nom l’indique est à lire absolument et que je vous recopie ci-dessous.

Mise en place

Pour mettre en place ce thème sur votre site :

1/ supprimez les actuels fichiers home.css et home.html

2/ dans le repertoire choisir-home/ ouvrez le sous-repertoire correspondant à la variante de Kameleon For Dissitou que vous souhaitez

3/ faites une copie des deux fichiers qu’il contient et placez-les à la place des fichiers que vous venez de supprimer

4/ ouvrez le fichier home.html et lisez ses commentaires pour adapter le code à votre blog.

Ici, la variante “retenir”, que j’affecte à tous mes billets de nouveaux thèmes.

Description des variantes et conseils

Point commun :

la colonne de gauche de la partie principale ne s’affiche que sur la première page de l’accueil

Brèves

affiche dans la colonne de gauche tous les billets rangés dans la catégorie des brèves ; comme leur nom l’indique, les billets de cette catégorie sont censés être courts…
les images des “brèves” dont automatiquement redimensionnées à 15em de large pour éviter qu’elles débordent.
la colonne de droite affiche les billets n’appartenant pas à la categorie des brèves

Edito

affiche *en entier* le dernier billet de la catégorie des éditos, que celui-ci comporte ou non un chapo. Vous pouvez appliquer un style particulier à cet eventuel chapo en creant une règle pour .post-excerpt {} dans le fichier home.css si vous le souhaitez
à la suite du dernier billet, s’affiche une liste de tous les éditos précédents (titre avec lien, auteur et date)
la colonne de droite affiche les billets n’appartenant pas à la catégorie des édito
les deux colonnes occupent chacune la moitié de la largeur

Retenir

affiche dans la colonne de gauche les billets marqués “à retenir” (case à cocher dans l’interface d’édition du billet)
les images de cette colonne sont redimensionnées automatiquement à 15em de large pour éviter le débordement.
il est souhaitable que ces billets soient toujours dotés d’un chapo pour éviter que cette (étroite) colonne fasse des kilomètres de haut
la colonne de droite affiche tous les billets, y compris ceux marqués à retenir
compte tenu des deux points précédents, une bonne option consiste à ne cocher la case “à retenir” que lorsque le billet est sur le point de disparaître de la première page et d’en profiter pour placer son début dans le champ chapo si ça n’est déjà fait.

Allo ? Allo !

Sauterelle

Kozlika — Wed, 07 Nov 2007 14:03:00 +0000

Sauterelle est un thème plus particulièrement destiné aux diaristes : l’accueil affiche les billets jour par jour et la navigation est plus centrée sur la chronologie que sur les catégories.

Pour laisser toute la place aux billets, l’habituel menu est déporté sur une page annexe (incluse dans le thème) accessible depuis l’item « Centre d’aiguillage ». On le modifie en éditant le fichier plan.php.

Trucs kifonjoli et trucs pratiques :

Le lien de retour à l’accueil (quand on n’est pas à l’accueil, sinon rien) porte la date du billet le plus récent.
Le cartouche sous la sauterelle contextualise la page affichée.
Lorsque plusieurs billets ont été écrits le même jour, un cartouche en bas d’un billet indique les autres de la même date.
Le calendrier des billets est en forme de “ruban” à plat.
Le centre d’aiguillage contient les éléments habituels du sidebar, sauf la recherche et la syndication qui sont en pied de toutes les pages. La division en deux boites permet de séparer les liens internes et externes.

Pour les personnalisations :
- l’image du top est indépendante de la bannière elle-même, suffit de mettre l’image de son choix aux mêmes dimensions (225 * 170px) à la place dans le rep des images du thème.
- les couleurs s(er)ont listées en haut de la css pour faciliter le chercher/remplacer (en cours, gépofini)

Liens de téléchargement sur themes.dotaddict.org.

Kit 1for2

Kozlika — Sat, 15 Sep 2007 14:16:00 +0000

Pour ceux qui turbinent sous Dotclear 1 et que les thèmes pour Dotclear 2 font rêver.

Voici un kit pour pouvoir utiliser un thème prévu à l’origine pour Dotclear 2 sur votre blog turbinant sous Dotclear 1. Les fichiers *.php ont été modifiés afin de pouvoir retrouver la correspondance des règles d’une feuille de style DC2.

Vous pouvez en voir la démonstration avec le thème par défaut de Dotclear 2 appliqué sur ce blog. J’ai strictement suivi la procédure ci-dessous décrite sans aucune autre intervention.

Je développerai plus bas pour les amateurs de détails les modifs intervenues, mais passons tout de suite à la procédure pour l’utilisation de ce thème.

Procédure

Téléchargez sur votre disque dur l’archive du kit 1for2. Décompressez-la.
Téléchargez sur votre disque dur l’archive du thème DC2 que vous souhaitez adapter pour votre blog^[1]. Décompressez-la.
Transférez une copie du fichier style.css (et layout.css s’il existe) de themedc2 dans kit1for2.
Transférez une copie du répertoire des images de themedc2 vers kit1for2.
Envoyez votre répertoire kit1for2 ainsi modifié dans le répertoire themes de votre installation.
Rendez-vous dans votre interface d’administration, onglet Outils, lien Gestionnaire de thèmes et activez le thème kit1for2.

C’est tout.

Compléments

Il vous faudra ensuite éventuellement ajouter quelques règles (par exemple pour le style du calendrier) afin de peaufiner votre thème. Vous pouvez supprimer les règles inutiles pour un blog Dotclear 1 mais ça n’est pas gênant qu’elles y restent, ça alourdit inutilement le fichier style.css de quelques octets mais ça n’est pas bien grave.

Avertissement

Seuls les thèmes DC2 100% CSS pourront ainsi être facilement « convertis ». Je n’assure aucun support pour modifier les fichiers php de 1for2 en vue d’un portage de thèmes dc2 dont les fichiers html ont été personnalisés. Sachez toutefois que même si les fichiers *.html ont été modifiés ça ne veut pas dire que la procédure décrite plus haut ne suffira pas. Vous pouvez donc toujours essayer :)

Détails

Changements effectués sur les fichiers par rapport à ceux du thème par défaut de Dotclear 1.2.7 :

Ajout d’une class en fonction du contexte sur le body (dc-home, dc-category, dc-post, dc-search, dc-archive-month, dc-archive-day – dc-else pour les autres).
Ajout d’une div “wrapper” englobant “main” et “sidebar”.
Ajout d’une class “feed” sur tous les liens de flux de syndication.
Réordonnancement des blocs Commentaires / Formulaire des commentaires / Trackbacks / URL de trackback / Abonnement aux commentaires d’un billet et leur encapsulage dans des blocs spécifiques en conformité avec l’organisation de ces blocs dans les thèmes pour Dotclear 2.
Placement des commentaires et des trackbacks dans des listes de définition.
Affichage conditionnel des commentaires et des trackbacks en fonction de leur ouverture.
Subdivision du sidebar en deux div blognav et blogextra.
Ajout d’une class pour chaque élément du sidebar pour conformité avec les thèmes Dotclear 2 et les nommages des widgets.
Ajout d’un bloc “topnav” dans la partie “blognav” avec lien de retour à l’accueil.
Remplacement de la structure <p id="footer"></p> par <div id="footer"><p></p></div>

Je suis toute ouïe pour les améliorations à apporter à ce kit, de préférence en s’inscrivant à ma ml de support^[2] ou éventuellement ici.

Notes

[1] Que j’appelerai par la suite themedc2.

[2] Pour s’inscrire envoyer un mail à dckozthemes (@) ml.free.fr en inscrivant seulement subscribe dans le sujet.

Welsh 2.0, 2 colonnes

Kozlika — Wed, 29 Aug 2007 07:53:00 +0200

Variation pour deux colonnes du thème Welsh 2.0

A la demande de l’ami Biou pour son blog et d’autres auparavant, j’ai terminé la variation pour deux colonnes du thème Welsh 2.0.

Il est livré dans le même emballage que Welsh 2.0 en trois colonnes. Pour utiliser la version en deux colonnes, créer un répertoire nommé 3cols-files dans le répertoire du thème Welsh et y placer les fichiers :

layout.css
screenshot.jpg
style.css

Puis déplacer les trois fichiers contenus dans le répertoire 2cols-files à la place de ceux que vous venez de retirer.

(Pour ne pas nous éparpiller, merci de n’utiliser les commentaires du présent billet que pour les questions spécifiques à cette variation et de poser vos questions générales sur ce thème dans le billet de Welsh 2.0.)