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
- 06 avril 2011 : version 1.4
- la catégorie d'un billet est maintenant affichée
- optimisation du CSS et de quelques images
- 04 avril 2011 : version 1.3
- Le formulaire de commentaire n'apparaît plus lorsque les commentaires sont désactivés.
- 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
Bravo et merci pour ce thème génial. je l'ai adopté. Et comme je suis bordélique, j'ai simplement éparpillé des photos sur le bord du papier, c'est moins joli que votre "top" mais j'ai l'impression d'être chez moi...
3 questions.
1. chez moi la page "archive par date" semble buguer un peu. quand on clique sur une date du calendrier, la partie centrale du fond blanc disparaît.
2. j'aurais aimé moi aussi rajouter le fameux "se souvenir de moi" et supprimer le "prévisualiser" obligatoire, mais ce que vous avez fait sous la jolie page m'inquiète un peu, alors je n'ose bidouiller tout seul.
3. la mise en forme des images est superbe. ELle a deux petits inconvénients: elle retaille certaines photos (c'est de ma faute aussi, j'utilise un réflex) et apparemment ne permet pas de mettre du texte à droite ou à gauche du texte. CHez moi, ça se décale automatiquement en dessous. Je pense que je vais devoir la désactiver. il y a une ligne particulière à changer pour cela?
encore un grand merci. C'est très chouette et tout le monde est super content du nouveau thème... je vous transmets donc les félicitations.
Bonjour David et merci pour les compliments
Vous avez raison d'adapter le thème à votre convenance. C'est même le but du jeu... Je vais essayer de répondre a toutes vos questions.
Bonjour,
J'ai tout simplement craqué pour ce thème! j'adooore, et tout d'abord, vous avez fait un chouette bolot
J'ai un gros problème..je n'arrive pas avec les widgets (je viens juste de l'installer), si vous pouviez m'aider..car je ne sais pas lesquels il prend etc..merci
Bonjour Lillia,
LE thème prend en charge les widgets derniers billets, derniers commentaires, Nuage de Tags, recherche, liens, contact (du plugin ContactMe).
Donnez moi plus de renseignements pour que je vous aide, n'hésitez pas à me contacter par le bias de la page contact de mon blog...
Merci pour votre réponse. J'aurais aimé rajouter "archives" et "liens" le minimum quoi
(je mets le widget liens, mais il n'y apparait pas..et j'ai aussi tenté de mettre lilanature, le titre de mon blog, mais je n'y arrive pas..Je voudrais pourtant bien le garder ce theme
Merci, si vous pouviez m'aider..
Bonjour,
Tout d'abord merci pour ce super blog, qui me va très bien pour mes compte rendu de randonnée photos :).
J'ai un souci d'affichage de galerie, les petites galerie photo en miniatures s'affiche à la fin de chaque billet, mais que sur la dernière pages (5billets par pages),
sur les autres pages les petites galerie à la fin du billet ne s'affiche pas :-//
voir sur mon blog, la dernière page il y a bien les galerie mais pas sur les autres
http://www.christophe-mucher.fr/blo...
D'anvance merci pour l'aide
Christophe
Bonjour,
Félicitations pour ce thème tout simplement magnifique ... un des plus beaux pour Dotclear2. Je l'ai aussi adopté pour un blog sur une construction de maison. Beau travail et encore bravo !
Bonjour,
Votre thème est remarquable comme je le disais précédemment, juste un bémol : l'ouverture sous IE 6 présente de nombreux bugs, notamment dans l'affichage du fond ou dans le placement des rubriques. Merci de me dire si ce problème est résolu dans les autres versions d'IE (j'ai des poussée d'acnés a chaque fois que j'écris ce mot).
@Nico : merci pour les compliments.. Effectivement le thème est incompatible avec IE6; masi fonctionne à peu près bien avec la version 7 et bien avec la version 8 du navigateur de Microsoft. Au passage, désolé pour avoir répondu aussi tardivement...
bonjour
j'utilise je thème carnet mais j'ais besoin du mots galerie te serait il possible de me le faire parvenir merci a toi et bon courage pour la suite
@mickael : pas de problèmes, mais la personne qui m'a donné les écritures n'est plus disponible,je te contacte par courriel ...
Terrible, le thème, il est installé, tout fonctionne nickel, terrible aussi l'apparence de votre CV
Merci, beaucoup, vous m'avez réconcilié avec dotclear, je commençais à préférer les thème wordpress.
@Mincoin merci beaucoup pour vos compliments... J'ai répondu à votre message envoyé depuis le formulaire de contact, l'avez-vous eu?
bonjour, j'ai un gros chantier en cours et j'ai bien aimé ton thème qui correspond à mes petits papiers un peu partout
Je l'utilise donc avec ta permission.
Cdt
Bonjour,
Je découvre ce thème que je souhaite utiliser avec le widget day_mode pour afficher un calendrier.
Je rencontre un problème d'affichage si je sélectionne un billet en cliquant dans le calendrier.
C'est visible ici: http://tahitio.free.fr/blog/index.p...
Pourriez-vous me donner des pistes pour régler le problème ? (je ne connais pas plus dotclear que le php).
Merci
@chris : bonsoir, pourriez-vous me donner la version du thème que vous avez installé? il semblerait que se ne soit pas la dernières, car ce problème a déjà été résolut (normalement ...)
Bonjour,
C'est la version 1.4 avec la dotclear 2.3.1
Cordialement
Merci pour ton thème qui me convient bien !
Je me suis juste permis de changer la "font" par défaut. J'y ai mis "SetFireToTheRain" que j'ai trouvée ici : http://www.dafont.com/set-fire-to-t...
Pour info, voici comment je m'y suis pris :
J'ai téléchargé la font dans le répertoire CSS du thème carnet, puis j'ai rajouté ces ligne ci :
@font-face {
font-family: carnet;
src: url('SetFireToTheRain.ttf');
}
body {
font-family:carnet, verdana, sans-serif;
...
}
Seul défaut, IE ne comprend pas ces instructions.
En tout cas : Merci !
@Fabrice : c'est tout simplement qu'IE ne reconnait pas ce format de polices, il faut en mettre une version eot avec par exemple cet outil en ligne : http://ttf2eot.sebastiankippe.com/ et rajouter cette ligne dans votre déclaration @font-face :
@font-face {font-family: carnet;
src: url('SetFireToTheRain.ttf') format(truetype), url(SetFireToTheRain.eot') format('embedded-opentype');
}
et voilà...
Waw ! Merci, je ne connaissais pas ça !
J'ai appris quelque chose de plus aujourd'hui !
En tout cas, un grand merci pour l'astuce !
Bonjour, j'adore votre thème Carnet mais je reste bloqué sur de petits problèmes, les même que David (commentaire 31)
Vous proposiez à David de lui envoyé la version modifiée... Je serais ravi de l'avoir également
Merci d'avance
@Gnome : si c'est bien la version avec "se souvenir de moi..." elle est déjà à jour sur le site dotaddict et sur ce billet. Pour ce qui est du calendrier, j'ai commencé à y travailler dessus mais je n'ai pas trop de temps en ce moment...
Bonjour
Bravo pour ce thème très joli que j'utilise dans le cadre d'un blog d'école.
http://ien-avirons-etangsale.ac-reu...
Mais je n'arrive pas à résoudre un problème d'affichage dans le barre de navigation : les Galeries de photos sont affichées sous le nom "Catégories" et non pas sous le nom "Galerie" pourtant présent dans le fichier fnd_h2widget.png . Je pense que c'est un problème de feuille de style et notamment du sprite dont vous parlez au début de ce billet. Merci pour votre aide.
Merci à l'auteur pour sa réponse rapide et la modification de la feuille de style.