[création d'un blog sur overblog] Mettre une image de fond sur le blog

Voir le sujet précédent Voir le sujet suivant Aller en bas

[création d'un blog sur overblog] Mettre une image de fond sur le blog

Message par Trefle le Mar 1 Nov 2011 - 16:42

MISE à JOUR vers la version 2 d'Over-Blog

Pour changer le fond d'un blog sur over blog il faut toucher au css. C'est un peu du domaine de la programmation. Mais ce n'est pas bien compliqué.

Voici la marche à suivre :

entrer dans l'administration du blog.

Vérifier que le en mode 'avancé' est activé (sur la page Administration, dans l'onglet 'Configurer', cliquez sur 'mode avancé')



charger l'image que vous comptez mettre en fond de blog. Pour cela aller dans 'Documents' puis 'Images&Albums photos' et là cliquer sur 'Ajouter des images'

Lorsque l'image est chargée, cliquer sur la petite icône en forme de loupe sous l'image. La fenêtre de l'image s'ouvre. Vous verez un lien au dessus de l'image, il s'agit de l'adresse de l'image sur le serveur d'over-blog. Cliquez droit et copiez l'adresse.



Cliquer sur 'Design' (1) puis cliquer sur 'Mode CSS' (2). Cliquez sur Global (3), puis sur "mon style" (4) et enfin, cochez la case 'appliquer ma feuille de style personnalisée' (5).




à ce niveau je vous conseille de copier le texte qui apprait dans la fenêtre, et de le coller dans un coin (bloc note par exemple) et surtout de l'enregistrer. Car si vous faites une mauvaise manipulation, l'apparence du blog risque t'en pâtir...

Tous les css présentés ne se ressemblent pas. Dans mon exemple j'ai choisi le thème "Ice cream pêche", je ne sais pas si cela marche avec les autres thèmes.

Cherchez la section 'Elements generiques' à la ligne 179, puis le terme 'background' (le premier de la liste, en face de 'body'.


  1. /* ---------- Elements generiques ------------- */
  2. body {background:#FFFDF3;color: #3A2C20;}
  3. a { color:#6F1001; }
  4. a:hover { text-decoration:underline; color:#3A2C20;}
  5. .newWindow { color:#FFB36A; }
  6. .newWindow:hover { color:#FFA026; }
  7. legend { color:#5675A4; }
  8. li { list-style-type: square; }
  9. img { border:0px; }
  10. input { border:solid 1px #FFB36A; font-size:100%; background:#FFFAE6; color:#FFA026; }

Remplacez le code souligné ci-dessus par cette ligne :
background: url(coller ici le lien de l'image) top fixed;
Le terme 'top fixed' permet de fixer l'image, mais si vous voulez qu'elle bouge lorsque vous déplacez la barre de navigation, ne le mettez pas. Personnellement j'ai opté pour fixe, c'est plus agréable.

Les lignes apparaissent donc ainsi :

  1. /* ---------- Elements generiques ------------- */
  2. body {background:url(lien-de-l'image) top fixed;}
  3. a { color:#6F1001; }
  4. a:hover { text-decoration:underline; color:#3A2C20;}
  5. .newWindow { color:#FFB36A; }
  6. .newWindow:hover { color:#FFA026; }
  7. legend { color:#5675A4; }
  8. li { list-style-type: square; }
  9. img { border:0px; }
  10. input { border:solid 1px #FFB36A; font-size:100%; background:#FFFAE6; color:#FFA026; }

Cliquez sur 'enregistrer'

Faites un petit apperçut de votre blog pour vérifier votre travail.

_________________
Comment participer au forum ? d'abord signez le règlement, puis présentez-vous. Attendez ensuite qu'un administrateur vous ouvre le sas des épreuves. Le chemin à suivre vous sera alors indiqué à la suite de votre présentation, ouvrez l’œil.
Si vraiment vous êtes perdus et ne savez pas quoi faire, envoyez moi un mp
avatar
Trefle
Créateur de constellations
Créateur de constellations

Féminin Messages : 2895
Date d'inscription : 27/09/2011

http://luckytrefle.deviantart.com/ http://sylviesbd.over-blog.com/

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum