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 les aficionados pour Dotclear2, 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 :

Téléchargements nécessaires :

Le kit thème de base à partir duquel on va travailler. Il se télécharge sur le site themes.dotaddict.org.

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.

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

Ouvrir un fichier CSS dans Scite.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 CSS dont vous avez besoin.

Par précaution enregistrer les originaux sous un autre nom afin de les garder intacts. Il faudra juste copier-coller le contenu du fichier sur le Gandiblog, mais garder le nom du layout.css si vous l'utilisez.

Si Scite n'affiche pas des couleurs différentes, dans le menu Langage, 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  :

url(http://blog.aiguilles-magiques.com/public/theme/fondblog.gif).

6- Modifier en s'aidant des tutoriels de personnalisation du kit 2.

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é.

Variante : après avoir opté pour le Custom theme proposé par Gandi, allez sur l'onglet Configuration du thème et copiez-collez la feuille du style dans votre éditeur de texte. Vous retrouverez les mêmes indications que celles figurant sur le thème de base, mais avec la « sidebar » (colonne des liens) à gauche.

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 tutoriel.

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 :

Mémento CSS de Raphaël Goetter (du site Alsacréations), Eyrolles, ISBN-10: 2212125429, un dépliant cartonné très bien fait. A acheter en priorité. Deuxième édition : juillet 2009.
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.
CSS versions 1 et 2, ENI, isbn : 2-7460-3116-7, un dépliant cartonné très pratique.

  • a   indique un lien  Peut se combiner par exemple avec : hover qui précise ce qui doit se passer sur un lien quand on pointe dessus (changement de couleur par exemple) et visited qui indique comment doit apparaître un lien visité.
  • background fond  On peut mettre des fonds de fenêtre, de page, de sidebar... à chaque élément du blog.
  • border     bordure    À combiner avec top, left, bottom, right, et pour définir où cela s'applique (donc à en haut, à gauche, en bas ou à droite). 
  • color     couleur.    
  • em     unité de hauteur relative    Inconvénient : les affichages varient selon les navigateurs et de leur version… 
  • font     caractère     à combiner avec size pour préciser la taille. 
  • margin     marge    Indique la marge dans chaque élément, à combiner avec top, left, bottom, right, on peut indiquer les valeurs en em ou en px par exemple. 
  • padding    espace autour de l'élément     les valeurs peuvent être en em ou en px, peut se combiner avec top, left, bottom, et right
  • pt  point     Abréviation pour la taille des caractères, ce n'est pas une valeur relative. Intérêt : on est sûr que les caractères seront affichés de la même façon. Inconvénient : Internet Explorer est incapable d'agrandir ou de rapetisser les caractères ainsi définis alors que Firefox le fait très bien (on peut avoir besoin d'adapter la taille des caractères à sa vue).
  • px   pixel     
  • repeat  répéter ou non S'applique à une image que l'on veut faire apparaître sur le blog, no-repeat pour ne l'avoir qu'une fois, pour avoir une bande verticale on écrira repeat-y top left.
  • width   hauteur S'exprime en em ou en pixel.