Personnalisez l'affichage des notes similaires avec LinkWithin

Vendredi 5 février 2010 5 05 /02 /2010 09:15

Personnalisez l'affichage des notes similaires avec LinkWithin

Vous utilisez LinkWithin pour afficher des notes similaires et vous aimez ça ? Vous avez raison. Votre bonheur n'est pourtant pas parfait, car vous souhaiteriez que l'affichage corresponde un peu plus à vos goûts. Je me suis penché sur le sujet, et voici ce que j'ai relevé. Bien que cette note ait été préparée pour Hautetfort, à partir du moment où vous accédez au code Html de vos pages, cela peut vous intéresser.

Fausse piste

La mise en forme du contenu du module est commandée par une feuille de style hébergée par LinkWithin. Regardez le code source d'une de vos pages, et vous constaterez que vous n'avez pas spécifié tous les styles utilisés.

Comme il n'est pas possible d'intervenir sur une feuille de styles dont on n'est pas propriétaire, on aurait pu imaginer que d'encapsuler l'objet suffirait. C'est un peu ce que l'on fait quand on personnalise le lecteur de vidéo Dailymotion.

Pourquoi faire compliqué ?

Le code que vous insérez dans le modèle de page "lien permanent" (visualisation de l'article complet chez Hautetfort) est normalement le suivant (hors les commentaires)

<div id="pre linkwithin" style="padding: 0px 32px;"><div class="linkwithin_div"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>

Pourquoi ne pas passer d'autres critères de style dans la <div> comme le code d'origine l'a déjà commencé ? C'est ce que j'ai essayé de faire pour arriver au code suivant :

<div id="pre linkwithin"
style="width:80%;background-image : url(http://geemee.hautetfort.com/images/aspire/message-right.gif);
background-repeat: repeat-y;
background-position: right top;
color:#663300;
font-family:Trebuchet,Century Gothic,Lucida Grande,Verdana,Arial,Helvetica;
margin-top:4px;
padding: 0px 32px 0px;">
<div class="linkwithin_div"
style="padding: 0px 32px 8px;
background-image : url(http://geemee.hautetfort.com/images/aspire/message-left.gif);
background-repeat: repeat-y;
background-position: left top;"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>

Vous remarquerez que je suis intervenu sur :

- la largeur avec width, que vous pourrez utiliser pour tenter de center le module par exemple.
- l'arrière plan avec background-image, background-repeat et background-position. Si vous voulez un motif qui se duplique en mosaïque la ligne background-image : url(http://geemee.hautetfort.com/images/aspire/content-bg.gif); peut suffire. Mais attention, je n'ai pas forcément un bon fond.
- la couleur de la police avec color
- le type de police avec font-family
- les marges externes avec margin
- les marges internes avec padding.

J'ai aussi fait quelques tests avec :

background-colour:#996600;
border-with:1px;
border-style:solid;
border-color:#663300;

et cela fonctionnait parfaitement

À vos sites de référence...

Consultez donc l'excellent CSS MammouthLand pour réviser votre syntaxe et tentez l'aventure à votre tour. Vous trouverez aussi quelques pistes dans les notes :

• Un style pour les citations avec la propriété « border »
• Un style pour les citations avec "margin" et "padding"
• Afficher une image d'arrière plan en mosaïque, en motif

Et dîtes-nous ce que vous en avez fait !