Publié dans : La gadgetière

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.


Installation

  1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
  2. Si vous voulez, changez-y le texte de l'infobulle du diablog ('tip').
  3. Ensuite stockez ce programme dans l'espace  Mes Documents/Autres fichiers  de votre admin de blog.
  4. Enfin, ajoutez une ligne au pied de page du 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.

Fignolage(s) CSS

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.

La vitre fumée

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}
… parce que le visiteur pourrait alors cliquer n'importe où dans votre blog tout en écrivant un commentaire : caca-beurk garanti.

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 !

Le diablog

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.

Le diablog en cours de déplacement

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 !


Démontage

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.

Mises à jour

  • Novembre 2011 : 1ère publication
  • Juin 2012 : simplification du programme, mise à disposition du programme sous forme téléchargeable, correction et amélioration de l'article, réécriture de la  dissection  du programme et report dans un article séparé.
Lundi 28 novembre 2011 1 28 /11 /Nov /2011 00:00
- Par Aïe mes doigts ! - Communauté : Aide
Mazette ! Déjà 8 mots ! - Et si vous écriviez quelque chose ?
Retour à l'accueil

Commentaires

Tu es un mordu inconditionnel du javascript bren et moi j'aime ça car j'en profite et je t'en remercie.
Gros bisous, Flo
PS: j'ai déjà passé le script à deux personnes et tout s'est bien déroulé.
Commentaire n°1 posté par Flo-Avril le 28/11/2011 à 14h43

Pas mordu inconditionnel - pas que de ça, non plus ... Mais si on peut fabriquer des choses utiles avec, pourquoi se priver ?

Réponse de Aïe mes doigts ! le 29/11/2011 à 17h04
Tu as entièrement raison bren et moi j'aime ça
Tu sais que mon ex est codeur et il déteste le javascript ...
Gros bisous, Flo
Commentaire n°2 posté par Flo-Avril le 29/11/2011 à 17h38

Nobody's perfect :-)

Réponse de Aïe mes doigts ! le 30/11/2011 à 17h50
Bonsoir Bren,
J'avais déjà essayé ton programme mais j'avais du oublier quelque chose car ça n'avait pas marché.
Demain congé, alors de vais recommencer avec celui-ci.
Mille mercis pour ces programmes, c'est toujours le pincement quand on a tout mis en place et que Ô mystère, on affiche... pour voir...
Bonne soirée à toi.
Commentaire n°3 posté par Sagan33 le 12/06/2012 à 23h14

Bonjour,

A tous les coups tu n'avais pas corrigé l'indication de la cellule des articles (cl_1_0 par défaut), et tu n'es pas la seule dans ce cas. C'est pourquoi j'ai retouché le programme : il n'y a plus besoin de l'ajuster à chaque blog, c'est vraiment du presse-bouton.

Réponse de AïmD ! le 13/06/2012 à 10h17
effectivement, je n'avais pas touché à la cl_0
C'est toujours un plaisir de venir ici pour découvrir des arrangements pour son blog.
A +++
Tu es un chef Bren !
Commentaire n°4 posté par Sagan33 le 13/06/2012 à 10h50

De mon côté, je sais que tu n'as pas encore tenté d'employer la nouvelle version du programme : j'avais oublié de la mettre en ligne ! ! C'est corrigé :-)

Réponse de AïmD! le 14/06/2012 à 15h48
Bonjour Bren,
Je voulais le faire mais avec l'historique de cette nouvelle plate-forme, et les avis peu encourageants postés sur le forum sur le peu de possibilités offert dans les nouveaux design, je me demandais si cela valait la peine de rajouter un nouveau script.
Parait-il, concertés ou pas, tous les blogs migreront côté cette nouvelle plateforme.
Et, à ce qu'on lit, on ne peut même pas faire de copié-collé de son css. De plus je suppose qu'il en sera bien fini de ces 3 css.
Je me demande ce que tu penses de ce BETA. De toute manière même si on décide de ne pas migrer, à ce que je comprends, ils le feront d'office.
Il paraît qu'on ne peut même pas center une image, ni personnaliser les articles.
A te lire, ton avis m'intéresse beaucoup.
Geneviève.
Commentaire n°5 posté par Sagan33 le 14/06/2012 à 16h36
J'ai oublié de préciser, j'ai ouvert un blog sur la nouvelle plateforme, pourtant les design semblent plus modernes... bizarre alors toutes ces impossibilités.
Commentaire n°6 posté par Sagan33 le 14/06/2012 à 16h40
Finalement les designs de la nouvelle plateforme sont plus modernes.
Par contre, le css est tout nouveau, Impossible de changer la moindre police de caractère à l'intérieur, de mettre un fond d'image...
quelle frustration.
Si tu as 2 mn à perdre http://naturaessentia.over-blog.com
Bonne soirée Bren.
Commentaire n°7 posté par Sagan33 le 16/06/2012 à 20h03

Ahhh, les changements de version chez OB... tout un roman ! J'irai créer un blog de test un de ces jours pour jouer un peu. Et puis j'irai lire le forum - ça promet !

Réponse de Bren du fat ! le 23/06/2012 à 18h11
Comme tu dis au sujet du forum...
je préfère ne rien ajouter, il doit y avoir l’œil de Moscou qui traîne, Il paraît que je parle trop...

Il s'agit d'une version Beta mais à mon avis, la définitive ne va pas évoluer beaucoup.

Déjà qu'OB n'était pas convivial comparé à d'autres plate-formes, à présent, il va falloir ruser pour rajouter des liens. J'ai réussi à mettre des colonnes dans le footer mais reste une place vide à droite des articles, et rien dedans... si tu as du temps à perdre : http://naturaessentia.overblog.com

Le Miroirauxessences recueille rarement des commentaires ! alors pour reprendre une formule de là-bas : PG dixit superior staff, nous migrerons (à l'économie, tant pis pour le www) sans regret. Franchement ça ne vaut plus un Premium.

Pour mon second blog, les poules auront des dents quand je le migrerai. Je ne touche pas à Terre&Boissons.

Bonne soirée Bren,
Merci pour ta réponse.
Commentaire n°8 posté par Sagan33 le 23/06/2012 à 18h43

Commentaires

Calendrier

Juillet 2014
L M M J V S D
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
<< < > >>

overblog

Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés