Les ateliers du klafoutis - Tag - tutoriel

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.

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.

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 !

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.

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}}

Migrer un thème : étape 1 (la fiche d'identité)

Kozlika — Sat, 30 Dec 2006 14:55:00 +0100

Les thèmes pour DC1 sont utilisables presque tels quels pour DC2. La première étape que vous devrez suivre sera de donner à ce thème une « carte d'identité » reconnaissable par Dotclear 2.0.

Ah... et oubliez les fichiers *php ; ils n'ont plus cours dans Dotclear 2.0.

Dans un nouveau répertoire montheme transférez ou copiez depuis votre ancien thème le fichier style.css (et layout.css si vous en aviez un) ainsi que le répertoire contenant les images du thème.
Ajoutez dans montheme une copie du fichier _define.php contenu dans le répertoire du thème par défaut. Remplacez les valeurs par celles qui correspondent à votre thème :

	/* Name */                   "Nom du theme",
	/* Description*/         "Description breve",
	/* Author */                "Auteur",
	/* Version */               '1.0'

Note. Contrairement à l'ancien desc.xml que nous utilisions pour Dotclear 1, le nom du thème n'a pas besoin de refléter à l'identique le nom du répertoire.

Envoyez le répertoire montheme dans le répertoire des thèmes de votre blog. Sélectionnez-le depuis Tableau de bord -> Préférence des thèmes puis revenez admirer le résultat. Vous voyez ? Il pourrait presque être utilisé sans modifs :)

Antispam : Akismet

Kozlika — Sat, 30 Dec 2006 13:57:00 +0100

Comment activer Akismet sur son installation ?

Le contenu de ce billet figure désormais dans la documentation.

Checklist pour le switch

Kozlika — Sat, 30 Dec 2006 09:40:00 +0100

Essayons d'être vaguement méthodique. J'essaie ici de récapituler les étapes nécessaires pour ceux qui ont un blog sous Dotclear 1.x et souhaitent passer à Dotclear 2.0. Donnez-vous du temps pour réaliser cette mutation, rien ne presse !

Avant toute chose :

S'assurer que son hébergeur offre les prérequis permettant l'installation de Dotclear 2.0. Si ça n'est pas le cas mais que vous souhaitez quand même migrer, s'enquérir d'un hébergeur compatible.

Faire des essais

Faire une installation d'un blog de test « pour des prunes », pour s'assurer qu'on a bien pigé la procédure d'installation et se familiariser avec l'interface et les diverses manipulations sans risquer de casser le vrai blog (attention, si vous êtes chez Free ça ne sera pas possible sur le même compte, en ce cas ouvrez un autre compte Free pour faire les tests).
Tester la fonctionnalité d'import en suivant les instructions de la documentation. Les anciens chemins internes ne fonctionneront pas et les images ne s'afficheront pas mais c'est pas grave.
Pourquoi ne pas en profiter pour adapter votre thème sur cette install de test, soit en partant de celui que vous utilisiez sous DC1^[1], soit en en élaborant un nouveau (voir ci-contre le lien vers la galerie des thèmes disponibles).

Préparer ses valises

Prévenir les lecteurs que ça va être un peu le bazar quelques jours. Choisissez soit de fermer les commentaires et trackbacks le temps de la réinstall, soit d'informer vos lecteurs que les commentaires publiés ultérieurement à votre annonce ne seront pas conservés.
Installer sur votre blog DC1 le plugin Flatexport, faire le fichier d'export.

Assurer ses arrières

Faites une sauvegarde complète de votre répertoire de l'ancien blog et de sa base de données via le plugin Opérations MySQL vers votre disque dur. C'est votre ticket de retour en cas de panique.
Ne supprimez pas tout de suite vos anciennes données : renommez le répertoire de l'ancienne install (de dotclear à was-dotclear par exemple). Si vous installez le nouveau Dotclear sur la même base de données que l'ancien donnez un autre préfixe aux tables de la nouvelle install (ça se détermine dans le fichier inc/config.php qu'on vous demande d'éditer avant l'installation).

C'est parti !

Installer Dotclear 2 (vous êtes désormais super à l'aise puisque vous avez suivi les points 1 et 2 du paragraphe « Faire des essais » n'est-ce pas ? ;)
Créer le nouveau blog. Pensez à vous inspirer des notes Isoler les fichiers personnels et/ou Mon install multiblog^[2] et de veiller à ne pas casser les anciens liens.

Après le switch

Dans un fichier .htaccess placé à la racine de l'espace web, faire les redirections des anciennes URL vers les nouvelles. Vous pouvez dans un premier temps utiliser le même fichier que celui copié dans ce billet (en l'adaptant à votre cas bien sûr) et voir s'il fonctionne. Si ça n'est pas le cas, voyez sur le forum d'autres modèles proposés. C'est l'aspect le plus casse-pieds du machin : tel .htaccess fonctionne chez tel hébergeur mais pas chez tel autre :/
Faire un billet d'annonce de migration effectuée à vos lecteurs et demandez-leur de vous signaler les dysfonctionnements éventuels.
Tirez la sonnette d'alarme sur le forum si vous rencontrez un souci, mais pas avant d'avoir cherché si ce problème n'aurait pas été déjà posé et résolu... Pensez notamment à regarder (ou à l'aide du module de recherche) si des instructions ou conseils spécifiques pour votre hébergeur existent. Dans cette section du forum il y a des fils dédiés à tel ou tel hébergement.

Notes

[1] Un p'tit guide à suivre dans les jours qui viennent.

[2] Même pour un seul blog, cette méthode peut se révéler hyper pratique et rationnelle.

Ne pas casser les anciens liens

Kozlika — Sat, 30 Dec 2006 00:57:00 +0100

Objectif : Les images dans les billets de l'ancienne installation doivent pouvoir continuer s'afficher dans les billets importés dans le nouveau blog. Autrement dit il faut maintenir l'existence des anciens chemins (ex. /kozeries/images/dotclear.png).

Il a été question de la redirection des billets, catégories, flux de syndication dans un autre billet de ce blog. Mais qu'en est-il pour les medias qui avaient été insérés dans le blog sous Dotclear 1.x ?

L'un des changements de la migration de Dotclear 1.x vers Dotclear 2.0 est l'organisation différente des répertoires. En effet les images par exemple sont désormais rangées dans un répertoire nommé public alors qu'auparavant elles étaient toutes rangées dans un répertoire images.

On peut alors suivre deux méthodes :

déplacer les images dans le nouveau répertoire public et modifier tous les chemins des images dans les billets, soit en les rééditant un par un, soit en effectuant un chercher/remplacer sur le fichier d'export avant de réimporter dans le nouveau blog, soit en ajoutant dans un fichier .htaccess une règle de rewrite rule pour que les chemins vers l'ancien répertoire pointent vers le nouveau ;
ne toucher à rien (ou presque).

Moi ça me fait peur de me tromper quelque part, et puis je suis une feignasse. Donc forcément j'ai utilisé l'autre solution : ne toucher à rien :

Fastoche !

Placez votre ancien répertoire images au même niveau que votre répertoire public de votre nouveau blog. Dans mon cas, puisque j'ai installé mon blog selon la méthode « un répertoire par blog », je place ce répertoire dans le répertoire kozeries.

Vous savez quoi ? C'est tout ! Le chemin vers ces images n'a pas changé, elles s'affichent sans sourciller dans vos billets. Elle est pas belle la vie ?

Et autres medias

Vous en ferez autant si vous aviez des vidéos, des fichiers offerts au téléchargement, etc. Il vous suffit de veiller à ce que l'ancienne hiérarchie des répertoires soit conservée.

Exemple : votre blog se trouvait dans un répertoire blog et vous offriez des fichiers .zip à télécharger dans le répertoire share/download de cette installation. Deux cas peuvent se présenter :

vous avez déjà un répertoire blog sur votre nouvelle installation (par exemple parce que vous avez nommé ainsi le répertoire accueillant Dotclear 2. Créez alors dans blog un répertoire share avec un sous-répertoire downlaod et placez-y vos fichiers .zip
vous n'avez pas de répertoire de ce nom dans votre espace web : eh bien créez-le puis placez-y un sous-répertoire share avec un autre sous-répertoire download et vos fichiers .zip à l'intérieur.

Mais je crois que vous avez compris le principe non ?

Soignons-nous

M'enfin feignasses ou pas, c'est quand même mieux de regrouper ses medias. Il vous faudra donc tranquillement un jour ou l'autre procéder au transfert de vos images ou autres fichiers dans les répertoires idoines et modifier les chemins. Mais cette solution permet de procrastiner autant qu'il vous plaira...

Mon install multiblog

Kozlika — Fri, 29 Dec 2006 21:04:00 +0100

Le contenu de ce billet figure désormais dans la documentation.