Cela fait déjà un moment que j'en avais envie, que je changeais petit à petit des trucs sur l'ancien thème, mais ce n'était pas suffisant. Alors, je me suis dit que j'allais tout refaire en partant de la chose que je voulais le plus changer : le header et son logo (inexistant). J'avais enfin trouvé une police qui me plaisait, j'ai ouvert Paint Photoshop, j'ai écrit le texte puis il fallait bien en faire quelque chose, y ajouter des couleurs… j'ai regardé les différentes palettes disponibles et je me suis arrêté sur les couleurs ANPA.
Là, je choisis un peu au hasard une nuance de bleu comme couleur de fond et en prenant simplement les 3-4 nuances qui lui étaient adjacentes je me retrouve avec des couleurs de base pour mon logo. Et si je veux changer pour du rouge, du vert, ou autre, je n'ai qu'à monter ou descendre d'une ligne dans la palette ANPA, pratique ! Ensuite, j'ajoute une bordure et une ombre portée à mon texte pour lui donner un peu de relief et éviter le côté plat. J'aime bien le rendu, mais je voudrais y ajouter un symbole, avoir un "vrai" logo pas juste du texte.
Comme mon pseudo c'est Yus, j'essaye avec le symbole grand yus : Ѫ que j'utilisais déjà (ancien favicon ), mais ça ne va pas avec le reste alors je passe au petit yus fermé : Ꙙ et je colorie les espaces qui l'entourent pour faire ressortir une forme ressemblant à une montagne (), comme je l'avais fait pour un de mes avatars il y a quelques mois. Ça y est, le logo est terminé !

Je me lance dans la modification de l'ancien thème, mais très vite ça ne me convient pas, je préfère créer un thème sur des bases plus solides, après avoir testé pendant des semaines tous les thèmes dits frameworks pour WordPress qui existent (si si tous) mon choix s'est arrêté sur ce bon vieux Sandbox qui offre tout un tas de possibilités de bidouillage sans imposer plein de trucs plus ou moins (in)utiles et plus ou moins chiants à virer.
Pour la structure je m'inspire des formes et couleurs du logo avec ses ombres et ses arrondis, et tant pis s'ils sont tout carrés sur Internet Explorer, j'en ai marre de devoir faire des concessions et me priver des "nouvelles" (les bordures arrondies en CSS c'est assez vieux quand même) possibilités offertes par les navigateurs modernes. Plus vite on se met à les utiliser et plus vite les navigateurs devront s'adapter. Il n'y a qu'à voir l'apparition des versions dédiées à l'iPhone de certains sites, même si finalement cet exemple est peut-être mal choisi, car c'est les sites qui s'adaptent à un navigateur et pas l'inverse…

Enfin bref, j'ai même failli envisager le passage au HTML 5. C'est mon blog après tout, pas le site d'un gros groupe international qui se doit d'avoir le même rendu sur tout et n'importe quoi. Et puis j'ai de la chance : les 2/3 de mes visiteurs utilisent Firefox/Chrome/Safari, et plus de 70 % du tiers restant a laissé tomber IE 6 pour des versions plus récentes, j'imagine que les autres se connectent depuis leur boulot avec le seul navigateur qu'ils ont sous la main et je les plains.

L'autre chose que je tenais absolument à faire avec ce nouveau thème, c'est garder une compatibilité avec les résolutions des netbook type Eee PC (car j'en ai un ^^), donc éviter les barres de défilement, sans pour autant me contenter d'un design fixe qui tiendrait dans 800 pixels de largeur comme avec le précédent thème.
Vous êtes plus de 98 % à avoir des résolutions plus élevées (heureusement) et même mes vidéos sont passées à la HD, alors je veux et j'ai besoin de plus d'espace. J'ai donc opté pour une largeur convenable de 960 pixels qui s'adapte aux résolutions plus petites si besoin, essayez en redimensionnant la fenêtre de votre navigateur.
Bref, c'est parfait j'ai eu ce que je voulais. Pour cela il m'a fallu faire plein de calculs afin de trouver des valeurs qui correspondent à ce que je veux et restent compatibles avec tous les navigateurs (même IE 6 !) lorsqu'on redimensionne leur fenêtre.

La dernière étape consistait à choisir où et comment j'allais afficher telle ou telle information, c'est celle qui a pris le plus de temps, celle pendant laquelle j'ai le plus glandé aussi c'est peut-être pour ça. Au final je suis assez content du résultat, en étant l'auteur, je n'ai plus à me dire "j'aime pas comment tel machin/truc a été fait dans ce thème". Et puis j'ai mon propre thème, ma charte graphique, qui ne ressemblent pas à X autres blogs (ou alors j'ai vraiment pas de bol ^^), et ça, c'est assez cool comme sensation.

Allez, un petit comparatif avant/après pour finir façon D&Co :

À bientôt les petits loulous.

En attendant, aujourd’hui on est le 30 novembre, mon mois préféré s’achève, et je voulais faire quelque chose sur le blog pour l’occasion. Oui, mais quoi ? Je n’ai pas de billet prêt à être publié, juste une idée qui me trotte dans la tête depuis des mois et un thème WordPress dont je ne sais quoi faire.

Et si j’associais les 2 ? Allez, c’est parti, je vérifie le bon fonctionnement du thème, peaufine quelques détails puis je vais chercher le bout de code JavaScript que j’ai utilisé sur Dev-fr pour un des easter eggs, je change ce qui m’intéresse et je teste… OK, tout fonctionne comme prévu, je peux écrire un petit billet à ce sujet pour donner des indices et voir si les gens vont trouver… laissez un commentaire dans ce billet si c’est le cas.

Alors, qui trouvera en premier ?

Edit : l’effet du code a depuis été modifié, il ne permet plus de changer de thème, mais devient un peu plus utile.

Je pense que je vais le laisser un jour ou deux puis revenir au thème normal. Je me tâte encore pour savoir quoi en faire après cela, peut-être le rendre public pour que d’autres en profitent. Je crains juste les demandes de support qui pourraient en découler.

Non, vraiment les CSS c’est trop vicieux. Le pire, c’est que j’aime ça ! Jouer avec les CSS en changeant des trucs petit à petit puis constater qu’il est 5 h du matin et que j’y ai passé la nuit (bon ok, j’aime moins cette partie-là).

C’est limite si après avoir posté ce billet je ne vais pas continuer à faire des modifs pour voir ce que ça donne si je change tel machin, puis un autre et encore un autre. Alors que je prépare déjà un nouveau thème, ce qui à moins de trouver de nouvelles idées à réutiliser, rend les modifications actuelles inutiles.

Je ne suis vraiment qu’un geek nerd CSS.

D’ailleurs, ça me rappelle qu’il faut que j’achète la saison 1 de NerdZ en DVD !

Edit : avec de la chance, je pourrais gagner un livre puis l’échanger contre le DVD.

Je suis plutôt satisfait du résultat, il y a plus d’espace pour le texte et j’ai pas trop foiré le sang sur la plume.

Par contre, j’attends toujours mon jeu, alapage.com est censé me l’expédier aujourd’hui, mais je crois que c’est mal barré pour qu’ils me l’expédient tout court… ça m’apprendra à réserver mes jeux dans des magasins de merde peu fiables.