Les ateliers du klafoutis - Carnet de notes

Mises à jour des aorakits et de tous mes thèmes pour Dotclear 2

Kozlika — Sun, 14 Sep 2008 13:37:00 +0200

En attendant que la mise à jour soit de nouveau possible sur themes.dotaddict.org, je mets ici à disposition l'ensemble des aorakits et de mes thèmes pour Dotclear 2 dans leur version compatible avec la dernière version de Dotclear.

Changelog / aorakits

Correction du marqueur pings_count en ping_count

Changelog / mes thèmes :

Bastienne

1.2
Suppression du fichier personnalisé pour l'affichage des archives mensuelles qui se présentent désormais avec la même structure que pour le thème par défaut. (Ce thème devient donc pure css.)
Changement de la typo du titre du blog, qui passe en Baskerville. (Je n'ai cependant pas refait le screenshot.)

Butterfly

1.2
Correction erreur : remplacement de la class .post-chapo par .post-excerpt
Conformité 2.0 finale : remplacement des id #syndicate et #links en class .syndicate et .links

Giacomo

1.2
Toilettage esthétique couleurs/images
Correction erreur : remplacement de la class .post-chapo par .post-excerpt

A noter : ce thème comporte les règles nécessaires à la présentation du calendrier dans le fichier custom.css

Hermione

1.2
déplacement des fichiers .html dans le sous-répertoire /tpl/
Conformité 2.0 finale :
- head et infos de langue du fichier archive_month.html
- Modif de #syndicate en .syndicate

A noter : ce thème comporte les règles pour la présentation du calendrier (dans le fichier custom.css) ainsi que le fichier archive_day.html, tous deux nécessaires au plugin dayMode s'il est installé.

Kameleon For Dissitou

1.0
Conformité 2.0 : modifs des fichiers html et déplacement dans /tpl/

Lakme

1.2
Correction du téléscopage des deux liens de syndication
Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier dans le rep /tpl/

Marie

1.2
correction d'un marqueur .prelude au lieu de #prelude sur la règle de son a:hover
correction du marqueur .post-chapo en .post-excerpt
Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier dans le rep /tpl/

Melisande

1.2
correction du marqueur .post-chapo en .post-excerpt
correction du nom d'image pour le bord inférieur de la page

Oberon

1.2
correction du marqueur .post-chapo en .post-excerpt
Conformité 2.0 :
- modif de #tags en .tags
- modif de #syndicate en .syndicate
- déplacement des fichiers .html dans le sous-répertoire /tpl/

Papageno

1.2
Mise en conformité 2.0 finale des fichiers archive_month.html et archive_day.html et transfert de ces fichier dans le rep /tpl/

Welsh 2.0

1.0
Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier et de _top.html dans le rep /tpl/
Possibilité d'alimenter les onglets depuis l'éditeur de thème et marquage auto de l'onglet actif
Ajout d'un LISEZ-MOI.txt pour les conseils de mise en place

J'en veux !

Tout est là.

N'hésitez pas à signaler le moindre problème.

Quelques liens

Kozlika — Sun, 29 Jun 2008 11:41:00 +0200

Website health check, check list de contrôle des points importants à vérifier pour votre site.
24 sites de tutoriels gratuits pour Photoshop. Ces sites sont malheureusement tous anglophones mais lorsque les tutos sont bien faits avec beaucoup de copies d'écran on s'en sort tout de même. Petit bémol : pas évident de transposer les menus anglais... A compléter avec 6 trucs et astuces que vous ne connaissez sûrement pas.
Coller le pied de page en bas. Je n'aime pas trop la div vide (clearfooter), mais au moins ça fonctionne et c'est en pur css... A rapprocher de cet autre tuto sur le même principe.

Reprise progressive d'activité

Marcel Biou — Sat, 14 Jun 2008 12:05:00 +0200

Après une assez longue période de pas-envie, me voici revenue au pays des sorciers. Au programme des prochaines semaines :

Mise à jour des thèmes pour la version finale de Dotclear 2.
- Ceux proposés aujourd'hui sont fonctionnels mais à partir de la finale les fichiers *.html devront impérativement être rangés dans un répertoire /le_theme/tpl/ ; autant le faire dès maintenant ;
- Je ne crois pas avoir de fichiers _head.html personnalisés dans mes thèmes mais si c'est le cas je dois les mettre à jour ;
- Voir si je peux mettre quelque chose en place pour alimenter les menus de Welsh plus facilement (et proposer en alternative le plugin d'adjaya)
Reprendre les tutoriels pour Dotclear 2
- Nettoyage éventuel des trucs qui ne sont plus utiles ou invalides depuis la RC
- Poursuivre les tutos de familiarisation/personnalisation pour les grands débutants
Refaire le thème de ce site. Pour tout dire, l'excercice et la recherche iconographique d'un thème "fifties" m'ont amusée mais je ne m'y sens pas chez moi. En attendant j'ai mis le thème gris (qui ne m'emballe pas non plus) en thème par défaut.
Aller aider mes petits camarades
- sur le forum
- mise à jour de themes.dotaddict.org
- aider sur tips.dotaddict.org (au fait si vous voulez donner un coup de main vous aussi...)
- compléter la doc.dotclear.net
Supprimer la ml de support de mes thèmes qui ne donne rien de vraiment probant, reprendre le support directement ici

Pour me faire pardonner cette longue absence, je vous offre quelques liens qui m'ont intéressée ces derniers temps. Ils sont tous en anglais hélas, mais puisque j'ai réussi à comprendre vous devriez y parvenir vous aussi ;-)

FindFreeClipart. Un moteur de recherche spécialement dédié à la recherche de cliparts gratuits.
Photoshop Lady. Des tutoriels Photoshop bien fichus et classés par type.
Comment je fais pour supprimer le titre du blog ? Il est déjà dans ma bannière. Ne le supprimez pas, connaître les méthodes de référencement concerne aussi les designers. Les erreurs à ne pas commettre, les conseils à suivre : SEO Guide for Designers.
The Accessibility Checklist I Vowed I’d Never Write (à télécharger également en pdf). Une check-list des points de contrôle d'accessibilité écrite par Aaron Cannon, un développeur web lui-même aveugle. Je vous conseille également cette vidéo, qui le montre en train de naviguer sur le web. On en comprend tout de suite mieux les particularités et l'intérêt de respecter ses recommandations.

YAML Builder

Kozlika — Fri, 29 Feb 2008 09:09:00 +0100

YAML Builder, a tool for visual layout development of YAML based CSS layouts.

Outil en ligne de construction de structures css et html correspondant. Et en guise de cerise sur le gâteau, c'est valide ;)

Trois en un, bienvenue dans les Ateliers du klafoutis

Kozlika — Mon, 25 Feb 2008 14:42:00 +0100

J'en avais parlé, j'ai un peu tardé à le faire, cette fois moins par procrastination que par manque de temps et de disponibilité d'esprit. C'est aujourd'hui chose faite : les présents Ateliers du klafoutis remplacent tout à la fois mon blog des thèmes pour Dotclear 1, celui des thèmes pour Dotclear 2 et celui où je rassemblais mes notes sur Dotclear 2.

La prévisualisation des thèmes in vivo ici a été supprimée puisque désormais les blogs de démonstration de http://themes.dotaddict.org sont là. Il m'arrivera cependant de proposer en démo ici un thème pas encore déposé pour vous demander de le tester.

Le support des thèmes via une liste de diffusion s'est révélé insuffisant : peu d'entre vous ont osé s'y inscrire et d'autre part une fois les adaptations faites sur un thème on n'a pas forcément envie de rester abonné à une liste qui ne nous intéresse plus. Je ne supprime pas cette liste mais je rouvre les commentaires sur les billets. Chacun choisira ainsi ce qui lui convient le mieux.

J'ai sans doute des liens à corriger, les redirections depuis http://jethemais.klafoutis.org, http://jetheme.klafoutis.org et http://dissitou.klafoutis.org ne sont pas encore en place (je raaaaame ;)) mais ça va viendre.

En attendant, bonne visite à vous, j'espère que la peinture fraîche vous plaira^[1]. D'ailleurs si les années fifties vous amusent j'ai rassemblé dans une page de ce blog une pelote de liens inspirants et utiles.

Notes

[1] En fait j'étais partie sur une toute autre piste au début. Pour revenir au thème initial hop, un clic.

Malaclemys : au boulot les gens !

Kozlika — Wed, 31 Oct 2007 14:39:00 +0100

Selon une tradition que j'ai inventée moi même et que vous êtes priés de respecter, je mets en phase de test un nouveau thème à livrer dans les galeries de dotaddict.

Merci de tester sur vos navigateurs et de me faire part de vos remarques z'et suggestions.

Hop là : afficher Malaclemys !

Faire l'inventaire

Kozlika — Sun, 01 Jul 2007 10:57:00 +0200

Le blog est installé, il est en ligne et tout fonctionne correctement. Si vous êtes satisfait de ce premier blog et du thème que vous avez choisi parmi ceux disponibles (un tutoriel indique comment installer un nouveau thème), il ne vous reste plus qu'à rédiger vos billets, en vous référant au manuel d'utilisation pour découvrir plus avant votre outil et les fonctionnalités de l'interface d'édition du billet.

De façon générale d'ailleurs, survoler la doc, même si vous ne l'apprenez pas par cœur, vous permettra de vous souvenir vaguement « avoir lu quelque part quelque chose là-dessus » dont vous pourriez avoir besoin ultérieurement. Si le manuel ne répond pas à vos questions, rendez-vous sur le forum, il se trouvera bien quelqu'un pour vous orienter.

Si vous ne vous sentez pas encore tout à fait chez vous, vous pouvez procéder à des personnalisations. Ne cherchez pas à tout changer d'un coup, surtout si vous débutez (mais pas que). Procédez par petites étapes successives afin de maîtriser les changements que vous opérez et pouvoir revenir en arrière facilement car vous vous souviendrez de la manip que vous venez de faire.

Ce qu'il vous faut savoir

Pour éviter les grosses bêtises et surtout faciliter votre travail, avoir une idée générale du fonctionnement et de l'organisation de la mécanique qui pilote votre blog peut vous être fort utile.

Le fonctionnement global

Si vous avez suivi le conseil ci-dessus et que vous avez regardé la doc, vous avez sûrement lu le comment ça marche ?. Je le répète ici sommairement pour les feignasses : tout ce qui concerne le contenu du blog est stocké dans une base de données placée sur un serveur spécifique (le fameux « serveur sql » dont on vous demande le nom et les login et mot de passe lors de l'installation) ; ce qui se trouve sur votre serveur de fichiers (ou serveur ftp) ce sont tous les fichiers qui s'occupent du traitement et de la présentation de ces données.

Les fichiers de Dotclear

Situés donc, sur votre serveur de fichiers, ils sont regroupés dans le répertoire dotclear (ou tout autre nom que vous lui aurez donné lors de l'install). Parcourons-les rapidement (en souligné, les noms de sous-répertoires) :

admin : contient tous les fichiers de l'administration du blog. Pas touche.
cache : un répertoire qui stocke des informations au fur et à mesure pour éviter à dotclear d'avoir à tout « recalculer » à chaque fois. Il se vide périodiquement quand il a atteint sa taille maximale, vous n'aurez en principe pas à vous en occuper.
CHANGELOG : un fichier informatif qui accompagne chaque version de dotclear et indique ce qui a été modifié depuis la version précédente. Pas touche.
db : je ne sais même pas à quoi ça sert, c'est vous dire si vous pouvez laisser tomber et ne pas vous en préoccuper...
inc : le cœur du moteur. C'est là que se situent tous les outils de traitement, évidemment : pas touche (note : on verra que certains fichiers peuvent néanmoins réclamer une attention particulière mais nous n'en sommes pas là).
index.php : la page de démarrage ; elle sert de centre d'aiguillage vers votre (ou vos) blog(s). (Note : si vous connaissez un peu le html, ne faites pas l'erreur de croire qu'il s'agit de la page d'accueil comme c'est généralement le cas des pages ainsi nommées.)
locales : contient tous les fichiers de traduction permettant de basculer sur une interface dans une autre langue ou d'afficher les termes standards des thèmes dans la langue du blog. Pour le moment, ce répertoire contient par défaut les répertoire de l'anglais et du français. Les traducteurs vers d'autres langues ajoutent ici d'autres sous-répertoires.
plugins : contient les répertoires d'extensions des fonctionnalités du blog. Lorsqu'on ajoute un plugin, son répertoire vient se placer ici. Il vous faudra d'ailleurs parfois le faire manuellement si la configuration de votre hébergeur interdit l'installation automatique.
public : c'est le répertoire des médias : images, sons, vidéos, fichiers que vous souhaitez mettre en pièce jointe, etc. On les atteint via le ftp ou depuis l'interface d'administration -> Gestionnaire de médias.
themes : répertoire des thèmes, autrement dit des fichiers déterminant la présentation du blog. C'est ici que 90% du travail de personnalisation s'effectue.

On commence par...

Quelle pourrait être la première étape de personnalisation ?

Tout un blog bac à sable...

Pourquoi ne pas créer tout de suite un second blog qui vous servira de bac à sable ? Dotclear 2 offre la possibilité de créer facilement plusieurs blogs sur la même installation. Vous pourrez ainsi y trafiquer tout à loisir sans craindre de casser autre chose qu'un laboratoire et vos lecteurs continueront de lire tranquillement vos billets sans être gênés par vos expérimentations. Si vous optez pour cette solution, créez un deuxième blog et par exemple importez-y un blog de test. Voilà, votre chantier est prêt.

... ou au moins un nouveau thème

L'étape ci-dessus n'est en aucun cas obligatoire. Vous pouvez tout à fait travailler directement à vos personnalisations si créer un nouveau blog spécialement dédié vous semble inutile ou compliqué. A vous de voir. Vous pouvez alors passer directement au paragraphe suivant :

Et en tous les cas, créer un nouveau thème

On l'a vu, l'essentiel des personnalisations passe par des modifications de thème. Le billet suivant traitera donc de l'articulation d'un thème, des fichiers qui le composent et de l'étape préalable à toute personnalisation de celui-ci.

Ouverture d'une liste d'informations et d'entraide

Kozlika — Sun, 03 Jun 2007 12:52:00 +0000

Je viens de créer une liste de discussion à l'usage des utilisateurs de mes thèmes. Cette liste est destinée à recevoir les informations de mise à jour ou de création nouvelles et à en assurer le support et l'entraide.

Pour s'inscrire, envoyez simplement un mail vide à dckozthemes-request (@) ml.free.fr en indiquant simplement dans le sujet subscribe.

Je débute dans la gestion de ce type d'outil alors ne vous fâchez pas si je fais des bêtises ou s'il y a des dysfonctionnements. Vous pouvez signaler les soucis éventuels d'inscription ou désinscription dans les commentaires de ce billet.

Total Validator

Kozlika — Tue, 10 Apr 2007 19:22:00 +0200

Pinaise les gens, je viens de trouver l'arme ultime, le couteau suisse de la validation, le top du must : Total Validator. C'est pas trop d'la bombe de balle ? (Via Veerle Blog.)

Deux-trois trucs importants

Kozlika — Thu, 01 Feb 2007 20:52:00 +0100

Vraiment, vous pouvez lire en diagonale tout ce que vous voudrez mais là je vais carrément vous donner des ordres :

Jamais tu n'oublieras

Sauvegardez souvent, sauvegardez proprement.
Soyez toujours capables de revenir en arrière.
Ne vous lancez jamais dans aucune modification sans du temps et de la zénitude devant vous.
Faites un pas après l'autre.

Ça vous l'écrivez en gros sur une feuille, vous le signez avec votre sang et vous me l'envoyez sous contrôle d'huissier. Je détaille.

Les sauvegardes

Quel que soit le soin que vous apporterez à votre blog, vous ne serez jamais à l'abri d'une fausse manip, d'un coup de grisou chez votre hébergeur, d'un acte malveillant (beaucoup plus rares que les légendes urbaines le racontent mais ça existe). Parfois vous pourrez réparer et parfois non. Et dans ce cas seule la sauvegarde que vous aurez précieusement conservée par devers vous vous permettra de redonner à votre blog allure ~~humaine~~ bloguienne.

Ce qu'il faut sauvegarder :

le contenu de votre blog (billets, utilisateurs, commentaires...)
les medias (images, mp3, séquences vidéo...)
les fichiers personnalisés de présentation

Je ne vous explique pas comment ni pourquoi puisque tout ça est dans la documentation. Retenez juste que dès l'ouverture de votre blog il vous faudra le faire régulièrement. A mon sens, selon la fréquence à laquelle vous publiez entre une fois par semaine et une fois par mois est le minimum pour le contenu et les medias. Pour les fichiers personnalisés il vous suffira de faire une sauvegarde systématique de tous vos changements au fur et à mesure. En principe ces fichiers ne sont pas modifiés tous les quatre matins.

Soyez toujours capables de revenir en arrière

A chaque fois que vous devrez intervenir sur des fichiers placés dans votre espace web, faites-en une copie de l'état avant vos changements et conservez-la sur votre disque dur. Vous pourrez ainsi bidouiller en toute tranquillité avec la sécurité de pouvoir remettre l'ancienne version du fichier si vous avez fait trop de bêtises.

Ne vous lancez jamais dans les modifications directes sans cette précaution, même, surtout quand vous aurez pris de l'assurance. C'est à ce moment-là que vous vous direz à la fois que vous savez vachement bien ce que vous faites et que vous pouvez vous lancer dans les modifs les plus hardies. Eh bien c'est à ce moment-là que vous devrez le plus être capables de revenir en arrière ;)

Du temps, du calme

Les aménagements de blog c'est comme pour tous types de travaux : on se dit qu'on aura pour une heure et on y est encore trois heures plus tard. Et comme on n'avait prévu qu'une heure et qu'on a d'autres choses à faire, on s'énerve, on va trop vite, on ne prend pas assez de précautions... et on fait de grosses bêtises qui demanderont encore plus d'heures à rectifier.

N'intervenez sur votre blog que quand vous disposez du triple de temps que vous y prévoyez !

Un pas après l'autre

Ne faites pas plusieurs changements importants à la fois. N'en faites qu'un, testez si tout va bien, passez au suivant.

Quand vous installerez Dotclear, faites une installation basique, exactement comme expliqué dans le tutoriel. Testez. Si tout va bien, alors vous pourrez créer un deuxième blog, ou faire des redirections ou passer de tel type d'URL à tel autre, ou essayer de retirer « index.php » de l'adresse, ou installer un plugin, un thème, etc.

Quand vous installerez un plugin, laissez-lui ses paramétrages par défaut, testez que tout va bien. Revenez-y seulement après pour vos réglages personnels.

Si vous installez un autre thème, installez-le dans sa version originelle, testez que tout va bien. Passez ensuite aux personnalisations, une par une, en testant à chaque fois.

Vous voyez le principe ? Ça ira beaucoup plus vite pour identifier à quelle étape s'est produit l'erreur et y remédier, vous y gagnerez du temps en plus et de l'énervement en moins.

Et tout de suite

Vous créez un répertoire sur votre disque dur : MonBlog. C'est votre centre névralgique anti-migraines. Vous y placerez une version intacte de dotclear, un sous-répertoire sauvegardes dans lequel vous créerez un sous-répertoire genre sauv070201 pour chaque sauvegarde hebdomadaire, un répertoire modifs avec pareil un sous-répertoire par date et les fichiers avant intervention.

C'est une question d'habitude, et ça vaut vraiment le coup pour être tranquilles !

Aorakits en thèmes paramétrables

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

Dans le billet consacré aux structures prêtes à l'emploi pour Dotclear 2.0, j'ai ajouté au téléchargement de la feuille de style la possibilité de télécharger sous forme de thème en « prêt à personnaliser » chacune de ces structures.

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 !

Edit : voir désormais la page des Aorakits.

Ce dont vous aurez besoin avant de télécharger Dotclear 2.0

Kozlika — Mon, 29 Jan 2007 10:42:00 +0100

Vous avez examiné les différentes possibilités qui s'offrent à vous pour ouvrir un blog et avez choisi d'adopter Dotclear. Quelles sont les conditions à réunir pour pouvoir vous lancer ?

Bon allez, je me lance, par quoi je commence ?

Un hébergement

Pour pouvoir faire tourner un blog Dotclear (ou tout autre site web d'ailleurs), le préalable est de disposer d'un espace de stockage en ligne sur lequel vous mettrez vos pages pour qu'elles soient accessibles sur le web. Les prestataires qui mettent à disposition ces espaces s'appellent des hébergeurs.

Une erreur fréquente lorsqu'on débarque dans cette aventure est de confondre le prestataire qui vous permet de vous connecter à Internet, appelé fournisseur d'accès internet (FAI) et hébergeur. Confusion tout à fait compréhensible puisque beaucoup de FAI proposent également un service d'hébergement. Cependant, rien ne vous contraint à choisir le même pour les deux services. Ce qui devra gouverner votre choix d'hébergeur c'est avant tout qu'il réponde aux prérequis nécessaires au bon fonctionnement de l'application choisie.

Ces prérequis sont listés dans la documentation. Tous les hébergeurs proposent une page d'information sur la mise à disposition de ceci ou cela sur leur hébergement. Consultez cette page, si vous n'y comprenez goutte, envoyez-leur un mail pour le leur demander. Nous testons au fur et à mesure des « retours d'expérience » des utilisateurs les hébergements compatibles avec Dotclear 2.0, vous pouvez choisir votre hébergeur dans cette liste, ce qui vous épargnera le doute :)

Un nom de domaine

Il vous faudra également une « URL » : ce qu'on tapera dans la barre d'adresse du navigateur pour aller chez vous. Votre hébergeur vous en fournira une par défaut en « sous-domaine » de chez lui, qui ressemblera à http://monlogin.hebergeur.fr. Certains, comme Free par exemple, ne vous laisseront d'ailleurs pas d'autre choix : toutes les adresses des sites hébergées par Free sont de cette forme.

Mais la plupart des autres vous proposeront si vous le souhaitez de servir d'intermédiaire à l'achat d'un nom de domaine rien que pour vous. Là encore ne confondez pas les deux services : vous pouvez acheter un nom de domaine chez un prestataire spécifique (le plus connu en France est Gandi) et héberger vos pages ailleurs. Assurez-vous cependant que votre hébergeur accepte cette procédure (c'est presque toujours le cas).

Avoir un nom de domaine n'est pas une obligation, comme je vous le disais ci-dessus tous les hébergeurs mettront à votre disposition une URL en sous-domaine de chez eux. En revanche si j'en parle ici c'est qu'il est beaucoup plus simple si vous en souhaitez un rien-qu'à-vous de vous en occuper avant de lancer votre blog !

Quelques outils

Un client FTP

Vous aurez besoin d'envoyer des fichiers depuis votre disque dur vers l'espace que vous aura fourni votre hébergeur et d'en récupérer depuis cet espace vers votre disque dur (par exemple pour y apporter des modifications). Il faut pour cela un logiciel spécifique qui se charge du transport de l'un à l'autre. Le terme générique est « client FTP ». Au fait, puisqu'on en parle, attention avec « FTP », c'est le pur machin en jargon informatique qui paume car il ne veut pas toujours dire la même chose selon le contexte où il est employé. Il sera ainsi employé pour désigner votre espace web chez l'hébergeur (t'as quoi sur ton ftp ?), un procédé de transfert (tu l'as envoyé en ftp ?) et ce fameux logiciel de transport dont je vous parlais à l'instant (tu utilises quoi comme ftp ?).

Il en existe des gratuits pour toutes les plates-formes. Un consensus semble se faire autour de :

Filezilla (Windows)
gFTP (Linux)
Cyberduck (Mac)

Pour ma part, j'utilise Transmit^[1] (Mac, autour de 25 euros) dont je trouve la prise en main et l'ergonomie très aisées.

Un éditeur

Vous aurez des fichiers à modifier. Je vous recommande fortement de vous munir d'un éditeur de texte qui ne soit NI un traitement de texte NI un éditeur html. L'un comme l'autre ajoutent de leur propre initiative des caractères visibles ou invisibles ou « corrigent » automatiquement les données qui mettront la pagaille dans votre blog. Au pire il vaut mieux utiliser le bloc-notes de Windows ou Text-Edit de Mac.

Là encore il en existe de gratuits et très bien fichus, notamment en coloriant la syntaxe, ce qui en facilite la lecture et la modification. En voici quelques-uns :

Notepad++ ou SciTE (Windows)
Smultron (Mac)

Un bon carnet d'adresses

Quelques adresses à consulter et à garder sous le coude vous seront précieuses :

La documentation de Dotclear est votre premier point de rendez-vous.
Si vous n'y avez pas trouvé vos réponses, le forum d'entraide vous y aidera.
Les informations de sortie de nouvelle version ou de mises à jour à effectuer sont publiées sur le blog de news.

Notes

[1] Je vous fais passer par ce lien qui explique bien ce qu'est le FTP.

Choisir son outil de blog

Kozlika — Sun, 28 Jan 2007 09:22:00 +0100

Avant de vous lancer dans l'installation de Dotclear, il serait peut-être bon de vous demander si c'est bien la solution qui répond à vos attentes. Voici quelques conseils pour choisir son outil de blog.

Je veux ouvrir un blog, je commence par où ?

Par comparer les outils existants. Il existe deux familles d'outils de blog.

Ceux proposés en « plate-forme »

Pour ceux-là vous n'avez besoin que de vous inscrire sur un site, un peu comme pour ouvrir une boîte mail en ligne. On vous donne un identifiant et un mot de passe, on vous communique quelle sera l'adresse de votre blog pour que vous puissiez la transmettre à qui vous voulez et c'est parti, vous pouvez commencer à bloguer. Quelques habillages tout prêts vous sont proposés pour choisir l'apparence de vos pages. Selon la plate-forme choisie, pourrez plus ou mois la personnaliser. Les plus connus (liste non exhaustive) sont les Skyblogs, Viabloga, Blogger, Hautetfort, Typepad, CanalBlog... Ces plates-formes sont gratuites ou payantes, parfois à des tarifs différents selon le niveau de personnalisations possibles. Attention, bien peu des plates-formes dites gratuites ne le sont réellement : certes, vous ne débourserez pas un centime, mais vous serez tenu d'accepter de servir de « blog-sandwich » et que des publicités s'affichent sur vos pages. Tenez-en compte lors de votre choix. Sachez aussi que certaines plates-formes ne laisseront la possibilité de commenter vos billets qu'aux personnes dûment inscrites dans leurs tablettes, ce qui peut être rédhibitoire pour vos visiteurs, soit qu'ils trouvent ça trop compliqué, soit que comme moi ils refusent ce procédé.

L'avantage de ces plates-formes est indéniablement de vous débarrasser de toute préoccupation d'intendance. Vous n'aurez pas à « mettre les mains dans le cambouis », aucune connaissance technique préalable ou à acquérir n'est nécessaire.

A savoir, sauf pour quelques plates-formes, vous ne pourrez pas avoir un nom de domaine personnel. Il s'agira la plupart du temps de ce qu'on appelle des « sous-domaines » dans lesquels figure le nom de la plate-forme. Par exemple, l'excellent blog « La Boîte à images », qui a choisi la plate-forme Hautetfort, est joignable à l'adresse http://laboiteaimages.hautetfort.com

Les outils autonomes

On les appelle souvent « moteurs de blog ». Ceux-là vous proposent d'être maître chez vous. Ils mettent à disposition (gratuitement ou non) une application que vous déposerez sur un hébergement web qui vous appartient. Il vous faudra l'installer et le configurer. L'inconvénient – qui peut à mon sens être source d'amusement – est de devoir procéder soi-même à cette étape de mise en route, rencontrer parfois quelques aléas et devoir les résoudre. Si vous n'aimez pas la mécanique, si vous détestez lire une documentation, si vous répugnez à fréquenter un forum pour y chercher de l'aide, peut-être serait-il raisonnable d'y renoncer.

Mais si vous n'êtes pas rebutés par tout ça, vous bénéficierez d'une grande liberté de mouvement, tant pour personnaliser autant que vous le souhaiterez votre blog que tout simplement ne pas être dépendants d'un prestataire de plate-forme, ses publicités, ses obligations, ses propres aléas et dysfonctionnements éventuels.

Il existe dans cette gamme également plusieurs outils. Les trois les plus fréquemment utilisés en France sont WordPress, MovableType et Dotclear. Voyez leur documentation, leurs tutoriels, tâtez l'ambiance de leurs communautés d'entraide. Baladez-vous sur les blogs qui utilisent ces moteurs et interrogez ceux des blogueurs que vous connaissez pour leur demander ce qu'ils en pensent. Le mieux, si vous n'êtes pas trop flemmards, serait de les essayer tous les trois et voir avec lequel vous vous sentez le plus à l'aise. Vous seul savez lequel vous conviendra le mieux car les utilisateurs de tel ou tel outil auront toujours tendance à faire du prosélytisme :)

Vous avez choisi Dotclear 2,0 ? Vous avez bien raison. Les autres billets de cette catégorie vous aideront à franchir les étapes allant de « j'ai envie d'un blog à moi » jusqu'à l'inauguration en grande pompe.

Enfin... dès que je les aurai rédigés...

A l'attention des Gandiblogueurs

Marcel Biou — Tue, 23 Jan 2007 19:10:00 +0100

Je me doute qu'il est plus facile pour vous d'afficher la feuille de style d'un thème qui vous plaît et de la copier dans votre custom.css. Sur le principe ça ne me dérange pas, les thèmes sont en GPL.

Par contre, merci de ne pas linker les images associées directement depuis ici, tant pour vous que pour moi :

Pour vous : rien ne vous met à l'abri d'un déménagement de ce blog ou du renommage d'une image, auquel cas vous seriez bien embêté
Pour moi, si vous êtes quelques centaines à faire ça, bonjour la bande passante.

Alors :

On télécharge le thème sur son disque dur.
On copie la css dans le custom.css.
On copie le répertoire des images dans son propre gestionnaire d'images.
On indique les urls des images du thème depuis chez soi et pas chez moi.

Merci pour moi, merci pour vous !

Créer un nuage de tags

Kozlika — Sat, 20 Jan 2007 19:17:00 +0100

La présentation la plus prisée des tags est sans conteste ce qu'on appelle le "nuage". Les tags sont les uns à la suite des autres et la taille de leurs caractères varie en fonction de la fréquence d'utilisation du tag. Vous en voulez ? Voyons comment faire.

Où ?

On retrouve les tags en trois endroits : dans le menu du blog, dans la page les regroupant tous et dans les informations du billet. Nous ne parlerons pas ici des tags mentionnés dans les informations du billet car leur présentation en nuage demanderait des modifications dans les fichiers html. D'autant que sauf maquette particulière cela risquerait d'être particulièrement inesthétique !

Quoi ?

Dans le menu comme dans la page de tous les tags :

un lien est posé sur chaque tag conduisant vers la liste des billets dotés de ce tag ;
tous les tags sont dans une liste ;
chaque tag est un item de cette liste.

Structure de la liste dans le menu

<div class="tags">
   <h2>Tags</h2>
   <ul>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag90">nom du tag C</a></li>
   </ul>
</div>

Structure de la liste dans la page de tous les tags

<div class="content-inner">
   <ul class="tags">
       <li><a href="lien_vers_page_correspondante" class="tag50">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag C</a></li>
   </ul>
</div>

Comment ?

Pitite parenthèse : Vous aurez noté (je l'espère !) deux choses : la class posée sur la div englobant la liste des tags dans le menu et celle posée sur la liste des tags regroupés dans la page est la même : class="tags". A une petite nuance près (et zioup on en profite pour une petite leçon de css au passage...) :

* dans le sidebar, la liste est à l'intérieur d'un bloc de class tags
* dans la page des tags, la liste est elle-même de class tags

Autrement dit, dans le sidebar le marqueur sera .tags ul { } tandis que dans la page le marqueur sera ul.tags { }}}

Cette parenthèse refermée, on voit bien qu'en donnant des règles à .tags elles seront communes à ces deux listes. De la même manière les class marquant la fréquence du tag (onze niveaux : class="tag0", class="tag10", class="tag20", class="tag30", class="tag40", class="tag50", class="tag60", class="tag70", class="tag80", class="tag90", class="tag100") sont communes aux deux listes.

Si vous voulez donner un style différent aux deux listes, précisez le marqueur avec son parent, par exemple pour le menu utilisez #sidebar .tags et/ou pour la page des tags le marqueur .dc-tags .tags

Oui, bon, tu la craches ta valda ?

Voué, mais c'est mieux si on explique avant et que vous comprenez suffisamment pour adapter à vos besoins.

Sur la page des tags on voudrait bien que la taille de base soit plus importante :

.dc-tags ul.tags { font-size : 1.5em; }

On enlève les puces sur la liste des tags de la page tags :

.dc-tags ul.tags { list-style-type : none; }

On enlève les puces sur la liste des tags du menu :

.sidebar .tags ul { list-style-type : none; }

Ces deux règles peuvent être regroupées :

.dc-tags ul.tags, .sidebar .tags ul { list-style-type : none; }

On part de zéro pour les marges intérieures et extérieures des listes et des items qui les composent :

.dc-tags ul.tags, .sidebar .tags ul, .dc-tags ul.tags li , .sidebar .tags ul  li { margin:0; padding:0; }

On supprime le retour à la ligne pour chaque item :

.dc-tags ul.tags li, .sidebar .tags ul li { display : inline; }

On varie la hauteur des caractères en fonction de la fréquence :

.tag0 { font-size: 85%; }
.tag10 { font-size: 90%; }
.tag20 { font-size: 95%; }
.tag30 { font-size: 100%; }
.tag40 { font-size: 105%; }
.tag50 { font-size: 110%; }
.tag60 { font-size: 115%; }
.tag70 { font-size: 120%; }
.tag80 { font-size: 125%; }
.tag90 { font-size: 130%; }
.tag100 { font-size: 135%; }

Dans le menu (et uniquement lui) on voudrait bien placer une icône à gauche de chaque tag (l'image sera placée dans le rep images du thème et je la nomme ici tag.png).

#sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Ah zut ! l'item suivant vient se coller à l'item précédent, réservons une marge à droite de chaque lien :

.tags ul li a, ul.tags li a { padding-right : 12px; }

Servez-vous ci-dessus des ingrédients qui vous plaisent ou mettez tout ça ensemble :

 .dc-tags ul.tags { 
       font-size : 1.5em; 
       }
 .dc-tags ul.tags, .sidebar .tags ul { 
       list-style-type : none;
       margin : 0;
       padding : 0;
       }
 .dc-tags ul.tags li , .sidebar .tags ul  li { 
       margin:0; 
       padding:0;
       display : inline; 
       }
 .tag0 { font-size: 85%; }
 .tag10 { font-size: 90%; }
 .tag20 { font-size: 95%; }
 .tag30 { font-size: 100%; }
 .tag40 { font-size: 105%; }
 .tag50 { font-size: 110%; }
 .tag60 { font-size: 115%; }
 .tag70 { font-size: 120%; }
 .tag80 { font-size: 125%; }
 .tag90 { font-size: 130%; }
 .tag100 { font-size: 135%; }

 .tags ul li a, ul.tags li a { padding-right : 12px; }
 #sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Pfiou, ayé terminé ! Enfin... pour moi, parce que vous il vous reste à l'adapter à ce que vous aimez !

Mise à jour de tous les thèmes

Marcel Biou — Wed, 17 Jan 2007 16:50:00 +0100

Tous mes thèmes ont été mis à jour pour être compatibles avec la beta 5 de Dotclear. J'en ai profité pour remanier sur plusieurs d'entre eux la présentation des citations en ligne pour lesquelles j'avais souvent fait la boulette d'y apposer des marges et des bordures comme pour les citations en bloc.

Mais l'essentiel de cette mise à jour a consisté à modifier les marqueurs des boites intérieures de #blognav et #blogextra.

Base pour un thème à quatre colonnes

Marcel Biou — Sat, 06 Jan 2007 12:00:00 +0100

Voici un thème un peu particulier. En fait ça n'est pas un thème complet mais plutôt une base pour qui souhaite ce type de construction.

Il n'a pas été testé sous Internet Explorer car je n'ai pas Windows, j'attends donc vos retours avant de faire le package.

La strucutre générale comporte trois colonnes. Mais l'accueil et les pages suivantes présentent quatre colonnes : les billets sont répartis en deux colonnes sauf le dernier paru.

Il est impératif que vous complétiez la feuille de style, je ne livre là que la structure générale et la déco minimale !

Par ailleurs, pour que ce thème fonctionne joliment avec des blocs de hauteurs comparables, il nécessite l'ajout d'une fonction template qui permet l'interprétation de {{tpl:EntryExcerptAndContent}} qui récupère la totalité du billet ; on peut ainsi le tronquer à x caractères (400 dans la démo).

Cette fonction est présente dans le fichier _public.php du thème. Cependant j'ai constaté que le themeswitcher ne prend pas en compte les fichiers _public.php des thèmes. En ce cas, il vous faudra ajouter le plugin MoreTpl dans votre installation. Ce plugin comporte entre autres cette fonction nécessaire.

Migrer un thème : étape 2 (les commentaires)

Kozlika — Sun, 31 Dec 2006 18:40:00 +0100

Si votre thème ne touchait pas aux fichiers de structure (*.php), il est déjà fort présentable. Il y a toutefois un certain nombre de sélecteurs qui ont été modifiés et d'autres ajoutés. Ce billet compare les commentaires et décrit les modifications à apporter à votre feuille de style.

Structure

Sous DotClear 1.x.x

<div id="trackbacks">
  <h3 id="tb">Trackbacks</h3>
    <p id="c1" class="comment-info"> <span class="comment-number"><a>n° x</a></span>la date <strong>l'auteur</strong></p>		
      <blockquote>
      <p><strong>lien du blog qui trackbaque</strong></p>
      <p>Contenu de l'extrait</p>
      </blockquote>
      <p>URL de trackback</p>
</div>

<div id="comments">
  <h3 id="co">Commentaires</h3>
    <p id="c2" class="comment-info"> <span class="comment-number"><a>n° x</a></span> la date <strong>l'auteur</strong></p>
      <blockquote>
      <p>contenu du commentaire</p>
      </blockquote>
  <h3>Ajouter un commentaire</h3>
     <form>
     (le formulaire ayant été très peu modifié, je m'abstiens de le recopier ici.)
      </form>
</div>

Sous DotClear 2

<div id="comments">
  <h3>Commentaires</h3>
    <dl>
    <dt id="c2" class=" odd first"><a href="#c2" class="comment-number">n° x</a> date <a>Auteur</a></dt>
    <dd class=" odd first"><p>Contenu du commentaire</p></dd>
    <dt id="c5903" class="me  "><a href="#c3" class="comment-number">n° x</a> date <a>Auteur</a></dt>
    <dd class="me  "><p>Contenu du commentaire.</p></dd>
    </dl>
</div>
 
<form id="comment-form">
      <h3>Ajouter un commentaire</h3>
      (le formulaire ayant été très peu modifié, je m'abstiens de le recopier ici.)
</form>
  
<div id="pings">
    <h3>La discussion continue ailleurs</h3>
</div>
    
<p id="ping-url">URL de rétrolien</p>

<p id="comments-feed"><a class="feed">URL du rss du billet</a></p>

Différences

On notera tout particulièrement :

les deux blocs #trackbacks et #comments (dans lequel le formulaire était inclus) sont remplacés par 5 éléments :
- div#comments
- form#comment-form
- div#pings
- p#ping-url
- p#comments-feed
Au passage, #trackbacks s'appelle désormais #pings et ce bloc est désormais affiché après les commentaires et non plus en premier.
Les commentaires et pings n'utilisent plus une suite de <p>(comment-info)</p> <blockquote> (commentaire)</blockquote> <p> (comment-info) </p> <blockquote> (commentaire) </blockquote> ... mais sont regroupés dans une liste de définition <dl> <dt> (comment-info) </dt> <dd> (commentaire) <dt> (comment-info) </dt> <dd> (commentaire) ... </dl>
Le formulaire de commentaire inclut désormais le titre h3 formant ainsi un bloc complet isolable et doté d'un identifiant.
Les paragraphes comportant les url de ping et du fil de suivi des commentaires sont identifés.

Ajoutons également que

l'identifiant du bloc de prévisualisation #comment-preview devient #pr.
des class odd (impair), me (proprio du blog) et first (premier) font leur apparition.

Style

Reproduire l'existant

A l'exclusion de la mise en forme du formulaire, il faut donc réécrire les règles de présentation de toute cette partie. Pour le thème Kit par exemple, dont vous pouvez voir la css d'origine ici on supprimera tout le passage :

/* =================================================================
        6. COMMENTAIRES, TRACKBACKS
            (voir aussi formulaires en 8)
/* ============================================================= */

#trackbacks, #comments, #comment-preview {
	}
#trackbacks {
	border-top : 4px dotted #ddd;
	background : transparent url(images/comments.png) no-repeat top right;
	}
#comments h3, #trackbacks h3 {
	margin-top : 2em;
	margin-bottom : 1em;
	}
.comment-info {
	margin : 1.5em 0 0.5em 0;
    }
#comments blockquote, #trackbacks blockquote {
	margin : 0.5em 2em;
    }

Et pour retrouver une présentation similaire on remplacera ces règles par :

#pings, #comments, #pr{
	}
#comments {
	border-top : 4px dotted #ddd;
	background : transparent url(images/comments.png) no-repeat top right;
	}
#comments h3, #pings h3, #pr h3, #comment-form h3 {
	margin-top : 2em;
	margin-bottom : 1em;
	}
#comments dt, #pings dt {
	margin : 1.5em 0 0.5em 0;
	}
#comments dd, #pings dd {
	margin : 0.5em 2em;
	}

Une présentation plus élaborée

C'est déjà bien, mais on peut faire mieux. Tout d'abord en adaptant le tuto de Kit 1 pour la personnalisation des commentaires, puis en utilisant les possibilités offertes par les nouveaux sélecteurs.

Etape 1, reproduire le tuto de Kit pour DC1

Suivant la même démarche que dans l'exemple donné dans cet article, on remplacera les règles données ci-dessus :

#comments dt, #pings dt {
	margin : 1.5em 0 0.5em 0;
	}
#comments dd, #pings dd {
	margin : 0.5em 2em;
	}

par ces nouvelles, pour obtenir un résultat exactement identique à celui du tuto pour Kit 1 :

#comments dt, #pings dt {
	margin : 0;
	padding :  2px 1em;
	background : #ddd;
}
#comments dd, #pings dd {
	background : #eee;
	margin : 0 0 2em 0;
	padding : 2px 1em 0.5em 1em;
}

Mais on peut faire encore bien mieux sans difficultés grâce aux nouveaux sélecteurs. Inutile par exemple de mettre les mains dans le cambouis pour se faire remarquer dans les commentaires, DotClear 2 affectera la class="me" automatiquement aux commentaires de l'auteur du blog pour peu que celui-ci fournisse exactement les mêmes renseignements dans le formulaire de commentaire que dans son panneau des Préférences de l'utilisateur.

Etape 2 : encore !

Offrons-lui des caractères rouges en ajoutant à la suite des règles ci-dessus :

#comments dt.me, #comments dd.me {
	color : #A71602;
}

Wahoo, on ne pourra pas vous rater avec ça ;)

Bien et maintenant, sur le même principe, nous pourrions décider d'alterner le fond des infos de commentaire afin d'égayer la mise en page. On continue donc nos ajouts avec la règle :

#comments dt.odd, #pings dt.odd {
	background : #bbb;
}

Toujours plus

A vous d'inventer les enrichissements de mise en forme supplémentaires : ajouter une icône à l'url du flux des commentaires, un pictogramme pour l'url de trackback, un fond de couleur pour la prévisualisation... Si vous le souhaitez, n'hésitez pas à trackbaquer ici vos propres personnalisations de cette zone.

Attention, l'abus d'onglets est nuisible à vos publications

Kozlika — Sun, 31 Dec 2006 14:37:00 +0100

Expérience douloureuse vécue, que je vous raconte ici pour vous l'épargner :

Soit une Kozlika occupée à mille trucs, dont la surveillance de son blog pour en chasser les vilains spams et la rédaction d'un tutoriel de la mort qui tue sur un autre blog de la même installation.

Bêtement, j'ouvre un onglet pour surveiller l'un et un autre pour rédiger sur l'autre. Je vire un commentaire indu sur Kozeries, puis finis de rédiger le billet sur dcTips(). Clic : Enregistrer.

Plof, gourance de blog.

Cela tient à la gestion des sessions d'admin. Le navigateur met à jour son cookie de session au moment du traitement sur Kozeries et « mémorise » que vous êtes sur ce blog. Quand vous retournez sur l'onglet dcTips() le pauvre malheureux n'en sait rien et sauvegarde sur le dernier blog actif dans sa session, soit Kozeries. (Il doit y avoir plus précis dans l'explication mais l'idée est là...)

Vous me suivez ? Sinon c'est pas grave, mais pensez à ne pas ouvrir deux onglets d'admin en même temps si vous ne voulez pas aller ensuite traficoter dans la base de données pour réattribuer les billets...

Un style par catégorie/auteur/langue

Kozlika — Sun, 31 Dec 2006 13:00:00 +0100

Un lot de fonctions toutes prêtes disponibles (leur liste complète se trouve dans la doc)^[1] rend très aisée la création de styles différents en fonction de paramètres tels que la catégorie du billet (ou de la page), tel ou tel tag, etc.

Notes

[1] Lien à venir, c'est pas rédigé ;)

Exemple 1 : un style différent pour les pages d'une catégorie

Modification du fichier category.html

Le fichier html affichant tous les billets d'une catégorie s'appelle category.html. Depuis le thème par défaut, faites-en une copie puis placez-la dans le répertoire du thème que vous utilisez.

La ligne 34 est ainsi rédigée :

<body class="dc-category">

Modifiez-la de la façon suivante :

<body class="dc-category bo-{{tpl:CategoryShortURL}}">

Ce {{tpl:CategoryShortURL}} sera remplacé par le nom « URL-isé » de la catégorie (par exemple DC1-vers-DC2 pour la catégorie DC1 vers DC2), ce nom « URL-isé » figure dans le champ URL de la catégorie lorsque vous cliquez sur le nom de la catégorie après avoir choisi le menu Catégories dans votre espace d'administration. C'est aussi celui qu'on retrouve à la fin de l'URL pointant vers ses pages spécifiques, après /category/.

Note 1 : vous remarquerez au passage que le body possède déjà une class : dc-category, c'est le cas pour tous les fichiers du thème, permettant ainsi d'appliquer des sytles différents selon le contexte.

Note 2 : j'ai choisi de préfixer le nom de la class spécifique par bo- de façon à pouvoir la distinguer si par exemple je choisissais d'affecter également un style spécifique en fonction de la catégorie sur les billets de la home ou d'une autre page.

Modification des CSS

Les pages de chaque catégorie disposent désormais d'une class spécifique bo-Ma-categorie et comme cette class a été placée dans l'élément qui contient tout le reste on peut tout modifier dans la présentation de cette page. Ça se passe bien entendu dans le fichier style.css du thème choisi pour le blog. Quelques exemples :

Modifier la couleur du fond de page

Supposons que notre feuille de style comporte une règle attribuant un fond blanc à la page :

#page {
   background : #fff;
   margin : 0;
   padding : 0;
   width : 800px;
}

Et que l'on souhaite un ravissant rose bonbon pour le fond de la catégorie Ma vie mon œuvre. On écrira alors une règle supplémentaire pour la page contenue dans le body dont la class est "bo-Ma-vie-mon-oeuvre" :

.bo-Ma-vie-mon-oeuvre #page {
   background : #FF6EC7;
}

Note 1 : n'importe quelle propriété aurait pu être changée, le fond n'est qu'un exemple.

Note 2 : bien entendu, ce que vous avez fait pour une catégorie vous pouvez le refaire pour une autre puisque le body est affecté d'une class différente pour chacune d'elles.

Cas particulier

Il se peut que vous ayez déjà déterminé une règle pour les pages des catégories en général, par exemple avec la règle :

#page {
   background : #fff;
   margin : 0;
   padding : 0;
   width : 800px;
}
.dc-category #page {
   background #eee;
}

Ces règles affichent toutes les pages du blog avec un fond blanc, sauf celles des catégories avec un fond gris pâle. Pour donner la priorité à votre règle s'appliquant aux pages de Ma vie mon œuvre, précisez alors :

.dc-category.bo-Ma-vie-mon-oeuvre #page {
   background : #FF6EC7;
}

(Notez que les deux marqueurs de class sont collés .class1.class2)

Exemple 2 : un style différent pour les billets d'un auteur

Modification des fichiers html

Il va falloir dans un premier temps déterminer dans quel contexte on veut que le style différent par auteur soit appliqué et choisir les fichiers html à modifier en conséquence. Pour cet exemple, j'imaginerai que je souhaite appliquer un style différent aux billet de tel ou tel auteur sur la page d'accueil, dans les billets triés par catégories et dans le billet seul.

Je déplace donc vers le répertoire de mon thème une copie des fichiers :

home.html
category.html
post.html

Pour chacun d'eux, je remplace la portion de code :

<div class="post"

Par :

<div class="post po-{{tpl:EntryAuthorID}}"

Encore une fois, je choisis de préfixer le nom de la classe spécifique. Outre que ça réserve la possibilité d'autres class se servant de l'auteur (par exemple si l'on souhaite installer le plugin AuthorMode et styler les pages en fonction de leur auteur), ce préfixe sera aussi une bonne façon de me souvenir que j'ai affecté cette classe au bloc post quand je rouvrirai ma feuille de style dans six mois...

Je conseille vivement d'utiliser {{tpl:AuthorID}} pour spécifier la class plutôt qu'une autre fonction affichant le nom ou le pseudo : AuthorID correspond au login de l'utilisateur, il a peu de chances d'en changer et de plus il ne contient pas d'espace, ce qui nous embêterait bien !

Modification des CSS

Exactement comme on l'a vu plus haut avec les catégories, cette class "po-monlogin" va permettre d'appliquer un style différent par auteur. Par exemple Victor Hugo (dont le login est totor) ne jure que par les polices à empattement alors que vous avez choisi un joli "lucida grande" pour les caractères des billets. Qu'à cela ne tienne, vous ajoutez dans votre feuille de style la règle suivante :

.post.po-totor {
   font-family : Georgia, "Times New Roman", serif;
}

Si vous souhaitez d'autres exemples, parlez dans l'hygiaphone. Mais attention : vous devrez le réaliser sur votre blog et nous montrer le résultat ! ;)

Note : pour « récupérer » la langue d'un billet (sous la forme en / fr / fr-ca / fr-be etc.) la fonction template correspondante est {{tpl:EntryLang}}