PSD

Le propre du blog, c’est d’être un site qui ressemble à son propriétaire, à son rédacteur. Il est donc naturel pour chaque blogueur de vouloir personnaliser son site personnel. C’est pourquoi Thomas Cook propose à la blogosphère les fichiers originaux de ses thèmes WordPress, qui permettent de personnaliser son blog pleinement. Pour rappel, les thèmes WordPress Thomas Cook sont de design fluide, c’est à dire que le blog ajustera sa taille aux différentes résolutions d’écran des internautes. Cette spécificité du design fluide implique un découpage des images particulier.

Trois fichiers sont à votre disposition pour vous faciliter la tâche. Ce sont des fichiers au format PSD, le format d’Adobe Photoshop, le logiciel d’édition d’images par excellence. Le format PSD est compatible avec des solutions libres et gratuites, comme the Gimp. Mais rentrons dans le vif du sujet :

Comment personnaliser le design de son thème WordPress ?

Les instructions de cet article proposent de modifier à votre guise un des thèmes Thomas Cook, déjà installé sur votre blog. Les thèmes WordPress des 4 saisons Thomas Cook utilisent 13 images,  que vous pourrez générer à partir des fichiers PSD que nous vous mettons à disposition. Ces images se trouvent dans le dossier “images” de votre thème, par exemple là pour l’un des thèmes de notre blog : http://blog.thomascook.fr/demo/wp-content/themes/sejour-jour-hiver/images/ .

Sur le premier fichier, design-global.psd , vous trouverez tous les éléments nécessaires à la création des images principales. C’est lui qui vous servira de base. Sur le deuxième fichier, box.psd, vous trouverez tout ce qu’il faut pour générer les images de la boîte contenant les articles de votre blog, et finalement, le troisième fichier, flux-rss.psd, correspond au fichier permettant de générer l’image qui sert de lien vers les flux RSS de votre blog (présent en haut à droite de la page).

Calques

Créer l’image de fond du thème WordPress

La première image a générer est l’image principale, le fond, background.jpg (aperçu). Cette grande image contient l’image du header (la partie du haut de votre blog, où vous trouverez le titre du blog) et l’image de votre colonne latérale, la sidebar. Pour générer donc un nouveau fond, vous ouvrez le fichier design-global.psd dans votre éditeur d’image compatible avec le format de fichier PSD, et désactivez les calques (”layers” en anglais) qui ne font pas partie du fond (on désactivera les calques contenant du texte générique, le dossier “box post” et le dossier “footer”. Le calque “header image” est celui que vous pouvez remplacer par votre image personnalisée pour le header, le calque “fond couleur” étant celui qui déterminera la couleur du fond. Pour voir à quoi doit ressembler votre image finale, observez simplement à quoi ressemble l’image de fond “background.jpg” du dossier des images exemple. Prenez en compte que cette image sera fixe et ne changera pas de taille suivant la résolution d’écran des internautes : tout ce que vous mettrez à droite de l’image court ainsi le risque de ne pas être vu par les plus petites résolutions.

Créer les images du footer pour notre blog

Nous avons maintenant le fond. Il nous faut désormais le footer (pied de page), la partie qui termine un blog. Le footer des thèmes Thomas Cook est constitué de deux images : une qui est bloquée à gauche, footer-left.jpg, avec un petit visuel, et une autre qui se répète tout le long de votre écran, “footer-repeat.jpg”. Pour générer ces deux images, on retourne à notre PSD “design-global.psd”, et on active le dossier contenant les calques du footer, on active le calque “fond couleur”, et on désactive tous les autres. On sauvegarde cette image pour le web, avec le format d’image PNG.

footer-left.jpg

Cette nouvelle image va nous servir de base pour générer les deux images finales. On ouvre donc cette image dans notre logiciel, on prend l’outil de sélection (le petit carré en pointillé de photoshop, raccourci touche “m” de votre clavier). On sélectionne ainsi les images dont nous avons besoin : une première sélection doit être faite pour l’image footer-repeat.jpg. Pour avoir les tailles exactes, vous pouvez utiliser dans photoshop la boîte “info” (touche f8). Votre image doit faire 150 px de hauteur. On copie la sélection, et on la colle dans un nouveau document. Normalement, si vous avez bien copié votre sélection, lorsque vous créez un nouveau fichier avec photoshop, il prend tout de suite en compte les tailles de ce que vous avez dans le presse-papiers : vous n’avez plus qu’à coller votre image dans votre nouveau fichier, et sauvegarder l’image, en tant que repeat-footer.jpg

Le processus pour créer toutes les autres images de notre thème personnalisé est sensiblement le même. En repartant de notre image qui sert de base, on sélectionne l’image du footer à gauche, on créé le nouveau fichier puis on sauvegarde la nouvelle image.

Portion du footer sélectionnée

Création des images du header

header-repeat.jpg

L’image du header, on l’a vu, est déjà incluse dans le fond principal du thème, background.jpg . Il ne manque plus qu’à faire l’image qui va se répéter, si la résolution de l’internaute serait par hasard plus grande que le format de l’image de fond (une résolution de 1600*1200 px par exemple, et au delà). Pour créer header-repeat.jpg, même processus que pour le footer : en partant du fichier au format PNG que nous avons exporté précédemment, qui contient donc le header, on sélectionne le rectangle d’image qui va se répéter. On copie, on colle dans un nouveau fichier d’image, puis on sauvegarde la nouvelle image.

Création des images de la boîte contenant les articles

Pour pouvoir créer plus facilement les images de la boîte contenant les articles, nous avons mis à votre disposition le fichier box.psd, que vous pouvez ouvrir dans photoshop. Le fichier se présente avec une image de fond, le calque “image decoupe”, et plusieurs autres images, correspondant toutes à une des images nécessaires pour faire le design fluide de la boite contenant les articles. Vous avez l’image correspondant au coin inférieur gauche,  l’image correspondant à la répétition du coin droit, ainsi de suite. Il en fait pas moins de huit pour faire un design fluide. On peut ainsi simplement personnaliser l’image de fond à notre guise, puis sélectionner la portion d’image qui correspond à chacune des sections de notre design, en utilisant les images déjà présentes : elles vont servir de guide pour découper rapidement notre fond, en sélectionnant le fond en s’aidant des images.

Fenêtre photoshop avec box.psd

Création de l’image des flux RSS

rss

Si vous observez l’image du thème pour les flux RSS, vous y verrez deux logos de flux. Le logo d’en haut est celui montré par défaut aux internautes, le logo d’en bas est celui affiché au survol du lien. C’est donc une seule image qui contrôle les deux états du lien des flux. Vous pouvez en changer la couleur à votre guise avec votre logiciel d’édition d’images préféré, en utilisant notre fichier flux-rss.psd.

Personnalisation du CSS, de la feuille de style

Une fois les images obtenues, il suffit d’écraser les images existantes de notre thème actuel avec nos nouvelles images, ou, si on veut conserver notre ancien thème, en créer une copie qui utiliserait les nouvelles images à la place. Il ne manquera plus alors qu’à adapter le CSS aux nouvelles images : on change les couleurs du texte, des liens et du fond. La feuille de style, qui est donc un fichier CSS (CSS pour “cascading style sheet”), se nomme dans votre template (”template” est un synonyme anglais pour dire “thème”) “style.css”. Ouvrez ce fichier avec un éditeur de style notepad au minimum. Chaque fois que vous verrez le terme “color” dans ce fichier, on parle de la couleur du texte. Chaque élément du thème est présent dans style.css

Feuille de style, style.css

Couleur du texte par défaut : au tout début de votre fichier, vous avez “body”, avec des propriétés contenues entre crochets. Chaque propriété (margin, ou font-size, ou color par exemple) contrôle donc un aspect bien précis de l’élément “body”, qui est l’élément par défaut de votre page web. La couleur est donc déterminée par un code hexadécimal, par exemple #c78b8d . C’est cette valeur hexadécimale qu’il faut changer pour changer la couleur de notre texte. Pour connaitre le code hexadécimal d’une couleur, il existe plusieurs outils, nous allons utiliser photoshop. Si vous double-cliquez sur une couleur en bas de votre barre d’outils, vous avez la fenêtre du choix de couleur qui s’ouvre. Choisissez une couleur, puis regardez en bas : il y a une boîte précédée d’un # . C’est votre code hexadécimal, le code que vous devrez mettre à la place de celui se trouvant dans la feuille de style, style.css.

Vous avez 24 couleurs en tout à gérer dans le style.css pour du texte, en sachant que de nombreux éléments sont en fait de la même couleur. Le nom des éléments est en général explicatif, l’élément #sidebar par exemple correspondant à la barre latérale de votre blog, où se trouvent les liens de vos catégories, par exemple.

Pour contrôler la couleur des fonds, c’est les propriétés “background” ou “background-color” qu’il faut regarder. Le code hexadécimal qui s’y trouve correspondra à la couleur par défaut du fond de l’élément, que vous pouvez donc changer selon le même principe que la couleur du texte.

Si vous voulez allez plus loin dans la personnalisation de votre thème, ou même d’en créer un vous même, il vous faudra au moins quelques notions supplémentaires de HTML, de CSS, puis d’un logiciel d’édition d’images, comme photoshop, cet article vous donnant quelques pistes pour commencer.