Voir aussi :
Les autres tutoriels
• Acrobat• Excel
• Powerpoint
• Logiciels divers
• Messagerie
• Navigateurs
• Sécurité
• Systèmes
• Traitement de texte
Voir aussi :
Les autres tutoriels
• Acrobat
Personnaliser
son blog Gandi quand
on ne connaît rien en CSS ni en phpQuand 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 commencerNe 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.
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.
http://www.dotclear.net http://scintilla.sourceforge.net http://dotclear.khlevina.info/kit Si besoin, par exemple : http://www.izarc.org/download.html
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édure1- 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).
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é.
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éterSi 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.
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.
|
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. |
|
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 |
