Personnaliser son blog Gandi
quand on ne connaît rien en CSS ni en php

Quand on achète un nom de domaine chez le registrar Gandi, on peut aussi y héberger son blog, et personnaliser son apparence si on se lasse de la trentaine de thèmes qui nous sont proposés. Cette page vous indique comment faire si vos connaissances en divers codes informatiques sont légères et que vous voulez faire le travail vous-même.

NB : tous les liens vers des sites ouvrent dans une nouvelle fenêtre.

 Pour commencer

Pré-requis

Ne connaître ni les CSS, ni le php, être sous Windows, ne pas avoir forcément envie de se bagarrer avec Dotclear et encore moins de le télécharger.

Préambule

Je ne vais pas récrire et refaire le travail très bien fait par khlevina, il s'agit juste d'indiquer comment utiliser ses explications pour le Gandi blog. Donc pour tout ce qui concerne la mise en forme proprement dite, il faudra suivre ses indications.

Sites utiles :

http://www.dotclear.net

http://scintilla.sourceforge.net

http://dotclear.khlevina.info/kit

Si besoin, par exemple : http://www.izarc.org/download.html

Téléchargements nécessaires :

Le kit thème de base à partir duquel on va travailler. Il se télécharge sur le site dotclear.khlevina.info à cette page :
http://dotclear.khlevina.info/kit/?Mise-en-place

Il faut télécharger l'archive, pas l'installeur. Comme ce sont des fichiers compressés au format tz, si nécessaire, il faudra installer avant un utilitaire de décompression. Izarc est gratuit, existe en français et fonctionne bien sous Vista, ce qui n'est pas forcément le cas des autres logiciels capables de décompresser ce format (en tous cas pas de ceux que j'ai testés).

Le logiciel Scite qui est un éditeur de texte affichant des couleurs en fonction des codes et permet d'enregistrer directement dans de multiples formats, dont le CSS qui est celui qui nous sera utile.

 Procédure

1- Décompresser le thème kit. Si on a l'esprit pratique, on en profite pour créer un dossier sur le disque dur où seront rangés tous les fichiers nécessaires au blog, mais ce n'est pas une obligation.

2- Décompresser Scite, attention, sa décompression vaut installation. Il faut donc faire bien attention à l'endroit où on va le ranger car il ne génère pas d'icône et ne se met pas automatiquement dans le menu Démarrer (en tous cas sous Vista).

3- Pour le franciser, télécharger aussi la traduction : http://scintilla.sourceforge.net/SciTETranslation.html

Mettre le fichier de traduction, « locale.fr », dans le dossier où se trouve Scite en le rebaptisant fichier en « locale.properties ».

4- Ouvrir Scite et sélectionner soit Tous les fichiers, soit CSS, sinon vous ne trouverez pas le fichier Style dont vous avez besoin.

Par précaution enregistrer tout de suite ce fichier style sous un autre nom afin de garder l'original intact. De toute façon son nom n'a strictement aucune importance puisqu'il faudra juste copier-coller le contenu du fichier sur le Gandiblog.

Si Scite n'affiche pas des couleurs différentes, dans le menu Langue, sélectionner CSS.

5- Se connecter au Gandiblog et importer dans le Gestionnaire de média toutes les images dont on pense avoir besoin pour le thème. Personnellement j'ai créé un répertoire bêtement appelé Thème. En cliquant sur le nom du fichier, on ouvre sa fiche descriptive et on obtient son adresse qui est celle que l'on mettra dans la feuille de style sous la forme :
url(http://blog.aiguilles-magiques.com/public/theme/fondblog.gif).

La bonne adresse

6- Suivre les étapes indiquées par khlevina en modifiant le fichier de style.

7- Pour vérifier le rendu, sélectionner tout le texte et le copier. Aller sur le Gandi blog, Paramètres des thèmes, sélectionner le Custom theme, cliquer sur enregistrer et dans le nouvel onglet Configuration du thème qui vient d'apparaître, coller la feuille de style. Pour visionner le résultat je recommande très fortement d'ouvrir le lien Voir le site dans un nouvel onglet ou une nouvelle fenêtre de façon à pouvoir revenir facilement au Gandiblog et à remettre vite vite le thème d'avant si le premier essai est un peu loupé.

 Pour compléter

Trucs utiles

Si les diverses décorations que vous avez choisies pour votre blog ne vous satisfont pas : il est plus simple de recharger le nouveau fichier dans le gandi blog que de changer le code. D'où, soit dit en passant, l'intérêt de noms de fichiers représentatifs de l'usage de l'image : par exemple, « fondblog » est plus parlant quoique effectivement un rien moins attrayant que, voyons, « vue en coupe d'une ville malade » ou encore « img-01 ».

Écrire la charte graphique du blog sur un fichier texte vous permettra de gagner du temps puisque vous y noterez les codes des couleurs, les adresses des images etc. Il ne restera plus qu'à faire des copier-coller dans le code.

Réduire la fenêtre de Scite de façon à bien voir en dessous les indications du guide de personnalisation du kit.

Voir un exemple de la superposition des fenêtres.

Un peu de vocabulaire

Une liste de termes et d'abréviations bien utiles pour mieux contrôler son travail. Attention, ça n'est ni exhaustif, ni aussi précis et détaillé qu'un document sur les CSS, c'est juste une liste de ce qui est vraiment le plus important, à mon avis, pour débuter. On peut le compléter par exemple par le petit livre :

CSS précis et concret de Eric A. Meyer, traduit pas Hervé Soulard, éditions O'Reilly 2004, isbn : 2-84177-307-8, qui a l'agréable avantage d'être au format poche et plutôt clair.

retour en haut de la page

septembre 2007

Voir aussi :