Thème dotclear Carnet
Par ephase le jeudi, juin 10 2010, 01:18 :: Création :: Lien permanent
Il y a maintenant plus d'un an, je vous parlais d'un thème Dotclear fait pour mon ami Bastien. J'avais alors partagé sur ce blog l'en semble des fichiers composant ce thème (gabarit Inkscape, fichiers Gimp). Mais le thème n'était pas vraiment fini : il manquait la gestion des rétroliens, des archives et les images n'étaient vraiment pas optimisées). J'y ai donc retravaillé et vous livre ici la version 1.0.
Quelques changements esthétiques
J'ai apporté quelques changements au thème : j'ai enlevé tous les pins dans le header afin que le thème puisse convenir a quelqu'un qui n'utilise pas Ubuntu ou qui ne sais pas ce qu'est Jelix... J'en ai profité pour assombrir la couleur du bois en arrière plan et baisser la saturation.
Optimisation des images
Le thème se compose de beaucoup d'éléments graphiques, à l'origine, les images accusait plus de 600Ko sur la balance. Pour optimiser tout ça, j'ai eu recours au sprite pour les titres. Le sprite est une technique directement issues du jeux vidéo 2D : l'ensemble des titres de la barre latérale sont en fait inclu dans une seule et même image que l'on "re-découpe" par le biais du CSS.

J'ai aussi pas mal utilisé un petit utilitaire en ligne de commande : pngnq. Celui-ci reduit le nombre de couleur du PNG à 256 en essayant de garder une qualité optimale (et de préserver au mieux la transparence). Le résultat est souvent spectaculaire, certains de mes png ont minci de plus de 60%. Mais attention ce régime se fait des fois au prix d'un qualité amoindrie. Dans l'image ci-dessous, la partie droite a été optimisée avec pngnq : le dégradé gris est moins bien defini (c'est aussi le cas du rouge mais c'est très peu visible) mais le poids passe de 14,7 Ko à 6,1Ko.

Rétroliens et Archives
Le thème original avait été fait pour Bastien, il n'utilisait aucune de ces deux fonctionnalités, je les ai donc rajouté ainsi que toute une série de titre qu'il m'a gentillement écris comme Accueil, Archives, derniers commentaires etc...
Fichiers et licences
Comme pour le thème original, celui-ci est fourni sous licence Creative-Commons by-sa 3.0. Vous trouverez en pièce jointe de ce billet le thème, mais aussi le gabarit Inkscape avec toutes les écritures et les éléments. J'essayerais de faire le ménage dans mes fichiers Gimp pour les fournir ultérieurement (y'a du .boulot...). Voici donc Carnet...
Changelog
- 20 juillet 2010 : version 1.2
- Sidebar : rajout des titres "derniers billets" et "important" (pour les billets sélectionnés)
- ContactMe : modification de l'image de fond du formulaire de contact
- ContactMe : le bug javascript sur la validation du formulaire de contact a été corrigé
- 11 juin 2010 : version 1.1
- Sidebar : ajout des flèches sur les listes et modifications des marges
- Sidebar : rajout du titre manuscrit "liens"
- Sidebar : titres h2 sans écritures manuscrites en bleu
- Shadowise : contours enlevés les images trop petites pour êtres ombrées
- Archives : corrections de l'affichage des colonnes
- 10 juin 2010 :version 1.0

Commentaires
C'est un joli thème, assez original. Pour l'optimisation des images j'utilise personnellement l'extension "Save for the Web" de Gimp. C'est particulièrement utile pour générer des png en couleurs indexées (8bit) en une seule opération.
Merci pur les sources, c'est toujours intéressant de voir comment est construit un design pour le Web
Il y a aussi optipng qui permet d'optimiser un png en lossless, le résultat est parfois hallucinant... et sans perte
bonjour
@Bruno : Je ne connais pas du tout ce plugins, je vais regarder ça. Mais il faut dire de pngnq en ligne de commande est rapide et efficace. Je traitre comme ca toute les images du thème en une seule fois. Merci pour le compliment sinon
@benpro : avec optipng, j'obtiens 12 à 25% de gain... Je l'utilise quand je veux un PNG 24 bits.
Magnifique thème. J'aime beaucoup :D.
Très joli thème ! Je vais le tester pour mon blog.
@Edouard : Je viens de voir que votre blog est passé au thème Carnet, mais attention, il nécessite Dotclear
2.1.72.1.6 (nouvelles balises templates pour les tags). C'est pour cela que que les tags ne s'affichent pas chez vous... En plus, je vois que j'ai des modifications à faire sur le thème.ok, je vais reprendre l'ancien en attendant
J'aime beaucoup ce thème.
Mais comment remplacer le nom de blog dans le titre et mettre le mien: Clopinettes?
Je ne connais pas l'informatique: je suis une utilisatrice bidouilleuse!!
@hchris.j : je peux vous faire une version personnalisée du thème avec votre titre. Écrivez le nom que vous voulez donner sur une feuille blanche au feutre. Photographiez votre oeuvre et faites me la passer. Si ça vous interesse envoyez moi un message moi un message par la partie contact du site, je vous donnerai mon adresse courriel.
J'aime beaucoup ton thème, d'ailleurs, j'aimerais l'utiliser.
Pour cela, je pense qu'il faut que je modifie le fichier gabarit de Inkscape?
Si c'est le cas, as tu une explication au fait que je n'arrive pas à ouvrir le fichier avec Inkscape? Je l'ai téléchargé 2 fois sur 2 PCs différents.
Merci
Alexis
@alexis : tu as besoin de modifier le gabarit si tu veux personnalier les éléments graphiques... En tout cas le fichier gabarit.svgz était bien "pourri", je viens donc d'en remettre un bon.
Yorick / ephase
Merci pour ta réponse. J'essaye toujours en vain de télécharger et d'ouvrir le gabarit.
Ça ne fonctionne toujours pas
Pour info, j'utilise Ubuntu et Inkscape 0.47
@alexis : il semblerais que lors du téléchargement, firefox fait quelque chose pas pas bien au fichier svgz (lorsque je le prends sur le ftp tout vas bien, mais en le prenant sur firefox rien ne va plus), j'ai donc mis une archive tar.gz.... Tout devrais aller maintenant
Super, ça fonctionne correctement.
Je vais regarder ça de plus près.
Merci
Bonsoir,
Déjà je voudrais vous remercier pour ce thème, c'est exactement ce que je recherchais pour mon nouveau blog!
J'ai deux questions:
- Quelle police avez-vous utilisé pour les écritures manuscrites bleues? Comme hchris.j je souhaiterais remplacer le titre (qui est "blog" actuellement) en gardant la même écriture,
- C'est une question assez classique dont j'avais déjà la réponse il y a quelques années (création d'un premier blog) mais là je galère vraiment: dans quel fichier est-ce que je peux changer l'ordre des parties de la colonne de droite (Recherche, Archives, Liens, etc ...)?
Merci et encore bravo pour ce thème!
titre.pngqui se trouve dans le répertoire/imgsdu thème.Pour modifier l'ordre des éléments dans le bandeau de droite, il suffit d'aller dans l'interface d'administration de votre blog, puis dans
Widget de présentationet de modifier l'ordre des éléments dansBandeau de navigationetBandeau d'extra. Pensez à bien cliquer sur mettre lesbandeaux à jourquand vous avez fini.Je n'avais pas compris le système des Widget, j'en étais restée à Dotclear 1.x ...
Merci pour votre réponse! J'ai tout ce qu'il me faut pour avancer maintenant.
Merci je l'ai pour l'instant adopté
bonjour :
quelle police as tu utilise pour faire les images.
car je viens de l'instalelr et pour le titre du site, l image est "blog" donc pour personaliser, on a besoin de refaire les images.
merci
bonjour
excuse moi, mais je n avais pas vu la reponse au dessus.
ni le Fichier Gabarit (Inkscape)
merci encor
@karl : Pas de soucis, désolé de ne pas avoir pris le temps de répondre avant...
Bonjour
Très sympa ce thème.
Je l'ai légèrement modifié pour mon Blog.
J'ai par contre un problème avec le formulaire Contact qui n'indique pas les erreurs de mail ou d'url . Merci de bien vouloir me préciser d'où vient l'erreur.
@Frankie : le bug a été corrigé dans la version 1.2 du thème mis à disposition aujourd'hui. Il s'agissait d'un bug du code javascript. Bonne modification...
Super thème que voilà que je vais utiliser sur mon blog en le modifiant.
J'ai déjà récupéré les fichiers Gimp mais j'ai une question : étant donné que j'envisage d'utiliser ma propre écriture, comment as-tu fait les petites tâches transparents, comme des gouttes d'eau qui auraient un peu fait baver l'écriture ? Je trouve le résultat très réaliste et j'aimerais bien savoir quels outils utiliser (et donc quel logiciel) pour faire ça.
Merci par avance pour l'info !
@Arnaud : Bonsoir et merci d'utiliser mon thème. Désolé de répondre avec un peu de retard mais je suis actuellement en vacances et je n'ai pas toujours accès a Internet. Pour les écritures, la méthode est simple :
- écrire sur une feuille de papier les intitulés au feutre de préférence
- scanner le tout (ou le photographier)
- avec Inkscape, vectoriser les écritures
- les exporter en PNG
- les ouvrir dans Gimp
- avec une brosse en forme de tache (
- avec l'outil pinceau, dessiner la goute à l'endroit exact ou l'on a flouté avec la goute
- répéter l'opération une ou deux fois...
Voila ma méthode de travail pour traiter les écritures, j'espère qu'elle est assez claire. Si tu es de la région Bordelaise, je pourrais te faire une démonstration live lors d'un atelier du collectif Giroll...je ne sais plus ou je les ai trouvées mais je peux éventuellement te les passer par courrielhaaa si elle sont là) et l'outil goute d'eau flouter à un endroit de l'écriture (il faut cliquer plusieurs fois)Merci pour ces précieuses explications et le temps que tu y as accordé ! Dès que j'aurai un petit moment, je ferai les essais.
Merci aussi pour la proposition de démonstration ; malheureusement, j'habite Paris donc ce sera difficile. Mais je note avec sympathie l'existence de ces ateliers de Giroll : l'intention de ce collectif a l'air très intéressante.
A plus tard !
slt il serais possible de rajouter Galerie dans le fichier fnd_h2widget.png ou de m'envoyer le mot sa serais super
merci
Bonjour et chapeau pour le thème qui est effectivement super beau ! Tellement beau que j'ai voulu l'installer, mais que je rencontre un souci.
J'ai modifié le CSS au niveau des liens pour l'adapter à l'arborescence de chez moi, je tourne sous Firefox, mais l'affichage final est loin de ressembler au thème ^^
J'ai des images qui sont bien là, d'autres qui sont absentes (au niveau de la date du post, du pied du post, la feuille de papier qui sert de fond entre le haut et le pied de page, et d'autres petites choses). En principe, soit tout est bon, soit tout merde. Les liens des adresses sont pourtant bonnes, et j'ai bien le même code CSS que celui de la page du blog de démo...
Quelqu'un peut-il m'éclairer ? Un si beau thème, ça serait dommage de gâcher...
Bonjour ephase, j'ai installe le theme 'carnet' apres avoir fait 20 autres essais de papier-peints Dotclear 2. Finalement, celui-ci me convient tres bien niveau design mais j'ai encore un probleme: il n'y a pas d'option "se souvenir de moi" dans les commentaires et il faut sans cesse retaper ses identifiants ce qui est assez contraignant pour les lecteurs comme pour moi.
J'ai essaye de faire un changement dans "post.html", avec succes dans le sens ou j'avais l'option de garder les identifiants en memoire (plus la case "se souvenir de moi" a cocher" mais alors, ca cassait tout le chouette design de l'espace commentaire... Alors, comment faire?
Merci d'avance.
bonjour et désolé pour le temps que j'ai mis à vous répondre...
@Tippie : effectivement, je n'ai pas mis d'options "se souvenir de moi". Je vais rajouter l'option dès que possible et vous ferais passer le thème modifié. Avec un peu de chance je pourrais le faire cet après midi... Il me semble d'ailleurs que vous n'utilisez pas la dernière version de mon thème (dans la dernière, derniers billets est en écriture manuscrite).
@Lord Pouet : Le problème ressemble comme deux goutte deux à une erreur dans le CSS... Pourriez vous me donner l'adresse du site en question (et y mettre le thème que vous avez modifié afin que je puisse étudier la chose à l'aide le mon Firebug adoré :-)...
@Mandritux : Par cruel manque de temps, et aussi parce que mon écrivain perso n'est pas disponible, je ne vais pas pouvoir rajouter une écriture tout de suite, mais je note la demande. D'ailleurs, pourriez vous me dire quel plugin (et widget) vous utilisez pour votre gallerie afin que je l'installe sur mon blog de dévellopement pour prévoir le futur ajout
bonne journée à tous
Yorick