- montrer votre position dans la page
- remonter au début de la page
Elle est basée sur un script de Ivan Grozdic adapté pour UP
{up gotop}- gotop: texte ou caractère unicode pour la flèche. ex \25b2, \21ea ou top
- circle-bgcolor: couleur de fond du cercle
- circle-color: couleur de la bordure du cercle
- circle-color-active: couleur de la bordure pour la partie activé
- icon-color: couleur pour l'icone ou le texte
- icon-color-hover: couleur pour l'icone ou le texte lors du survol
Divers
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
Ce site en exemple
Comme il est impossible d'utiliser plusieurs fois cette action sur une page, observez le rendu dans cet article.
Pour le mettre en œuvre sur toutes les pages, j'ai ajouté ce shortcode dans un module personnalisé en position debug.
{up gotop| circle-color-active=#369 | icon-color=#369 | icon-color-hover=#369A}J'ai modifié les couleurs pour être en accord avec ce site.
Je vous laisse découvrir les autres options dans le petit bandeau bleu en haut de cette démo.
Quelques variations de style
{up gotop}Par défaut, nous avons une palette de gris
{up gotop=TOP
| circle-color-active=#F00
| icon-color=#F00
| icon-color-hover=#F00A
| css-head=.progress-wrap::after[font-size:20px;font-weight:bold;]}L'argument principal est le texte affiché au centre du cercle.
Les 3 options suivantes définissent les couleurs. Notez l'ajout d'une transparence par #F00A ou #FF0000AA dans sa version longue
css-head permet d'ajuster la taille et la graisse du texte
{up gotop=\27a7
| css-head=.progress-wrap::after[
font-size:40px; font-weight:bold;
transform:rotate(-90deg);
left: -2px; top: 0px;
]}Ici, j'utilise un caractère Unicode qui est une flèche qui pointe vers la droite. ➧
Je vais donc le tourner vers le haut avec l'option css-head. J'en profite pour ajuster sa taille et sa position.
A vous de déterminer les bonnes valeurs avec l'inspecteur de code de votre navigateur.
box (1) listup (1) upactionslist (1) flexbox (1) icon (1) jcontent-info (1)