Rendre Transparent la zone de contenu

Suite à un Mail de Song Of The Week , je cite :
Bonsoir,

vous dites dans la\'rticle sur l\'intégration d\'un système de vote, \"trouver dans le code HTML la variable suivante\" mais.. comment la trouver ? on doit tout lire ?

De plus j\'ai plein de questions, comme comment faire pour rendre une partie de notre blog transparent pour laisser passer la photo d\'arrière plan (comme sur le haut de votre site avec le logo d\'OB etc..

Merci ! http://sotw.overblog.com/

Pour la transparence tout ce passe au niveau des CSS déclarés dans votre thème, j'ai un exemple tout fait, avec la modification du thème Simple Image ici . Mais je vais essayer d'expliquer de manière plus générale la mise en pratique d'une transparence pour une zone de contenu afin de laisser apparaître l'image d'arrière plan. Je vais donc entrer dans un premier temps dans la gestion des transparences avec CSS 3.0.

Par exemple, j'ai un paragraphe avec une bordure noire et un fond blanc dans mes styles déclarés sur mon thème X :

p{background-color:white;border:1px solid black;}

/* pour les couleurs le plus souvent la notation hexadécimale est utilisée*/
/* ce qui donnerait pour le même résultat que précédemment */
p{background-color:#fffff;border:1px solid #000000;}

<!-- et le code HTML -->
<p>Le résultat ici !</p>

Le résultat ici !

Maintenant supposons que je veuille afficher ce paragraphe au dessus mais en transparence alors que j'ai une image de fond, comme celle ci :

Le résultat ici !

Vous remarquez que mon paragraphe avec sa couleur de fond définie plus haut (ici blanc) occulte mon image de fond. Nous allons remédier à ce problème en changeant notre style de paragraphe :

p{background-color:transparent;border:1px solid black;}

Le résultat ici !

Maintenant que mon paragraphe est transparent, je m'aperçois de l'inutilité de la bordure et que la couleur des caractères n'est plus adaptée. Donc je vais une nouvelle fois modifier mon style pour le paragraphe pour passer mon texte en blanc et supprimer la bordure noire.

p{background-color:transparent;border:0px;color:white;}

Le résultat ici !

Mission accomplie, notre texte est au dessus de l'image de fond...

Si je souhaite une transparance avec un effet calque, il me faudra changer quelques éléments à mon style de paragraphe.

p{background-color:white;
  border:0px;
  color:black;
  /*pour activer une transparence effet calque*/
   /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape Firefox */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Bons navigateurs + Chrome */
  opacity: 0.5;}

Le résultat ici !

La branche est encore visible sous le paragraphe. Dans cette exemple nous avons réglé une opacité à 50%.

Maintenant, comment faire la même chose sur un de mes thèmes?

Il faut tout d'abord repérer le style qui doit être mis en transparence dans le code source du thème Overblog utilisé pour votre blog. Une petite vidéo s'impose en prennant comme exemple le thème prédéfini Simple Image.

Pas de son à la vidéo c'est normal ai grillé ma carte son, mais c'est très simple à comprendre j'ai recherché dans mon source le style .item-content et j'ai forcé l'attribut background à transparent.

Si des questions, à votre disposition (pensez aussi à utiliser le forum du blog)