Transparenter Header auf Passwortseite

[Mythik]

Hallo zusammen,

ich bin aktuell dabei meine Passwortseite zu gestalten. Ich möchte, dass das Bild auf dem Screenshot über die ganze Seite geht. Der weiße Balken oben vom Header soll verschwinden. 

Den Footer habe ich bereits erfolgreich mittels css (display: none;) ausgeblendet. Jedoch kann ich das bei dem Header nicht machen, da sonst mein Logo und der Link für den Login in den Shop weg wäre. 

Gibt es eine Möglichkeit mittels css den Header auszublenden, beziehungsweise das Bild von unten über den Header laufen zu lassen? 

Ich nutze derzeit die Version 11.0 des Dawn Themes. 

Vielen Dank im Voraus. 

Beste Grüße

[Gabe]

Hey @Mythik 

Hast du das lösen können? Du könntest versuchen, die CSS-Eigenschaft z-index zu verwenden, um das Bild über den Header zu legen. Elemente mit einem höheren z-index werden über Elementen mit einem niedrigeren z-index dargestellt. Dann dem Bild einen höheren z-index als dem Header geben ¯\_(ツ)_/¯.

Beispiel:

.image-class {
  position: relative;  /* oder absolute, je nach Bedarf */
  z-index: 2;
}

.header-class {
  z-index: 1;
}

Oder den Header transparent machen, indem du die CSS-Eigenschaft background-color auf transparent setzt:

.header-class {
  background-color: transparent;
}

Beachte, dass .header-class und .image-class durch die tatsächlichen Klassennamen im Code ersetzt werden müssen, den du in der Chrome Developer Console (Rechtsklick -> Inspect) einsehen kannst.

Hoffe das hilft dir weiter. Bei Bedarf kann ich gerne einen Experten empfehlen der oder die dir helfen kann. 😉

[Mythik]

@Gabe Hey, vielen Dank für die Antwort. Das mit der transparenten Hintergrundfarbe habe ich bereits versucht gehabt. Jedoch ohne Erfolg. Auch mit dem "z-index" funktioniert es leider nicht, da das Bild nicht über die Grenze des Headers geht. Ich habe die Höhe des Banners auch auf 100% eingestellt, also sollte es ja eigentlich funktionieren. 😕

[AnnaBe · Accepted solution]

Hi @Mythik , du könntest das Bild mit einer negativen Margin über den Header legen, LG

[Gabe]

@Mythik 

Das hört sich danach an, als ob der Container, der das Bild enthält, auf die Höhe des Headers beschränkt ist. Möglicherweise kann man das überwinden, indem man die CSS-Eigenschaft overflow des Containers auf visible setzen. Hier ist ein Beispiel:

.container-class {
  overflow: visible;
}

Dennoch, es könnte komplizierter sein, abhängig von der spezifischen Struktur und Stil des Codes. Es könnte auch sein, dass einige andere Stile oder Skripte, die auf den Header oder das Bild angewendet werden, Probleme verursachen.

Auch eine andere Lösung könnte darin bestehen, das Bild direkt im Header zu platzieren und dessen Größe und Position so einzustellen, dass es den gesamten Bildschirm bedeckt. Hier ist ein Beispiel:

.header-class {
  position: relative;
}

.image-class {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

Dies setzt das Bild auf die gesamte Größe des Viewports, unabhängig von seiner Position im DOM. Beachte auch, dass dies auch dein Logo und Login-Link beeinflussen kann, und du müsstest deren Position und z-index entsprechend anpassen.

Wie @AnnaBe sagt, es ist auch möglich, die CSS-Eigenschaft margin-top mit einem negativen Wert zu verwenden, um das Bild nach oben zu verschieben und so über den Header zu legen. Allerdings hängt das davon ab, wie der Rest der Seite strukturiert ist, und es könnte unerwünschte Seiteneffekte haben. Hier ist ein Beispiel:

.image-class {
  margin-top: -50px; /* oder ein anderer negativer Wert, je nach Bedarf */
}

Stelle sicher, dass das Bild und der Header dieselben Parents im DOM haben. Beachte auch, dass der margin-top Wert eventuell angepasst werden muss, abhängig von der genauen Höhe des Headers.

[Mythik]

@Gabe Kann es sein, dass man in den Feldern für die benutzerdefinierten CSS Codes im Theme Editor nicht bei allen Feldern die Tags für die Bildschirmgrößen einfügen kann? Da man ja nicht wirklich etwas in den Code-Dokumenten, sondern besser in diesen Feldern im Theme Editor ändern soll, damit man das Theme auch weiterhin updaten kann, schreibe ich nun alle Anpassungen immer in diese Felder. 

Es geht beispielsweise um diesen Tag: @media screen and (min-width: 750px)

In dem CSS-Feld bei dem Abschnitt "Vorgestellte Kategorie" habe ich diesen obigen Tag bereits benutzt. Auf der Passwortseite und im Footer kann ich diese Tags nicht benutzen. Es fühlt sich eher wie Glück an, ob ich diese Tags in den Feldern für die benutzerdefinierte CSS verwenden kann.

Weißt du da etwas und könntest du das vielleicht in einem Test Store mit dem Dawn-Theme rekonstruieren? Dass ich diese Tags nicht richtig verwenden kann, behindert die Arbeit nämlich erheblich. Wenn ich diese Tags direkt im Code für genau das gleiche Dokument eintrage, funktioniert es problemlos. Wenn ich diesen Tag bspw. in das Feld für die benutzerdefinierte CSS im Theme Editor beim Banner auf der Passwortseite eintrage, kommt wenn ich auf Speichern klicke folgende Meldung: "Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden."

Ist da etwas bei euch über diesen Fehler bekannt?

Vielen Dank im Voraus.

[Gabe]

Hey @Mythik 

in den CSS Theme Editor Eingabefelder gibt es derzeit beschränkungen, wie man in unserer Anleitung hier lesen kann:

Ein paar generelle Tipps zum Problem:

• Stelle sicher, dass die Media Query korrekt formatiert ist. Jeder Syntaxfehler könnte zu einem Fehler beim Speichern führen.
• Überprüfe, ob es zusätzliche benutzerdefinierte CSS-Regeln in dem benutzerdefinierten CSS-Feld gibt, die den Fehler verursachen könnten. Manchmal kann ein Fehler in einer anderen Regel das Speichern des gesamten benutzerdefinierten CSS-Felds verhindern.
• Versuche, die Änderungen in einem Texteditor vorzunehmen und dann in das benutzerdefinierte CSS-Feld zu kopieren. Das kann helfen, sicherzustellen, dass keine zusätzlichen Zeichen oder Leerzeichen eingefügt werden.
• Wenn du immer noch Probleme hast, könnte es hilfreich sein, sich an den Shopify-Support zu wenden. Sie könnten in der Lage sein, spezifische Informationen über deinen Store und die verwendeten Themes zu überprüfen.

Anonsten wäre, wie gesagt, ein Experte der besten Ansprechpartner! 😉

[Mythik]

@Gabe Vielen Dank für die Aufklärung. Da das Banner auf der Passwortseite und der Footer im Store ja nicht auf Abschnittsebene funktionieren, wird es wohl daran liegen. Dann muss ich das wohl doch direkt in den Code Dokumenten ändern. 

@AnnaBe Vielen Dank für den Tipp mit der negativen Margin. Ich habe es nun angewandt und es hat super funktioniert. Vielen Dank.

[AnnaBe]

@Mythik das freut mich 🙂