Les ateliers du klafoutis - Mot-clé - thèmes

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.

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 ?

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

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

Aorakits en thèmes paramétrables

Kozlika — Tue, 30 Jan 2007 16:54:00 +0100

Edit : voir désormais la page des Aorakits.

Installez-le en le décompressant dans le répertoire /themes de votre blog.

Vous y trouverez le fichier layout.css correspondant à la structure choisie, le fichier style.css comportant l’import de ce layout et toutes les balises courantes d’un thème pour Dotclear 2.0, le fichier _define.php à modifier pour y placer le nom que vous aurez donné à votre nouveau thème et votre signature.

Le fichier config.php et le répertoire /locales ont été mis en place pour que vous puissiez éditer la feuille de style directement depuis le Tableau de bord -> Paramètres des thèmes -> Sélection de l’Aorakit choisi -> Onglet Paramètres du thème.

N’hésitez pas à me signaler d’éventuelles erreurs : j’ai procédé un peu « à la chaîne » pour les préparer, j’ai pu faire quelques bourdes au passage (je me connais ;)) !

Enjoy !

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.

Hermione

Kozlika — Sat, 11 Nov 2006 10:22:00 +0100

Nuages, nuages, le nuage de tags forme les nuages de la bannière.

Les feuilles de style et fichier html nécessaires à la présentation du plugin day-mode sont jointes au thème.

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

Edit 18 septembre 07 : mise à jour du thème pour modif du fichier _top.html : {{tpl:MetaPercent}} devient {{tpl:MetaRoundPercent}}. Merci Erno !

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

Note : Hermione, la femme de Leontes, roi de Bohême, est l’héroïne de l’opéra Wintermärchen (Les contes d’hiver), composé en 1999 par Philippe Boesmans sur un livret d’après la pièce éponyme de William Shakespeare. En voici un extrait.

Enregistrement recommandé : A ma connaissance il n’en existe qu’un Wintermärchen, avec Dale Duesing et la regrettée Susan Chilcott, sous la direction d’Antonio Pappano. Editions Deutsche Gramophon.

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.

Obéron

Kozlika — Thu, 13 Jul 2006 11:52:00 +0000

Obéron est une adaptation pour DotClear 2 du thème Keldroledenom pour DC1.

Pour personnaliser ce thème, je recommande d’effectuer 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 : Obéron est le héros de l’opéra du même nom, composé en 1826 par Karl Maria von Weber sur un livret de James Robinson Planché, d’après Les Songes d’une nuit d’été de William Shakespeare A Midsummer Night’s Dream. « Le chanteur Roth, a décrit une promenade qu’il fit pendant l’été de 1824 avec Weber dans la campagne de Dresde : la lumière était éblouissante et l’on n’entendait pas un son, sinon un très léger et lointain bourdonnement d’insectes. Weber s’arrêta, mit un doigt sur sa bouche et murmura : Oberon. » A. Coeroy (Source.)

Enregistrement recommandé : Obéron, avec Steve Davislim, Hillevi Martinpelto, Monteverdi Choir, Orchestre révolutionnaire et romantique, sous la direction de John Eliot Gardiner. Editions Deutsche Grammophon.

Notes

Mélisande

Kozlika — Wed, 12 Jul 2006 11:45:00 +0000

« Innocence de la coquille d’œuf, mystère et naturel des feuilles d’arbres, élégance simple d’une robe de princesse perdue dans la forêt : Mélisande, bien sûr, version Debussy. » Dixit Bladsurb.

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.

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

Note : Mélisande est l’héroïne de l’opéra Pelléas et Mélisande, composé en 1893 par Claude Debussy sur un livret d’après la pièce de Maurice Maeterlinck.

Enregistrement recommandé : Pelléas et Mélisande, avec Richard Stilwell, Federica Von Stade, José Van Dam, Ruggero Raimondi, l’Orchestre philharmonique de Berlin, sous la direction d’Herbert von Karajan. Editions EMI («Great Recordings of the century»).

Madame Butterfly

Kozlika — Sun, 09 Jul 2006 11:33:00 +0000

Butterfly est une adaptation pour DotClear 2 du thème Kimono 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.

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 : Madame Butterfly est l’héroïne de l’opéra éponyme, composé par Giacomo Puccini sur un livret de Giuseppe Giacosa et Luigi Illica. L’ambiance du thème fait bien entendu allusion au fait que l’opéra se situe au Japon. (Euh oui, les idéogrammes sont chinois, vous n’allez pas me chipoter pour si peu ? ;-))

Enregistrement recommandé : Madame Butterfly, avec Mirella Freni, Luciano Pavarotti, Christa Ludwig, le Wiener Philharmonic Orchestra, sous la direction d’Herbert von Karajan. Editions EMI.

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.

Les ateliers du klafoutis - Mot-clé - thèmes

Adèle

Réglages et caractéristiques

Galerie

Tester

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

Le problème

OKCLH à la rescousse

Le code

Valadon

Configuration (optionnelle)

À savoir

Sidebar

Menu simple

Rafraîchissement de Ductile : phase 3

Rafraîchissement de Ductile : phase 2

Modifs de la phase 2

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

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

Sauterelle

Kit 1for2

Pro­cé­dure

Com­plé­ments

Aver­tis­se­ment

Détails

Notes

Welsh 2.0, 2 colonnes

Aorakits en thèmes paramétrables

Giacomo

Papageno

Appel à vos con­tri­bu­tions

Hermione

Bastienne

Notes

Obéron

Notes

Mélisande

Madame Butterfly

Marie

Notes

Lakmé

Notes

Procédure

Compléments

Avertissement

Appel à vos contributions