Auteur: antonio
Création: 6 mai 2005
Dernière mise à jour: 6 mai 2005
Version: 1

Cet article détaille les étapes nécessaires pour personnaliser l'en-tête de votre blog. Vous y verrez comment manipuler le titre, l'image et la couleur de fond ainsi que son apparence générale (hauteur et effets de bordures).

Niveau : intermédiaire
Durée : 30 minutes


Prérequis

Il est FORTEMENT conseillé d'avoir lu et compris ces deux tutoriaux :

Introduction aux styles CSS.
http://www.monblog.ch/news/?p=200503062243069

HTML : le minimum vital en deux minutes
http://www.monblog.ch/news/?p=200503140202043


Choisir son thème initial

Pour suivre ce tutorial dans les meilleures conditions, il vous vous préalablement choisir un thème de base. C'est sur ce thème que vous ajouterez vos propres réglages d'apparence et de contenu.

Connectez-vous à la console de gestion et allez dans le module 'Apparence'. Une liste des thèmes disponibles doit apparaître. Consultez les aperçus en cliquant dessus, afin de vous aider dans votre choix.

Lorsqu'un thème vous semble adéquat, sélectionnez-le et cliquez ensuite sur 'Enregistrer'.


Personnaliser le thème

Je vous conseille de cliquer à présent sur le menu 'Preview' , situé en haut à droite sur la barre de navigation. Cette seconde fenêtre vous permettra de voir en temps réel les modifications que vous effectuez sur votre blog.

Afin de ne pas ouvrir à chaque fois une nouvelle fenêtre, vous pouvez simplement presser la touche 'F5' sur votre clavier. Cette touche déclenche le rafraîchissement de la page affichée sans avoir à saisir à nouveau l'adresse de votre blog.

Dans la console de gestion, dirigez-vous vers l'éditeur de styles. Cliquez sur 'Apparence' puis sur 'Editeur CSS'.


Les zones CSS importantes pour l'en-tête

Trois zones sont importantes dans l'édition visuelle de l'en-tête :

zone1Header : la zone englobant tout l'en-tête
blogTitle : la zone englobant le titre de votre blog
blogDescription : la zone englobant la description de votre blog



Démarrage rapide : le choc !

Saisissez dans l'éditeur CSS le contenu suivant :


#zone1Header {BACKGROUND-COLOR :red ; }
#blogTitle {FONT-SIZE:10px; }
#blogDescription {FONT-SIZE:30px;}


Cliquez sur 'Enregistrer' et actualisez (touche F5) la fenêtre affichant votre blog.

Vous constaterez avec dégoût que l'apparence de l'en-tête a fortement été modifiée ! Vous saurez dans quelques minutes comment changer cette sensation de dégoût en sentiment de fierté !

Revenez dans l'éditeur CSS , effacez tout le contenu et cliquez à nouveau sur 'Enregistrer'. Tout est redevenu comme avant : Ouf !!!



Changer la couleur et la taille de la description du blog

La couleur et la taille des textes d'une zone CSS se définit grâce aux attributs suivants :


COLOR : pour la couleur du texte
FONT-SIZE : pour la taille du texte


Voici quelques exemples de complexité croissante, vous remarquerez que les couleurs peuvent s'écrire en pleines lettres, pour autant que vous les connaissiez en anglais :

Du texte rouge, d'une taille de 10 pixels

COLOR: red; FONT-SIZE:10px;


Du texte vert, d'une taille de 24pixels :

COLOR:green;FONT-SIZE:24px;


Du texte de couleur personnalisée, sans changement de taille :

COLOR:#ff0909 ;


*: si vous n'avez aucune idée de ce à quoi correspond ce code, ignorez cet exemple pour l'instant.


Du texte de couleur par défaut , avec une taille proportionnellement plus grande de 20% par rapport à la taille par défaut :

FONT-SIZE:120% ;


Du texte de couleur jaune, avec un texte plus petit cette fois, à 80% de la taille standard :

COLOR:yellow; FONT-SIZE:80% ;


Maintenant, vous pouvez directement effectuer vos tests dans votre éditeur CSS. Nous avons convenu de modifier le texte de description de votre blog. Vous pouvez à présent tester les exemples ci-dessous directement dans l'éditeur CSS.

Pour une description en 'bleu', d'une taille de 18 pixels :

#blogDescription {COLOR:blue ; FONT-SIZE:18px ;}


Pour une description en 'blanc', d'une taille de 80%:

#blogDescription {COLOR:white; FONT-SIZE:80% ;}


etc.


Changer la couleur et la taille du titre du blog

Cette fois-ci, il s'agit de la zone #blogTitle. Il y a une ruse cependant dont il faudra tenir compte : le titre de votre blog est un lien, il est réactif lorsque l'on clique dessus.

Nous allons donc devoir modifier la zone #blogTitle, en lui spécifiant que nous souhaitons modifier le lien qui y est inclus.

Sept affirmations à retenir durant dix minutes:

- les liens HTML sont désigné par le code (balise) 'A', nous allons donc modifier la balise 'A' de la zone '#blogTitle' ;
- les liens HTML ont au moins trois états : neutres (lorsque vous les voyez pour la première fois) , 'visités' (lorsque vous avez déjà cliqué dessus au moins une fois), 'survolés' (lorsque votre curseur de souris passe dessus) ;
- les modifications d'apparence doivent s'effectuer sur l'un ou plusieurs de ces trois états possibles ;
- l'état 'neutre' se définit par le code 'link' ;
- l'état 'visité' se définit par le code 'visited' ;
- l'état 'survolé' se définit par le code 'hover' ;
- pour modifier l'apparence d'un lien, l'on précisera la zone CSS à modifier, suivie de la balise HTML concernée, suivie de son état ;



Entrons directement dans le concret, je sens que vous n'avez pas tout saisi ; )

Changer le titre du blog en texte rouge, de taille 30 pixels, lorsqu'il a été visité au moins une fois:

#blogTitle a :visited {COLOR:red;FONT-SIZE:30px ;}


Changer le titre du blog en texte blanc, de taille à 80%, lorsqu'il a été visité au moins une fois:

#blogTitle a :visited {COLOR:white;FONT-SIZE:80%;}


Changer le titre du blog en texte rouge, de taille à 120%, lorsque le curseur de souris passe au-dessus (impression de dynamisme) :

#blogTitle a :hover {COLOR:red;FONT-SIZE:120%;}


Changer le titre du blog en texte de couleur personnalisée, de taille à 140%, lorsque le curseur de souris passe au-dessus (impression de dynamisme) :

#blogTitle a :hover {COLOR: #a74598;FONT-SIZE:140%;}


Toujours en vie ? Si vous n'y arrivez pas, ce n'est pas grave. Dans le pire des cas il faudra vous contenter de l'apparence actuelle du titre de votre blog ;)

Nous allons à présent nous occuper du fond.


Modifier la couleur de fond de l'en-tête

Pour modifier la couleur de fond de l'en-tête, le code CSS sera :

BACKGROUND-COLOR


Ce qui donnera, si l'on souhaite un fond chaleureux et jaune :

#zone1Header {BACKGROUND-COLOR: yellow ;}


Ou encore, si l'on souhaite un fond bleu:

#zone1Header {BACKGROUND-COLOR: blue;}


Facile ? Je vous l'avais dit !


Modifier l'image de fond de l'en-tête

La modification de l'image de fond s'effectue en deux étapes :

- choisir l'image et la rendre accessible via Internet
- renseigner l'adresse web de l'image de fond dans la zone #zone1Header


Pour une image de fond déjà accessible via Internet

Les possibilités sont multiples. Une chose est sûre : cette image ne doit pas être uniquement sur votre disque dur.

Si vous souhaitez placer une image que vous avez trouvé sur le web (vérifiez bien avant si vous en avez le droit ou non), il vous suffit de cliquer dessus avec le bouton droit de la souris et sélectionner 'copier l'adresse du lien'.

Afin d'être certain d'avoir copié la bonne adresse en mémoire, 'collez'-la dans la barre d'adresse du navigateur et lancez la recherche. Si le navigateur vous affiche l'image, et seulement l'image, vous avez correctement copié le lien. Si vous arrivez ailleurs, réessayez ou, abandonnez !

Pour une image stockée sur votre disque dur

Vous pouvez publier votre image sur le serveur grâce à votre dossier de stockage personnel. Vous avez plus ou moins d'espace disponible selon la formule. Les formules 'Découverte' disposent de 10 mégas-octets d'espace personnel sur le serveur, ce qui devrait être largement suffisant pour y placer votre image de fond.

Pour ce faire, cliquez sur le module 'Images', puis sur 'Publier'. Vous pourrez alors sélectionner votre fichier sur votre disque, lui donner un nom simple, court et représentatif (p.ex. : entete.jpg). Dans 'opération spéciale', sélectionnez l'opération 'Ne pas redimensionner, mais optimiser si nécessaire'. Cela réduira la taille de l'image si c'est possible.

Cliquez sur 'Enregistrer'.

Cliquez ensuite sur 'Gérer', pour afficher la liste de vos images.

La dernière colonne indique le nom de l'image. Vous pouvez cliquer dessus pour la voir. Encore plus utile : vous pouvez cliquez sur l'image qui nous intéresse avec le bouton droit de la souris et choisir l'option 'copier l'adresse du lien'.

Nous avons à présent l'adresse de l'image stockée en mémoire.

Retournez dans l'éditeur CSS et collez l'adresse, en attendant. Elle devrait se présenter sous la forme :


http://www.monblog.ch/uploads/xxxxxxxx/nomimage.jpg


Si cela ne ressemble pas à ça, il y a un problème. Sinon, la vie est belle !


J'ai l'adresse web de mon image ! Que faire ensuite ?

Simplement saisir le texte suivant dans votre éditeur CSS , en prenant soin de remplacer 'AdresseWEB' par l'adresse web de votre image:

#zone1Header { BACKGROUND-IMAGE: url('AdresseWEB');}


Faites bien attention à la syntaxe et les apostrophes, ça ne pardonne pas !

Cliquez sur 'Enregistrer' et regardez le résultat en cliquant sur 'Preview' !


La cerise

Si vous êtes un peu plus exigeant, vous pouvez également personnaliser la hauteur de l'en-tête de votre blog, afin de l'adapter à l'image de fond. Le code CSS pour effectuer cela est :

HEIGHT


L'exemple suivant montre comment modifier l'image de fond et par la même occasion réduire la hauteur de l'en-tête à 60 pixels de haut :

#zone1Header {BACKGROUND-IMAGE: url('http://www.monblogcestgenial.com/image.jpg'); HEIGHT: 60px;}


Et pour ceux et celles qui ont tout compris, voici comment modifier l'image de fond , augmenter la hauteur de l'en-tête à 250 pixels de haut et attribuer un fond noir à l'en-tête:

#zone1Header {BACKGROUND-COLOR: black ; BACKGROUND-IMAGE: url('http://www.monsite.com/image.jpg'); HEIGHT:250px ;}



Conclusion

Nous avons vu dans ce tutorial les zones CSS spécifiques à l'en-tête des blogs sur 'monblog.ch'.

Nous avons également vu les différents codes ou attributs CSS permettant de modifier respectivement la couleur du texte, la taille du texte, la couleur du fond, l'image de fond et la hauteur de la zone :

Color
font-size
background-color
background-image
height


Nous avons finalement vu comment combiner ces attributs les uns aux autres afin d'obtenir un résultat le plus proche possible de nos exigences pour l'en-tête du blog.

Questions ? Remarques ? N'hésitez pas !