Mode avancé: Mettre un fond

24 octobre 2006

Mode avancé: Mettre un fond

Je vais vous expliquer comment mettre un fond sur votre blog Canalblog en mode avancé...

1. Choisir un fond...

Je prends celui-là (Je précise que celui-ci est enregistré sur mon ordinateur)

2. Imageshack ou autre hébergeur d'images

Je vais sur Imageshack puis je clique sur "Parcourir", je cherche mon fond dans mon ordi et une fois trouvé je clique 2 fois dessus, celui-ci va s'afficher sur Imageshack comme ceci (Cliquez sur l'image pour voir en plus grand)

Ensuite je clique sur "host it" puis je clique-droit sur le lien "Direct link to image" et je copie (Cliquez sur l'image pour voir en plus grand)

3. Insérer le lien copié+un code dans "Apparence" de Canalblog

Je vais dans "Apparence" du menu Canalblog (Cliquez sur l'image pour voir en plus grand)

puis dans "éditer les fichiers de ce modèle" j'arrive donc ici (Cliquez sur l'image pour voir en plus grand)

Je vais dans "feuille de style général" c'est ici (Cliquez sur l'image pour voir en plus grand)

et j'obtiens ceci (Cliquez sur l'image pour voir en plus grand)

Là je repère les 1eres lignes (Cliquez sur l'image pour voir en plus grand)

Sous le background-color de <body> ici (Cliquez sur m'image pour voir en plus grand)

j'insère background-image: url("adresse de mon image copié sur imageshack");

ce qui donne (Cliquez sur l'image pour voir en plus grand)

je "valide" et j'obtiens (Cliquez sur l'image pour voir en plus grand)

*Si je désire mettre un fond dans ma colonne j'insère le code sous le background-color de #rightbar ou #leftbar (cela dépend où est votre colonne) (Cliquez sur l'image)

J'obtiens (Cliquez sur l'image)

*Si je désire mettre un fond dans mes message j'insère le code sous le background-color de #content

J'obtiens (cliquez sur l'image)

*si je veux le mettre en bas de mon blog j'insère le code sous le background-color de #container

J'obtiens (cliquez sur l'image)

*Si je veux me mettre un fond dans ma barre de titre de blog j'insère le code sous le background-color de #topbar

J'obtiens (Cliquez sur l'image)

*Enfin si je veux sur tout j'insère le code sous chaque background-color de body, #container, #content, #rightbar ou #leftbar ou les deux (si vous avez mis les deux colonnes), et #topbar

J'obtiens (Cliquez sur l'image)

Bon là c'est très laid ;o)