Les ateliers du klafoutis - Thèmes pour Dotclear 2

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.

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 !

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 !