Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci Enregister : Ctrl S




Les tutoriaux: Index » Site Web » HTML » Masquer les lignes disgracieuses de la likebox Facebook

Introduction

  • Tutoriel posté par Sky
  • 1896 lectures
  • Mis en ligne le 14-01-2011
  • Dernière mise à jour le 15-01-2011
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Pour accéder à la page de démo cliquez sur le lien ci-dessous
Page de démo likebox Facebook perso


Méthodologie
Vous avez remarqué je suppose que lors de l'intégration de la likebox de Facebook en colorsheme dark qu'il y avait des lignes disgracieuses autour de la box qu'on ne peux pas enlever avec le css de la balise iframe.

Pour exemple voici ce que ça donne par défaut avec le colorsheme DARK.



Oulala que c'est pas beau :)
La méthode que nous vous proposons est d'intégrer cette frame dans un div sur lequel nous allons appliquer certaines class CSS.

Voici la balise proposée par Facebook:

CODE HTML


<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=dark&show_faces=true&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe>



Nous allons imbriquer cette iframe dans un div avec une class CSS nommée "fb" que nous définirons par la suite. Le nouveau code d'intégration devient :

CODE HTML


<div class="fb"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=dark&show_faces=true&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe></div>



Maintenant voici la class CSS fb :

CODE CSS


.fb {
border:1px #4B1E6E dotted; // La couleur et style de la bordure que nous souhaitons
/* Ci dessous la largeur et hauteur 
Attention vous devez mettre une taille inférieure à celle de la box Facebook 
Si votre likebox fait 230*300 mettez 220 et 296 ci-dessous */
width: 220px; height: 296px;
/* Tout ce qui dépasse sera caché, c'est cet élément qui nous intéresse */
overflow: hidden; 
}



Maintenant que notre class CSS est prête nous allons modifier la balise style de la iframe FB
Nous allons lui attribuer une marge négative, de ce fait grâce à l'overflow de la div et sa class fb, le fait de déplacer la frame cachera les contours.

CODE HTML


<div class="fb"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=dark&show_faces=true&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="margin-top:-4px;margin-left:-3px; border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe></div>



Et voila le résultat :



Avec cette méthode vous pouvez également enlever le lien "Module social Facebook" en pied de frame, tout simplement en diminuant la taille height de la class fb.



La page de test est disponible ici
Page likebox Facebook perso

Notes

  Evaluez le tutorial (0 Votes)

0
0
0

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Site Web] Masquer les lignes disgracieuses de la likebox Facebook

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com