website

Comment j'ai déplacé une flèche

Après avoir fini de transférer ce site Web sur la nouvelle version du thème, car la simple mise à jour n'était pas possible, j'ai demandé à mes amis d'y jeter un coup d'œil et de signaler tout ce qui ne va pas. L'un des problèmes que je n'ai pas pu résoudre tout de suite était la position de la flèche de défilement vers le haut derrière le bouton de chat avec nous. Dans mon thème, il n'y a pas de paramètres liés à la position de cet élément, uniquement des options d'activation/désactivation.

J'ai essayé de trouver cet élément dans mon code de thème en vain alors j'ai demandé à mon frère, développeur java avec plus de 10 ans d'expérience, où devrait-il être. Il m'a redirigé vers ASSETS, là j'ai localisé default.css.liquid. Là, je n'ai pas pu localiser cette flèche, alors je suis allé chercher un autre conseil. Il s'avère que vous pouvez demander à votre navigateur de vous signaler des "choses". Clic droit - inspecter = il vous montre le code de l'élément.

trouver le code du bouton fléché de l'élément du site Web

C'est ici:

#site-scroll { color:#fff; hauteur de ligne : 33 px ; curseur : pointeur ; taille de police : 20 px ; hauteur : 35px ; droite : 20px ; position:fixe ; rayon de bordure : 50 % ; aligner le texte : centrer ; transition : toutes les 0,3 s atténuent les 0 s ; largeur : 35 pixels ;
bas : 40px ; indice z : 444 ; affichage : aucun ; arrière-plan : {{ settings.scroll_icon_colors}} ; }

Ensuite, il ne me restait plus qu'à changer 20px à 50% et ma flèche est allée au milieu de la page. On m'a également conseillé d'ajouter transform: translateX(50%);  de sorte que le positionnement de la flèche serait au galop, pas du côté droit.

faites défiler jusqu'au bouton du haut

Je peux fièrement dire que je suis un très mauvais développeur maintenant :)

PS A a également appris que :

  • transition : toutes les 0,3 s atténuent les 0 s ; est le temps qu'il faut pour que la flèche disparaisse
  • indice z : 444 ; signifie la position de l'élément dans la pile d'autres choses, comme les calques dans Photoshop ou les pièces dans CAD.
Et trouvé une vidéo qui vous explique comment créer un tel bouton .

Laissez un commentaire

Veuillez noter que les commentaires doivent être approvés avant d'être affichés

Ajouter une note à votre commande
Add A Coupon

Effectuez une recherche