Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
Dans un blog OB on rédige les commentaires dans un popup (un "diablog" en jargon OB – ô Roland Dubillard !). Ce popup se plante au centre de l'écran et il n'y a pas moyen de le déplacer. Il s'affiche par-dessus une vitre
très sombre et on ne peut rien changer à cette vitre.
Alors j'ai pris ma… ma référence JavaScript et mon couteau, et j'ai taillé un petit bout de programme JS pour améliorer tout ça. Tant que j'y étais, le bouzin traite en fait tous les diablogs présents sur un blog. Voilà – mais ça ne vaut que pour les blogs de niveau "Privilège" ou "Premium".
Avertissement honnête avant de poursuivre : ce programme, vous vous en doutez, exploite à fond ce que je sais de la structure d'un blog OB (petite publicité : tout est résumé dans cet article et les suivants). Donc si OB modifie cette structure il ne me demandera pas mon avis et le programme pourra ne plus marcher. Dans un tel cas, résignez-vous à le désactiver en attendant que j'en ponde une version à jour.
Mes Documents/Autres fichiersde votre admin de blog.
<script type="text/javascript" src="URL_du_programme"></script>
Si vous êtes en configuration avancée, assurez-vous d'ajouter cette ligne dans le pied de blog ARTICLE et ACCUEIL, ainsi que dans celui de PAGES.
Remplacez bien sûr URL_du_programme par l'url effective du fichier.
Voilà pour l'installation.
Le programme fonctionne sans autre ajout. Mais, tant qu'à regarder de près la structure des diablogs, j'en ai profité pour ajouter de quoi présenter plus finement tout le truc.
Le div (bien peu) transparent intercalé entre le popup et le blog reçoit la classe vitre. Même si ce div vous agace je vous déconseille formellement de le supprimer en ajoutant à votre CSS
.vitre {display:none}
Utilisez plutôt quelque chose dans ce goût-là :
.vitre {opacity:0.3!important;background-color:#272020!important}
Les deux !important sont… importants pour que votre règle ait une chance de marcher, la valeur de l'opacité (opacity) et celle de la couleur de vitre (background-color) sont à votre choix. Évitez tout de même opacity:0 !
Tous les diablog portent la classe diablog, donnant ainsi une première possibilité de mise en forme.
Le programme, quand il se déroule correctement, leur ajoute la classe plus. Cette classe supplémentaire permet de donner une présentation différente aux diablogs déplaçables et à ceux qui ne le sont pas. Par exemple, pour que le curseur change au survol de la barre de titre :
.plus .title {cursor:move}
Seuls les diablogs mobiles auront ce curseur. Pourquoi un diablog ne serait-il pas mobile ? Parce qu'il y a un raté dans le programme (j'espère que non !), parce qu'il s'agit d'un nouveau type de diablog non encore traité par le programme, parce qu'OB a changé la structure des diablogs, parce que… Dans tous ces cas pas de classe plus et pas de curseur spécial, donc pas de fausses promesses au visiteur du blog. Ça vaut mieux, non ?
Toujours s'il se déroule correctement, le programme ajoute à chaque diablog une classe précisant sa nature : addComment pour le diablog de saisie de commentaire, shortURL pour le diablog affichant l'URL simplifiée, eMail pour les diablogs "Recommander" ce blog ou un article. Vous pouvez ainsi donner un aspect spécifique à chaque diablog.
Lorsque le lecteur clique sur la barre de titre du diablog pour le faire glisser à l'écran, celui-ci prend la classe glisse et la perd dès que le lecteur relâche le bouton de la souris. Exemple d'utilisation :
.glisse{border-style:dotted}
Vous pouvez tout aussi bien choisir de rendre le diablog légèrement transparent, changer la couleur de son texte… À vous de choisir ce que vous préférez !
Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte le programme si la tripe de la bête vous intéresse. Sa lecture est totalement facultative, n'y cherchez pas la réponse aux difficultés que vous pourriez rencontrer pour installer ce programme – mieux vaut dans ce cas laisser un commentaire ou m'écrire.
dissectiondu programme et report dans un article séparé.