J'aime me plonger régulièrement dans les CSS du thème[1] de ce blog et, ce coup-ci, j'ai eu envie d'intervenir sur le système de notes renvoyant en bas de page dans certains billets (comme celui-ci qui en a pas moins de 7, histoire de tester...).
Il se trouve qu'il existe une extension[2] pour Dotclear permettant, notamment, de faire en sorte que la note s'affiche au niveau du n° dans la pastille quand on clique dessus. Sans avoir besoin d'aller en bas de page.
Chouette ! Sauf que...
Sauf que la présentation par défaut proposé par "bigfoot" ne me convient pas complètement[3]. Et puis ça me permet de regarder comment ça se goupille pour pouvoir modifier le look en surchargeant certaines déclarations en CSS.
Ce qui donne, pour la zone qui affiche le n° de note[4]...
.bigfoot-footnote__button:after {
content: '['attr(data-footnote-number)']';
font-size: 0.5em;
top: 5px;
}
Pour la taille et l'alignement à gauche du texte de la note[5]...
.bigfoot-footnote__content{
font-size: 14px;
text-align: left;
}
Pour enlever les arrondis autour du texte de la note...
.bigfoot-footnote,
.bigfoot-footnote__content,
.bigfoot-footnote__wrapper,
.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper{
border-radius: 0;
}
Pour modifier la couleur des bordures...
.bigfoot-footnote,
.bigfoot-footnote__tooltip{
border-color: #999999;
}
Pour mettre le fond du texte de la note en blanc...
.bigfoot-footnote,
.bigfoot-footnote__tooltip,
.bigfoot-footnote__content,
.bigfoot-footnote__wrapper{
background: #FFFFFF;
}
Et pour harmoniser avec les différentes couleurs de la palette "winter" utilisée actuellement...
.winter .bigfoot-footnote__button:after{
color: #75888C;
}
.winter .bigfoot-footnote__button:hover,
.winter .bigfoot-footnote__button:focus,
.winter .bigfoot-footnote__button:active{
background-color: #75888C;
}
.winter .bigfoot-footnote__button:hover:after,
.winter .bigfoot-footnote__button.is-active:after {
color: #FFFFFF;
}
Je me suis beaucoup amusé avec cette extension et remercie très beaucoup chaleureusement son auteur (Franck Paul himself[6])pour l'avoir mise à disposition de la communauté Dotclear.
Pour faire bon poids une dernière note un peu maousse costaude[7] pour achever de tester le bouzin.
[1]Thème, look, aspect.
[2]Elle s'appelle "bigfoot" et peut se télécharger là.
[3]Des goûts et des couleurs, toussa...
[4]Ajout des crochets de part et d'autre du n°. Sauf que non : ce n'est finalement pas une bonne idée (voir les commentaires 3 et 4)
[5]Sachant que les textes sont justifiés par défaut dans le thème du blog. Du moins à l'heure où j'écris ce billet. Ca peut changer n'importe quand, au gré de mes humeurs du moment...
[6]Qui en cause très beaucoup bien ici.
[7][Début]...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet pede. Nunc vitae ligula eu lectus elementum pharetra. Ut lectus. Suspendisse vehicula dolor non arcu. Donec mattis, libero a tincidunt molestie, lacus nunc auctor metus, id interdum nibh eros a nunc. Phasellus nisl mauris, dapibus non, varius nec, porttitor a, felis. Morbi feugiat tortor. Nunc nunc. Nulla ac tortor id tellus iaculis porttitor. Morbi commodo est ullamcorper enim. Mauris facilisis, dui vel ornare scelerisque, eros lectus porttitor diam, at euismod lacus nulla condimentum ipsum. Fusce blandit. Sed ligula. Ut ac odio. Suspendisse gravida ante a felis.
...[Fin]
1. par Franck, le samedi 06 février 2016 à 19h48 commentaire
You're welcome, signé Franck, avec un 'c' comme dans, comme dans quoi d'ailleurs…
2. par mirovinben, le samedi 06 février 2016 à 22h25 commentaire
Oups ! Corrigé...
3. par mirovinben, le dimanche 07 février 2016 à 06h53 commentaire
Franck-avec-un-c-comme-dans-clavier, maintenant que je suis confortablement installé devant mon ordi avec un vrai clavier plutôt que vautré dans mon fauteuil et ripant des doigts toujours trop gros sur l'écran ma tablette, je peux te présenter mes plus plates excuses pour avoir écorché ce joli prénom...
Justement, j'ai vu hier soir sur ma tablette avec Chrome sous android que les chiffres numérotant les notes de bas de page sont trop décalés vers le haut par rapport à leur rendu avec Firefox sous Windows et trop petits sous IE-11 (toujours sous w7). Du coup je vais virer le...
.bigfoot-footnote__button:after { font-size: 0.5em; top: 5px; }pour ne garder que ça :
.bigfoot-footnote__button:after { content: '['attr(data-footnote-number)']'; }qui me plaît bien...
Quoiqu'il en soit, nous ne sommes pas à l'abri d'autres chamboulements graphiques plus ou moins élégants. Et le risque est fort que ce billet soit obsolète très rapidement. Ce qui me plaît surtout dans "bigfoot" c'est le fait d'afficher la note au niveau du "renvoi vers".
Le reste n'est que cosmétique. Avec un "c" comme dans Franck.
4. par mirovinben, le lundi 08 février 2016 à 07h34 commentaire
Bon, après mûres réflexions et compte tenu du fait que les crochets me posent un pb de centrage vertical, je vire complètement...
.bigfoot-footnote__button:after { content: '['attr(data-footnote-number)']'; }Comme quoi, on voit que l'auteur du script utilisé dans bigfoot a fait les bons choix et que je fait preuve d'un certain manque d'humilité.
Voui, je me cause à moi tout seul. C'est un effet de l'âge, probablement.
5. par mirovinben, le samedi 28 novembre 2020 à 05h31 commentaire
Ayant constaté un bug lié à mon utilisation non conventionnelle du contenu du champ "Notes personnelles" (grâce à une bidouille perso, il peut être rendu visible selon mes besoins, notamment dans le cadre des billets "Mé késkeu cé ?" via le lien "La solution de l'énigme...") et étant dans l'incapacité de le résoudre, j'ai pris la décision "douloureuse" de désactiver à partir de ce jour et pour une durée indéterminée cette extension très sympa.
6. par mirovinben, le dimanche 29 novembre 2020 à 04h51 commentaire
Oh, et puis non, tant pis pour les rares billets contenant à la fois des notes renvoyant en bas de page et l'affichage du champ "normalement invisible". Je réactive le plugin "bigfoot".
Avec des points de suspension plutôt que de numéros croissants (à partir de ce jour et pour une durée indéterminée, bien sûr.
)