Les ateliers du klafoutis - Mot-clé - fluide

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.

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

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

Giacomo

Kozlika — Sun, 19 Nov 2006 12:43:00 +0100

Giacomo est l’adaptation pour DotClear 2 du thème Keepsake pour DC1.

Pour personnaliser ce thème, je recommande d’ajouter les modifications ou ajouts dans le fichier custom.css présent dans le répertoire du thème. S’y trouvent d’ores et déjà les règles nécessaires à la présentation du calendrier si vous choisissez d’ajouter le plugin DayMode.

Ce thème est CSS only (il utilise les fichiers html du thème par défaut).

Téléchargement et démonstration sur Dotaddict.

Note : Giacomo est l’un des personnages de l’opéra-comique Fra Diavolo, composé par François Auber sur un livret d’Eugène Scribe. L’histoire, aussi enlevée que la musique, évoque une sorte de Robin des Bois à la sauce italienne.

Enregistrement recommandé : Fra Diavolo, avec Maddy Mesplé et l’immense Nicolaï Gedda, le Monte Carlo Philharmonic Orchestra, sous la direction d’Alain Lanceron. Editions EMI.

Papageno

Kozlika — Sat, 11 Nov 2006 14:21:00 +0100

Entendez-vous le carillon du glockenspiel ?

Papageno est un thème de largeur fixe ou fluide sur deux colonnes.

Par défaut sa largeur est fixée à 87% de la largeur de la fenêtre mais vous pouvez la fixer en remplaçant la iigne :

	width : 87%;

par :

	width : 780px; /* ou autre valeur de votre choix */

Pour personnaliser ce thème, je recommande d’ajouter les modifications ou ajouts dans le fichier custom.css présent dans le répertoire /themes/hermione/, où figurent déjà les css nécessaires pour la présentation du plugin DayMode.

Merci de me faire part ici de vos remarques ou suggestions. (Les billets de ce blog permettent de tester différents cas de figure.)

Appel à vos contributions

Il reste deux petits bugs connus que je n’arrive pas à contourner. Ils ne sont pas trop gênants donc je le distribue quand même mais j’offre une sucette Pierrot-Gourmand au caramel à celui ou celle qui me fournira le patch ;)

Sous Safari, les deux liens Accueil et Archives ne veulent pas se placer côte à côte.
Selon le navigateur, quelques pixels manquent à gauche ou à droite pour la cellule du nom du mois dans le calendrier.

Téléchargement et démonstration sur Dotaddict.

Note : Papageno est l’un des personnages de l’opéra La Flûte enchantée, composé en 1791 par Wolfgang Amadeus Mozart sur un livret d’Emanuel Schikaneder. C’est probablement l’un des opéras les plus célèbres du monde, notamment pour l’air pyrotechnique de la Reine de la Nuit.

Enregistrement recommandé : Il est très difficile de choisir parmi la pléthore d’enregistrement de cette œuvre. La magnifique version, très équilibrée, dirigée par Otto Klemperer recevra ma préférence.

Bastienne

Kozlika — Sat, 29 Jul 2006 12:10:00 +0000

Agrémenté de quelques variations en fonction du contexte de la page, de personnalisation des commentaires de l’auteur du blog et autres styles spécifiques, ce thème sans aucune prétention esthétique peut servir de base/exemple pour aller plus loin.

Pour personnaliser, je recommande de faire les modifications ou ajouts dans le fichier custom.css présent dans le répertoire du thème.

Le fichier archive_month.html a été personnalisé^[1] le reste est en css only.

Téléchargement et démonstration sur Dotaddict.

Note : Bastienne est l’une des deux héros de l’opéra Bastien et Bastienne, composé par Mozart en 1768, soit à l’âge de 12 ans… L’histoire est largement inspirée du Devin du village de Jean-Jacques Rousseau. J’ai choisi ce nom bien évidemment en raison de la “fraîcheur” - du moins je l’espère, du graphisme et du jeune âge tant de Mozart lorsqu’il écrivit cet opéra que des personnages centraux.

Enregistrement recommandé : Le très joli DVD Bastien et Bastienne, avec de très jeunes interprètes dirigés par Nicolas Porte (CLC Productions).

Notes

[1] MàJ du 17/10/06. Ce thème a été mis à jour pour tenir compte de la nouvelle insertion du prélude dans le fichier _top.html et de l’appel des feuilles de style dans le fichier __head.html, si vous avez téléchargé ce thème avant aujourd’hui, téléchargez la nouvelle archive et remplacez simplement le fichier archive_month.html ancien par celui qui s’y trouve.

Marie

Kozlika — Sun, 09 Jul 2006 08:30:00 +0000

Comme Lakmé, Marie présente les deux colonnes du sidebar sur le côté gauche (“extra” puis “nav”).

La conservation du widget des liens de syndication dans le bandeau d’extra est nécessaire à sa bonne présentation. Contactez-moi si vous voulez le faire disparaître pour qu’on trouve une autre solution.

Le fichier archive_month.html a été personnalisé^[1] le reste est en css only.

Pour personnaliser ce thème, je recommande d’ajouter les modifications ou ajouts dans le fichier custom.css présent dans le répertoire du thème.

Démo et téléchargement sur Dotaddict.

Note : Marie est l’héroïne de l’opéra La Fille du régiment, composé par Gaetano Donizetti sur un livret de Jules Henri Vernoy Marquis de St-Georges et Jean François Alfred Bayard en 1840. Les couleurs bleu, blanc et rouge évoquent l’un des plus célèbres airs de cet opéra, « Salut à la France ». J’aime beaucoup cet opéra.

Enregistrement recommandé : La Fille du régiment, avec Beverly Sills, Fernando Corena, Greyson Hirst, l’American Opera Society, sous la direction de Roland Gagnon. Editions Opera d’Oro.

Notes

Lakmé

Kozlika — Sun, 09 Jul 2006 07:16:00 +0000

Premier-né de mes thèmes pour Dotclear 2, Lakmé présente les deux colonnes du sidebar sur le côté gauche (“extra” puis “nav”).

La conservation du widget des liens de syndication dans le bandeau d’extra est nécessaire à la bonne présentation de ce thème. Contactez-moi si vous voulez le faire disparaître pour qu’on trouve une autre solution.

Pour le personnaliser, je recommande d’ajouter les modifications ou ajouts dans le fichier custom.css présent dans le répertoire du thème.

Le fichier archive_month.html a été personnalisé^[1] le reste est en css only.

Merci de me faire part ici de vos remarques ou suggestions. (Les billets de ce blog permettent de tester différents cas de figure.)

Démo et téléchargement sur Dotaddict.

Note : Lakmé est l’héroïne de l’opéra du même nom, composé par Léo Délibes sur un livret d’Edmond Gondinet en 1883. La fleur de jasmin du top fait référence au duo célèbre extrait de cet opéra dit « Duo des Fleurs ». C’est l’un de mes opéras préférés.

Enregistrement recommandé : Lakmé, avec Natalie Dessay, Gregory Kunde, José Van Dam, l’Orchestre du Capitole de Toulouse et dirigé par Michel Plasson. Editions EMI.

Notes

Kit 1

Kozlika — Sun, 13 Nov 2005 07:41:00 +0000

Un thème de base, des structures, un blog dédié pour les personnalisations.

Kit est un thème conçu pour les grands débutants en css. Volontairement basique (une seule couleur d’accompagnement, peu de « fioritures », utilisation des fichiers php par défaut), j’ai essayé de faire en sorte qu’il soit facile à personnaliser et à complexifier à l’envi pour les plus hardis.

Un guide de personnalisation livre quelques pistes pour aménager son blog sur la base de ce thème, accompagné d’exemples de codes et de captures d’écran.

Le thème est livré par défaut en version fluide avec sidebar à droite. Suivez les instructions de l’article Installation du blog associé pour permuter le sidebar à gauche et/ou fixer la largeur de la page. Les liens de téléchargement du thème de base et ses variations sont disponibles sur Dotaddict.

Kiwi Cassis

Kozlika — Sun, 17 Oct 2004 11:33:00 +0000

Par cette chaleur, vous prendrez bien un petit sorbet ?

Comme promis, un autre thème fluide en trois colonnes, qui doit tout à ce modèle de web producer : http://www.webproducer.at/flexible-….

Histoire de ne pas laisser l’été s’envoler, un thème à la gloire des sorbets… Kiwi Cassis peut retrouver une allure plus sobre en modifiant les couleurs ;-). Si vous ne savez comment opérer ces modifications c’est que vous n’avez pas encore appris par cœur Le Petit DotClear illustré, notamment l’article « Votre blog à vos couleurs », et ça c’est pas bien !

La largeur de la page s’ajuste à celle de la fenêtre du navigateur en conservant les marges indiquées dans la feuille de style (fichier style.sss) par la règle de #page :

#page {
	margin: 24px 36px;
	text-align:left;
	background:#fff;
}

24px est la valeur des marges haute et basse et 36px la valeur des marges gauche et droite. Ajustez-les comme bon vous semble en modifiant ces deux valeurs.

Fiche détaillée et liens de téléchargement sur Dotaddict.

Keepsake

Kozlika — Wed, 08 Sep 2004 13:44:00 +0000

Mon premier thème en trois colonnes.

Un thème en trois colonnes pour Dotclear 1. Le contenu de la colonne de gauche se modifie en éditant le fichier extra.txt situé dans le répertoire du thème. Ce fichier interprète la syntaxe wiki.

Ce thème embarque tout le nécessaire pour afficher la barre d’enrichissement typographique pour les commentaires (aka wikibar). Pour sa mise en œuvre, il vous suffit d’indiquer dans la configuration du blog que vous acceptez les commentaires en syntaxe wiki.

Edit 25/12/2007. Les couleurs de ce thème respectaient celles du thème par défaut de l’époque. Je dois avouer aujourd’hui que s’il me semblait opportun de faire ainsi, je n’aime ni ces couleurs ni les layouts en trois colonnes menu-centre-menu. Mais force m’est de constater que ce thème remporta un très grand succès :-D

Fiche détaillée et liens de téléchargement sur Dotaddict.

Les ateliers du klafoutis - Mot-clé - fluide

Valadon

Configuration (optionnelle)

À savoir

Sidebar

Menu simple

Ductile 2026 v1.0

Don Carlo

Détails du thème

Constantes

Accueil

Archives

Billet seul

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

Page 404

On peut le prendre ?

Pendant quelques jours

Welsh 2.0, 2 colonnes

Giacomo

Papageno

Appel à vos con­tri­bu­tions

Bastienne

Notes

Marie

Notes

Lakmé

Notes

Kit 1

Kiwi Cassis

Keepsake

Appel à vos contributions