Le 5 sep 2007 à 23:13 CEST, Olivier a écrit :
Oui très bonne idée, merci :) Ensuite tu pourras le mettre sur un beau site de documentation qu'on ouvrira sous peu, si tu veux.
Je le mettrais aussi sur dutailly.net de toute façon. Je copie-colle texte, mais il va manquer une mise en forme notamment pour la partie vocabulaire. Et évidemment ici, pas la moindre copie d'écran. ========================================================= Personnaliser son blog Gandi quand on ne connaît rien en CSS ni en php ========================================================= Pour commencer =========== 1 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. 2 Préambule ----------------------- Je ne vais pas récrire et refaire le travail très bien fait par khlevina (http://dotclear.khlevina.info/kit/), il s'agit juste d'indiquer comment faire pour utiliser ses explications pour le Gandi blog. Donc pour tout ce qui concerne la mise en forme proprement dite, il faudra suivre ses indications. 3 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 4 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/kit à cette page : http://dotclear.khlevina.info/kit/?Mise-en... 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/SciTETran... 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. 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/...). 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 ========== 1 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 ». Écrire la charte graphique du blog sur un fichier texte vous permettra de gagner du temps puisque vous y écrirez les codes des couleurs, les adresses des images etc. Il ne restera plus qu'à faire des copier-coller dans le code. 2 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 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. Terme | Définition | Remarque ----------------------------------------------------------------------------------------------------------- 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 left, right, bottom et top pour définir où cela s'applique (donc à gauche, à droite en bas ou en haut) color | couleur em | unité de hauteur relative | Inconvénient : les affichages varient selon les navigateurs : c'est plus gros (nettement) sous Internet explorer que sous Firefox font | caractère | à combiner avec size pour préciser la taille margin | marge |indique la marge dans chaque élément, à combiner avec left, right, bottom, top, 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 left, right, bottom et top pt | point | abréviation pour la taille des caractères, ce n'est pas une valeur relative. Intérêt : on est sur 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). Une vue des deux affichages côte à côte pour vous convaincre. L'image s'ouvre dans une nouvelle fenêtre et pèse 162Ko. 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
Ysabeau http://www.aiguilles-magiques.com http://blog.aiguilles-magiques.com http://www.dutailly.net