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.
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.
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.
-
Veröffentlicht in
website
