Wie ich einen Pfeil bewegt habe

Nachdem ich die Übertragung dieser Website auf die neue Theme-Version abgeschlossen hatte, da eine einfache Aktualisierung nicht möglich war, habe ich meine Freunde gebeten, einen Blick darauf zu werfen und ihnen alles zu zeigen, was daran nicht stimmt. Eines der Probleme, die ich nicht sofort beheben konnte, war die Position eines Scroll-nach-oben-Pfeils hinter der Schaltfläche „Mit uns chatten“. In meinem Theme gibt es keine Einstellungen für diese Elementposition, sondern nur Ein-/Aus-Optionen.

Ich habe vergeblich versucht, dieses Element in meinem Theme-Code zu finden, also fragte ich meinen Bruder, einen Java-Entwickler mit mehr als 10 Jahren Erfahrung, wo es sein sollte. Er leitete mich zu ASSETS weiter, wo ich default.css.liquid fand. Da ich diesen Pfeil nicht finden konnte, holte ich mir einen anderen Rat. Es stellt sich heraus, dass Sie Ihren Browser bitten können, Sie auf „Dinge“ hinzuweisen. Rechtsklick – Inspizieren = es zeigt Ihnen den Code des Elements.

Finden Sie den Code der Pfeilschaltfläche für das Website-Element

Hier ist es:

#site-scroll { color:#fff; Zeilenhöhe:33px; Cursor: Zeiger; Schriftgröße: 20px; Höhe: 35px; rechts:20px; Position:fest; Randradius:50%; Textausrichtung: Mitte; Übergang: alle 0,3 s erleichtern 0 s; Breite: 35px;
unten:40px; Z-Index:444; Anzeige:keine; Hintergrund: {{ settings.scroll_icon_colors}} ; }

Dann musste ich nur noch 20 Pixel auf 50 % ändern und mein Pfeil ging in die Mitte der Seite. Mir wurde auch empfohlen, transform: translatorX(50%);  Die Positionierung des Pfeils würde also auf seinen Galopp ausgerichtet sein, nicht auf die rechte Seite.

Scrollen Sie zur oberen Schaltfläche

Ich kann stolz sagen, dass ich jetzt ein sehr schlechter Entwickler bin :)

PS A hat auch erfahren, dass:

  • Übergang: alle 0,3 s erleichtern 0 s; ist die Zeit, die es dauern sollte, bis der Pfeil verschwindet
  • Z-Index:444; bedeutet die Position des Elements im Stapel anderer Dinge, wie Ebenen in Photoshop oder Teile in CAD.
Und habe ein Video gefunden, das erklärt, wie man eine solche Schaltfläche erstellt .

Hinterlassen Sie einen Kommentar

Bitte beachten Sie, dass Kommentare vor der Veröffentlichung freigegeben werden müssen

Einen Hinweis zu Ihrer Bestellung hinzufügen
Fügen Sie einen Gutschein hinzu
Liquid error (snippets/cart-drawer line 228): product form must be given a product

Suchen Sie auf unserer Seite


Beliebte Suchanfragen: Inquisitor  Achselzucken  Kapuzenpullover  Herrenkleid  Herrenrock  Armstulpen