Profil

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

Photo.Graph

Catégories

7 février 2009 6 07 /02 /février /2009 07:07

Lorsqu'on modifie un design d'over-blog pour le rendre « à son image » il peut arriver que certaines images ou valeurs soient récalcitrantes... on a beau les triturer, elles restent là et empêchent notre blog de devenir la véritable œuvre d'art que l'on voit dans nos rêves.

 

Mais y'a une astuce pour ceux et celles qui ont du mal avec le css mais qui n'ont pas peur de se salir les mains... une astuce qui se réalise facilement sans avoir à apprendre 4 volumes par cœur sur la syntaxe du css.

 

 

 

Il peut arriver lorsqu'on place une bannière que l'entête d'origine du blog soit toujours présente en arrière plan. Et c'est pas très esthétique !

 




 

- Comment faire sans s'arracher les cheveux ?

Très simplement, c'est la même méthode que celle expliquée dans l'article « Modifier le fond du blog sans rien connaître au css »

Il faut ouvrir le blog concerné (dans notre exemple, voici un blog avec le thème nacre métal), faire un clic droit sur la bannière et choisir « enregistrer l'arrière plan sous ».


 

Ce n'est pas la peine de l'enregistrer !

Nous regardons juste quel est le nom de l'image... !

Dans le thème Nacre Métal, nous voyons que son nom est : hdr.jpg

 


Il suffit alors de faire une petite recherche dans le css (en appuyant sur F3, l'invite de recherche s'affiche tout seul).

On voit que la bannière originale s'affiche une seule fois (parfois il peut y en avoir plusieurs) dans « Définitions d'affichage de la variation »
 

#cl_0_0 { background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/hdr.jpg); background-position: bottom; background-repeat: no-repeat;}

 

Il suffit alors de modifier ainsi :

Soit en modifiant l'adresse de la bannière originale par la sienne, mais ce n'est pas le plus facile. Car si vous changez de bannière, il vaut mieux passer par la configuration que par le css.

#cl_0_0 { background-image: url(http://url/mabanniere.jpg); background-position: bottom; background-repeat: no-repeat;}

 

Soit en supprimant l'image et en indiquant à sa place une couleur d'arrière plan :

#cl_0_0 {background: #CC000;}

Ici j'ai indiqué rouge.

Et placer une bannière comme indiqué dans l'article : placer une bannière

http://photo.graph.over-blog.com/article-19775362.html

 

Soit en supprimant l'image et en laissant l'entête transparente ce qui permet de laisser le background en arrière plan :

#cl_0_0 {background: transparent;}

Et placer une bannière comme indiqué dans l'article : placer une bannière

http://photo.graph.over-blog.com/article-19775362.html

 

 


 

Cette astuce est valable pour toutes les images présentes dans le blog !

 

 

 

Par exemple dans le même thème (nacre métal), on peut avoir du mal à se débarrasser du fond des articles. Un petit clic droit, « enregistrer l'arrière plan sous », on repère le nom de l'image : article_624_background.gif

 

On fait une recherche dans le css et on s'aperçoit que cette image est présente deux fois :

 

.pageContent {background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/article_624_background.gif);background-repeat: repeat-y;}

 

.contenuArticle, .extrait {background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/article_624_background.gif); background-repeat: repeat-y;}

 

On sait que .pageContent correspond aux pages... ce n'est pas donc pas le fond des articles. Par contre .contenuArticle correspond bien au css des articles.

 

 

Il suffit alors de modifier ainsi :

Soit en modifiant l'adresse du background original du fond des articles par la sienne.

.contenuArticle, .extrait {background-image: url(http://urldemonimagedarticle.jpg); background-repeat: repeat-y;}

 

Soit en supprimant l'image et en indiquant à sa place une couleur d'arrière plan :

.contenuArticle, .extrait {background:#FFFFFF;}

Là j'ai indiqué blanc.

 

Soit en supprimant l'image et en laissant le fond transparent ce qui permet de laisser le background en arrière plan :

.contenuArticle, .extrait {background: transparent;}

 

 

Partager cet article

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

commentaires

djoule 07/02/2009 21:35

houuuu merci ^^ voila je crois que maintenant tout est en place...jdois dire que c'est grâce a toi et à ton blog super clair !!! donc milles mercis ! ;-)

Christelle Vinsonneau 08/02/2009 12:48


Ahhh voilà qui fait plaisir...
Sans vouloir te déprimer : il te reste une image !
Le pied de page est encore récalcitrant, mais maintenant plus rien ne te résiste, tu vas t'en sortir ;-) et tes titres d'articles au passage de la souris sont noirs sur fond noir (c'est peut-être
une volonté de ta part?)
Et pour chipoter, tu as le bandeau de pagination pas vraiment aligné avec tes modules : le background noir est légèrement décallé. Et pour vraiment pousser (tu vas me détester) : l'affichage
des commentaires peut-être plus en harmonies avec ton blog.
Tu as besoin d'indices ou tu sais quoi faire ?


djoule 07/02/2009 19:40

houhou fausse alerte tout est rentrée dans l'ordre...enfait on s'amuse vachement avec ces "définitions avancées"...bon mon blog est presque terminé mais je trouve toujours pas comment changer la couleur des background et du texte des titres des mes modules genre profil, présentation et tout le tintouin...^^

Christelle Vinsonneau 07/02/2009 19:58


La cellule du titre des modules (la case qui contient le titre) c'est .box-titre h2{} le texte du titre c'est .box-titre {}
et tout est expliqué ici : http://photo.graph.over-blog.com/article-19234594.html 


djoule 07/02/2009 18:25

ok j'ai trouvé la solution...enfait j'avais pas vue qu'on pouvais faire d'autre réglages dans "définitions avancés"...ok j'ai un peu honte !!!
Du coup c'est réglé c'est cool, par contre j'ai plus de fond ça c'est moins cool...

Christelle Vinsonneau 07/02/2009 19:20



Héhé !!! Mais tu as réparé la structure de tes pages d'articles et commentaires ;-)
Bon, ben tu peux regarder là : http://photo.graph.over-blog.com/article-25727949.html ou là : http://photo.graph.over-blog.com/article-17113585.html



djoule 07/02/2009 13:34

pouhaaaa merci maintenant mes articles sont tout beau tous propre...bon pour la bannière c'est pas gagné ça marche pas malgré des explication simple et claire...mais ce ne serai pas marrant si ça ne donnais pas de fil a retordre

Christelle Vinsonneau 07/02/2009 13:50


Ah bon ????
Es-tu en mode avancé ou en mode classique ?

EDIT : j'ai la réponse en allant sur ton blog : tu es en avancé. Passe en classique !


cerisette 07/02/2009 12:30

il faut que je revienne te voir plus en détail car ce matin , il est un peu tard
bisous
cerisette

Christelle Vinsonneau 07/02/2009 13:49


Reviens quand tu veux !