Avant de commencer à vous présenter comment personnaliser les couleurs ou la texture d'un élément de blog, j'aimerai faire un petit point sur comment on utilise le CSS. Il est assez facile de l'apprendre en mettant main à la pâte et en louchant dans le code source de la page: à l'inverse de l'HTML, vous ne pouvez pas rendre votre page web hors service en l'utilisant. Cependant, dans la programmation des blogs, Eklablog a recours à de l'HTML dans lequel est imbriqué du CSS: il est possible de le modifier évidemment mais les modifications effectuées avec les autres outils Eklablog dans "Modifier l'apparence" prennent très souvent le dessus sur celles que vous faites dans votre code CSS. Pour éviter ce genre de problème, désactivez ce que vous pensez faire conflit contre votre code s'il ne fonctionne pas. Dans tous les cas, mes DMs sont ouverts pour n'importe quelle question.

Maintenant que cela est mis au clair, nous pouvons commencer. Pour pouvoir colorer un élément de blog, vous devez tout d'abord vous munir du code de la couleur que vous voulez utiliser. Les plus basiques sont black, white, blue, red, green, purple... et ainsi de suite, rien de plus facile que les couleurs en anglais! Mais ils existent aussi sous forme de code couleur, comme toutes leurs nuances: un hashtag suivi de six chiffres qui représentent votre couleur. Ainsi, le blanc sera #ffffff quand le noir sera #000000. Vous trouverez ci-dessous un sélecteur de couleurs qui vous donnera la couleur de votre choix (Attention, il faut activer Flash Player).

Le code HTML à coller dans votre code source si vous le désirez:

<object data="http://ekladata.com/1ptoryDafHRtYDIDwhpBQ4ec-3E/tableau-de-color.swf" type="application/x-shockwave-flash" wmode="transparent" width="386" height="248">

 Désormais vous savez comment accéder à toutes les nuances possibles de couleur! Maintenant, apprenez à intégrer ces petites perles dans votre code CSS. Le fonctionnement se fait ainsi: sélecteur{propriété:couleur;} (ce modèle est expliqué dans l'article Le CSS, c'est Quoi?). Si vous avez lu mon article Les Sélecteurs Eklablog, vous savez aisément comment remplir la partie sélecteur, mais qu'est-ce donc que la propriété? Elle varie en fonction de ce que vous voulez modifier dans votre élément de blog.

J'explicite: prenons par exemple l'en tête #header, si l'on veut modifier la couleur de fond de celui-ci, on utilisera la propriété background-color pour rendre le fond jaune: #header{background-color:yellow;}.

Au contraire, si l'on veut modifier seulement la couleur du texte du header, on utilisera simplement la propriété color: #header{color:blue;}.

Passons maintenant à l'insertion d'images. On peut, grâce à la propriété background-image, ajouter une image qui sera forcément placée par dessus la couche de fond colorée s'il y en a une. Il faut pour cela trouver l'URL de votre image en l'hébergeant sur le web: la technique la plus efficace qui a 99% de réussite (notez que les images très lourdes ne passent pas) est de cliquer sur "Contenu" > "Gérer les fichiers" et de cliquer sur "Uploader un fichier", terme fancy pour l'importer sur le réseau eklablog qui vous donnera une adresse que vous n'aurez plus qu'à copier.

Mais où placer son URL? C'est simplissime: c'est exactement comme pour les codes couleurs, à un chouya près: au lieu de #m0ncU1 (???) ce sera url(VOTRE URL). Exemple:

#header{background-image: url(VOTRE URL);}

Il ne reste plus qu'à sauvegarder votre code CSS et le tour est joué!

Je dépose ici les codes permettant de modifier l'attachement de l'image et compagnie:

• La répétition de l'image: background-repeat:
  • repeat; (répétition)
  • no-repeat; (pas de répétition)
  • repeat-y; (répétition verticale)
  • repeat-x; (répétition horizontale)
• L'attachement de l'image: background-attachment:
  • scroll; (normal)
  • fixed; (fixe)
• position de l'image: background-position:
  • top right; (en haut à droite)
  • top left; (en haut à gauche)
  • top center; (en haut au milieu)
  • center right; (au milieu à droite)
  • center right; (au milieu à gauche)
  • center center; (au milieu)
  • bottom right; (en bas à droite)
  • bottom left; (en bas à gauche)
  • bottom center; (en bas au milieu)
  • Xpx Ypx; (à Xpx de la gauche et Ypx du haut)
  • X% Y%; (à Xcm de la gauche et Ycm du haut)
  • Xcm Ycm; (à Xcm de la gauche et Ycm du haut)

Voici un exemple de tout ce que l'on a dit plus tôt:

#header{

background-color: blue;

background-image: url(URL);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center left;}

On peut aussi raccourcir le code grâce à la propriété background qui regroupe tout (on sépare chaque valeur par un espace):

#header{background: blue url(URL) no-repeat fixed center left;}

Vous savez maintenant tout sur comment insérer des couleurs et des images à l'aide du CSS. Si vous avez une question, quelle qu'elle soit, posez-là moi en commentaire; ce sera un plaisir d'aider.

A venir: ombres et transparence