Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

14.01.2010

Personnaliser l'affichage des notes relatives avec LinkWithin

Vous dynamisez vos archives avec LinkWithin 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 à l'invitation d'Angelie de Gestes-Environnement, et voici ce que j'ai relevé.


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 est normalement le suivant (hors les commentaires)

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

Pourquoi ne pas passer des 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 :

<!-- linkwithin /postbottom-->
<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>
<!-- /linkwithin /postbottom-->

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-moi ce que vous en avez fait !

10:06 Écrit par Gee Mee dans Configuration avancée, Widgets | Lien permanent | Commentaires (2) | Tags : linkwithin, widget | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Merci Geemee pour ce travail, je vais regarder tout cela de plus près.

Écrit par : Angelie | 21.01.2010

Répondre à ce commentaire

Je vous en prie Angélie, la popularité du widget méritait que l'on y prête attention. J'espère que cela sera utile à de nombreuses personnes.

Écrit par : Gee Mee | 21.01.2010

Les commentaires sont fermés.