Un thème pour Dotclear ?

A l'origine le thème a été développé pour Wordpress mais il a tellement de gueule que je me suis dis que cela ne serait pas si compliqué que ça que d'en faire une version pour Dotclear. En réalité entre hier soir et ce soir j'ai parcouru un petit peu le Net pour trouver quelques éléments :

  1. On ne le trouve pas en démonstration sur le site mais en cherchant un peu j'ai trouvé ce site qui l'utilise,
  2. Mais aussi sur le site de Mister lwii qui a fait une adaptation en français du thème (mais toujours sous Wordpress).
J'ai donc récupéré le fichier .psd sur le site pour pouvoir faire quelques modifs et je cherche encore la typo utilisée pour les images afin de faire une version française de ce template. Une piste que j'ai trouvé tout de même : La police que l'on peut utiliser pour modifier le template serait Jerry's Handwriting ...

Je finalise donc les fichiers restants afin de pouvoir faire un package du thème et le distribuer ... Une bonne remarque de Lomalarch sur le forum de Dotclear me signale qu'il me faudra attendre l'autorisation de SmashingMagazine pour pouvoir faire la distribution de ce template. En attendant je le ferais évoluer ici ...

Version 0.9

Je me permet de rajouter ce numéro de version car je ne pourrait pas ce soir terminer le thème (pas de quoi retoucher le psd sur mon portable) et le "packager" ... Il me reste à peine 20 minutes pour respecter la date de création de ce billet (mais je le modifierais encore ...) et il y a encore quelques petits trucs à règler pour passer à la version supérieure ...

  1. Retoucher les pages archives (2) pour qu'elles "collent" au template,
  2. Retoucher les pages tags (2) de la même façon, ainsi que la page d'erreur,
  3. Adapter le css pour tout ce qui touche les liens rss et aussi les tags de la page catégorie, ...
  4. Retravailler la mise en forme du bas de la page (les commentaires par exemple), ...
  5. Installer le plug-in Gravatars ??? Je me tate ... Cela impose aux utilisateurs de l'utiliser ...
Bref c'est pas gagné pour ce soir ! En plus je ne voudrais pas trop "dénaturer" le thème initial ... N'est pas encore installé non plus le fichier .psd avec la typo adéquate pour changer les liens ou les différents textes dans la charte graphique.
J'ai fais une modification avec une typo (AndrewScript), le rendu est pas trop mal pour les textes en minuscule mais pas pour les majuscules ... Je retoucherais ça à nouveau ! En fait je n'ai pas trouvé de typo qui donne un rendu plus intéressant, je vais donc rester sur cette typo pour l'instant !

A tester la Typo Note This ... Peut être pour la finalisation de la version 1.0.

Version 1.0

Dans l'attente d'une réponse de Smashing Magazine je me lance donc dans la version 1.0 qui pourrait être distribuable si j'en ai l'accord. Dans cette version je prévois quelques améliorations :

  1. le système de recherche en haut de la page comme il est prévu initialement dans le template pour Wordpress si j'arrive à y installer le widget de recherche de Dotclear ...

Version 1.1

Je n'ai pas eu le temps de développer ce que j'avais prévu sur la version 1.0 et vu que je viens de recevoir l'autorisation de Smashing Magazine je me suis dis que cette première version allait pouvoir être lancée. Dans la prochaine version il y aura quelques modifications :
  1. Travailler sur l'imbrication et le nommage des blocs pour les rendre aussi proche que possible de celui du thème par défaut pour faciliter l’inclusion des templates de plugin (merci Lomalarch cela va me rajouter du taff).
Au vu du rendu que donnait la version 1.0 (trop personnalisée et pas adaptée à un dotclear 2.0) j'ai fait cette version un peu moins pointue.

Version 1.2

  1. Tester le rendu avec la typo Note This, (si si je vais y arriver un jour)
  2. Modifier encore un peu le thème disponible sur Dotaddict car il y a (encore) quelques merdouilles et éventuellement y ajouter des pages de plug-ins mise en page.

Télécharger la version actuelle

Voilà donc la version 1.2 avec de nombreux aménagements sur la feuille de style qui devrait permettre de gérer un peu mieux tous les bugs rencontrés par les différents utilisateurs. Le fichier CSS retouché par Jonathan (voir commentaire) a été intégré dans l'archive. Un grand merci à lui pour ce qu'il a fait !

Vous pouvez télécharger la version 1.1 ci-dessous ou sur Dotaddict. Cette version contient moins d'appels aux balises propres à la version 2.1.1 de Dotclear.

Je vous invite à télécharger la version actuelle (1.0) ici ou par le biais de Dotaddict (dès que j'aurais réussi à l'envoyer):

Cette version intègre la gestion des Gravatars dans les commentaires. Plutôt que de développer 2 versions (un petit peu compliqué à gérer tant sur Dotaddict qu'ici) je vous propose ci-dessous de vous expliquer les lignes à supprimer si vous ne désirez pas utiliser ce système.

Eléments installés mais modifiables

1 - Dans cette version, sur la page d'accueil, j'ai mis un appel à la première image, avec la balise {{tpl:EntryFirstImage}}, qui affiche une vignette de petit format à côté de l'extrait de votre texte. Elle affiche la première image du texte. Si vous désirez modifier cet affichage regardez du côté de la doc de Dotclear et modifiez la ligne 67 du fichier home.html.

2 - Toujours sur la page d'accueil (home.html pour ceux qui ne savent pas) le thème Notepad Chaos fait un appel aux 10 derniers billets du site sur la partie de droite "derniers articles". Si vous désirez modifier cet affichage il vous suffit de modifier la ligne 113 du fichier home.html, en remplaçant le 10 du <setting name="title">10</setting> par ce que vous voulez.

3 - De la même façon j'ai mis un appel au widget Liens en dessous des catégories. Pour remplacer cet appel par un autre il vous faudra modifier la ligne 124 du fichier home.html.

4 - Sur les autres pages l'appel aux 10 derniers billets se fait par l'appel du widget extra dans lequel vous installez les derniers billets.

5 - J'ai donc choisi de mettre le plug-in Gravatar en installant le plug-in proposé sur la page de Prendre un café (création d'un fichier _public.php et installation de l'appel sur la ligne 106 du fichier post). Je l'ai configuré via le panneau d'administration pour qu'il fasse 40 pixels de haut et qu'il s'intègre ainsi dans la feuille de style en dessous du numéro du commentaire.

6 - Si vous ne voulez pas l'utiliser il vous suffit de modifier la page post.html (ligne 106) en supprimer l'appel {{tpl:gravatar class="gravatar_img" size="40" altimg="http://www.example.host/default_gravatar.png" alt="Gravatar de %s"}}. Vous pourrez alors aussi supprimer le fichier _public.php qui ne vous servira plus !

7 - Il reste encore la div "side-meta"que je n'ai pas utilisés dans mon template. A vous de voir ce que vous en faite !

8 - Les 3 onglets du haut de page se trouvent sur la page _top.html du thème. Ils font référence à des pages qui sont modifiables par vos soins. Pour cela vous disposez du thème en psd ou pfi (photofiltre studio) qui vous permet de modifier le texte. Les liens sont eux aussi modifiables (lignes 8, 9 et 10), le premier faisant référence à l'accueil, le second à une page "about/a propos" et enfin la dernière aux archives. Je n'ai fait que reproduire ce que j'ai trouvé sur l'exemple de Smashing Magazine ... A vous de voir !

Pages XHTML et CSS valides !

C'était quand même le minimum, non ? Toutes les pages du template sont validées par HTML Validator via le plug-in idoïne de Firefox. Le CSS est lui aussi valide (confirmation via le W3C CSS Validation Service).

Bugs d'affichage

J'ai remarqué 2 légers bugs d'affichage sous Google Chrome et Safari. Pas grand chose de méchant mais un léger décalage de 1 ou 2 px en haut. Je ne m'amuserais pas à faire du hack pour ce genre de détails ...


Rendu navigateurs

J'ai testé le thème sous Firefox version 1.5, 2 et 3, sous Opéra 9.61, sous Safari 3.1.2 (léger bug d'affichage voir ci-dessus), sous Google Chrome (léger bug) et enfin sous Internet Explorer 7, 6 (toujours le même bug) et 5.5 (là c'est carrement merdique mais combien reste t'il d'utilisateurs de cette merde antique ?).

Bref on peut dire que ce thème est compatible avec les navigateurs actuels !

Vous l'utilisez ?

Si jamais vous utilisez ce thème merci de me laisser un commentaire et je vous ajouterais à la liste ! Merci de laisser le lien vers Smashing Magazine dans le footer par respect pour l'excellent travail qu'ils fournissent et sans qui je n'aurais pas pu faire ce thème.

Bugs a l'installation

Je remarque que j'ai du oublier quelques éléments importants car sur le blog de démonstration de Dotaddict il y a quelques soucis ... Je me penche là dessus pour voir comment règler ça !

L'espace de recherche part en vrille, les différents widgets appelés ne sont pas correctement affichés et les billets récents n'aparaissent pas ... Ca fait beaucoup de bugs !