Hallo zusammen,
ich habe gestern bereits eine ähnliche Diskussion erstellt, diese war allerdings nicht detailliert, sodass ich diese eröffnet habe. Ich persönlich bin Anfänger und freue mich über jede Unterstützung!
Zur Zeit benutze ich das Dawn Theme, wobei ich gerne den Header auf meiner Startseite transparent gestalten würde, sodass ein Bild durchscheinen kann. Die Ankündigungsleiste (gratis Versand, etc) soll dennoch in schwarz gehalten sein. Beim Scrollen nach unten soll der Header von transparent zu weiß wechseln, wobei die Icons in schwraz gehalten sollen. Die Ankündigungsleiste soll beim Scrollen nicht über dem Header stehen und soll nur auf der Startseite beim Eintreten auf die Website ersichtlich sein.
Das Bild auf der Startseite soll über den ganzen Screen bei Desktop und Smartphone gehen.
(Hier ein Beispiel, wie es aussehen soll: https://www.6pmseason.com/) Hierbei fehlt allerdings die nötige Ankündigungsleiste, ebenso handelt es sich um ein Video und nicht um ein Bild.
Bei meiner Recherche bin ich darauf gestoßen, dass man benutzerdefinierte CSS nutzen sollte, damit das Theme geupdatet werden kann, wenn ich den Code des Dawn Theme direkt bearbeite, kann dann das Theme trotzdem geupdated werden? Anderenfalls, wo müssen die benutzerdefinierten CSS eingefügt bzw. aktiviert werden?
(https://help.shopify.com/de/manual/online-store/themes/theme-structure/extend/add-css)
Nun bin ich bereits auf mehrere Techniken gestoßen, wie man den Header transparent machen kann.
Option 1: https://www.youtube.com/watch?v=izoPqk4zsLs
CSS Code wird bei theme.liquid über/body eingefügt
{% if template == 'index' %}
<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>
{% endif %}
Problem: Bild ist nicht auf dem kompletten Screen, ebenso ist die Ankündigungsleiste nicht schwarz sondern auch als Hintergrund das Bild (https://community.shopify.com/c/shopify-design/hintergrundbild-dawn-theme/td-p/2512506?lightbox-mess...)
Eine andere Methode hatte @AnnaBe
https://community.shopify.com/c/shopify-design/header-in-dawn-10/td-p/2114928
Hiebei fehlen mir als Anfänger leider die Schritte, obwohl es sehr gut dargestellt ist.
Kann bei diesen Schritten das Theme trotzdem geupdated werden?
Bzgl. den Updates meinte @Gabe
"Hey @72names
Vielleicht findest du diesen Leitfaden auch hilfreich bzgl. Transparenten HG! Es ist zu empfehlen jeglichen CSS über den CSS Editor einzubauen so dass dein Theme nicht die Theme Updates verliert.
VG,"
Kann mir jemand helfen, alle Schritte aufzuzählen, denen ich folgen muss?
Wie bereits geschrieben, soll das Theme weiterhin updates durchnehmen können.
1. Hierbei bräuchte ich eine Anleitung zum erstellen von benutzerdefinierten CSS.
2. Eine Anleitung, damit das Bild auf voller Desktop- und Mobilgröße ist (siehe www.6pmseason.com)
3. Ebenso bräuchte ich eine Anleitung, dass der Header bei der Startseite transparent bleibt, die Ankündigungsleiste in schwarz gehalten wird (www.6pmseason.com)
Beim Scrollen soll die Ankündigungsleiste in schwarz da bleiben, ebenso soll der vorhin transparente Header zu weiß mit schwarzen Icons wechseln und beim Scrollen ebenso mitgehen.(siehe www.6pmseason.com)
Ich danke euch schonmal!
Eine schöne Woche
Thomas
