Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

13 décembre 2008 6 13 /12 /décembre /2008 09:58

Aujourd’hui, voici un petit article qui explique une manipulation toute simple dans le css. Un article écrit tout exprès pour la communauté gif et fonds de blog qui m’a demandée de leur donner quelques astuces et conseils.

 

Voici une astuce toute simple pour celui ou celle qui ne comprend rien au CSS mais qui veut modifier son fond (background) de blog sans trop se salir les mains.

La véritable marche à suivre se trouve ici : modifier le fond de votre blog

 

Il faut quand même aller dans le css, il n’y a pas de fumée sans feu…

 



Allez dans votre administration, puis dans design, puis dans « mode avancé css », et là vous allez copier tout le css qu’il y a dans la fenêtre de style « Définitions d'affichage basiques ».

Puis vous cliquez sur le bouton « mon style » et vous allez effacer tout ce qu’il y a dans la fenêtre « Définitions d'affichage basiques » et coller ce que vous avez copié il y a quelques instants.


Vous aller ensuite cocher la case « personnaliser », puis enregistrer et retourner sur le design original en cliquant sur le bouton « original »
et (si ce n’est pas déjà fait), vous allez ouvrir Les définitions avancées en cliquant sur le + et vont s’ouvrir alors quatre autres fenêtres :

- Définitions d'affichage du template

- Définitions d'affichage de la variation

- Définitions de structure de la variation

- Définitions de structure du template

 

Et vous allez réitérer les étapes précédentes pour chaque fenêtre : copier tout le css qu’il y a dans la fenêtre de style « Définitions d'affichage du template », puis vous cliquez sur le bouton « mon style » et vous allez effacer tout ce qu’il y a dans la fenêtre « Définitions d'affichage du template » et coller ce que vous avez copié il y a quelques instants.

Vous aller ensuite cocher la case « personnaliser », puis enregistrer et retourner sur le design original en cliquant sur le bouton « original » et vous refaites pour les fenêtres « Définitions d'affichage de la variation », « Définitions de structure de la variation », « Définitions de structure du template ».

 




Là il y a la base nécessaire pour modifier le css et modifier son fond. Cette astuce est valable quelque soit le design de base utilisé, à condition qu’il ait une image en background (sinon, vous n’avez pas le choix, il va falloir se frotter à cet article :
modifier le fond de votre blog)

 


Prenons le cas du design prédéfini : technologic Red

 

Nous voulons enlever le fond pour placer celui de notre choix. Ouvrez votre blog et faites un clic droit sur le background et sélectionnez l’option « enregistrer l’arrière plan sous ».

Une fenêtre va s’ouvrir, elle va indiquer le nom du background actuel. Dans le cas du thème technologic Red vous verrez que le background s’appelle « body-bg.jpg ».


Il n’est pas nécessaire d’enregistrer l’arrière plan, dans notre cas seul le nom de l’image nous intéresse et désormais nous le connaissons. Et pour ne pas le perdre, copiez le nom de l’image. Allez sur le css (mode avancé, mon style) et recherchez où se trouve l’image, ce qui est facile en connaissant son nom.



Utilisez la touche F3 pour faire une recherche automatique avec le nom body-bg.jpg ou utilisez vos yeux de lynx. Dans le cadre du design technologic Red, elle se trouve dans « Définitions d'affichage de la variation » et dans la ligne de code suivante :

 body{  background: url(http://fdata.over-blog.com/99/00/00/01/templates/270/red/article/common/pics/body-bg.jpg) top no-repeat;}


Pour modifier le background il suffit de modifier l’url par une autre de votre choix.
Par exemple :
body{  background: url(http://monurl/monbackground.jpg) top no-repeat;}



N’oubliez pas d’enregistrer, et allez voir le résultat sur votre blog.
 N’oubliez pas de vider le cache pour voir le résultat (il suffit de faire F5, parfois plusieurs fois). Cette astuce est valable pour toutes les images présentes dans un css… à vous de jouer !

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

sagan33 05/01/2010 22:52


D'abord, c'est un grand remerciement pour ce Blog, sur lequel je passe du temps tellement il est bien fait, bien expliqué et si utile. Vous m'avez beaucoup aidé dans cet apprentissage du CSS ... Il
reste une seule chose que je n'arrive pas à faire : mettre une image de fond. Je ne sais pas à quel endroit modifier le CSS. J'ai tout essayé ...mon fond reste blanc. Comment faire ? Si vous avez
deux minutes à me consacrer pour me donner le mode d'emploi. Je vous adresse mes meilleurs voeux et encore merci pour tout. Amitié. Sagan33;


Christelle Vinsonneau 18/01/2010 12:39


bonjour !

ma réponse tardive : je constate que le fond n'est pas (ou plus blanc), je suppose que tu as fini par trouver !


Annmary 04/04/2009 21:08

Au secours ! (déjà) J'ai bien suivi toutes tes indications pour avoir la base pour pouvoir changer le fond. Par contre, sur mon blog, j'ai beau cliquer droit sur le background, je n'ai pas la fenpetre "enregistrer l'arrière plan sous". Que faire ?

Christelle Vinsonneau 19/04/2009 11:30


je suis allée voir ton blog, il semblerait que tu t'en sois sortie ! Bravo


annmary 02/04/2009 06:18

Bon, j'ai attentivement lu ton article,je vais essayer de l'imprimer pour suivre les étapes pas à pas... Par contre, si en fond de blog je désire utiliser une de mes photos, peux-tu m'expliquer comment récupérer son code url ? Je sens que la bataille va etre rude.... Merci encore et bonne journée à toi.

Christelle Vinsonneau 02/04/2009 12:17


Je vais faire un article qui va répondre à cette question... !
Soit pour aujourd'hui, soit pour demain !


cerisette 13/12/2008 16:34

je commence à présenter les blogs , j'avais lancé un défi , me faire soit une image soit une petite prose avec un enfant , un arbre et une étoile , si tu veux que je le présentes sans cela comme c'est plutot technique ce que tu fais , tu me préviens et je le mettrais
bisous
cerisette

Christelle Vinsonneau 14/12/2008 13:08


Hummm.... j'ai pas tout compris !
Il faudrait que je réalise une image ou un texte qui représentent les trois thèmes cités, c'est ça ?
Le texte, on va oublier... l'image c'est jouable (même si c'est dans un esprit technique).