Liquid, JavaScript, Themes
Hey zusammen. Ich würde gerne bei meiner Passwort Page ein Background Image einfügen.
Habe das schon probiert (Siehe Bild) also ich habe ein Asset hinzugefügt und dann im theme.css:
.password-page {
display: table;
height: 100%;
width: 100%;
color: var(--color-body-text);
background: url("bg.png");
/*background-color: var(--color-body);*/
background-size: cover; }
Jedoch ist das Bild nur im "oberen" Bereich und nicht auf der ganzen Seite. Wie kann ich das denn lösen? (Der Body ist irgendwie nur bis zu hälfte des Screens)
Die password.liquid besteht beim Debut Theme aus 3 Sections:
{% section 'password-header' %}
{% section 'password-content' %}
{% section 'password-footer' %}
Hast du eventuell nur die password-header.liquid angepasst? Bleibst du bei der ursprünglichen Struktur müsstest du die password-content anpassen. Alternativ kannst du dir eine eigene password.liquid basteln.
danke für deine Antwort. Im liquid bei den sections habe ich tatsächlich nichts geändert. Nur unter Assets die theme.css und dort halt die class .password-page
Die ganze HTML Seite geht auch gar nicht bis ganz nach unten.
Verstehe. Schau mal im Code-Editor, dort hat die Password-Seite ein eigenes Layout (/layouts/password.liquid). Wenn du dein Background Image in die Body-Klasse einbaust, sollte es gehen. Bei mir ist das die Klasse "template-password", kann bei dir aber auch anders heißen.
Layout für die Passwort-Seite habe ich, Ja.
Bedeutet ich habe jetzt meinen Klassennamen und kann in Theme.css diese Class mit css stylen.
-> .template-password {
background-image: url("bg.png");
background-size: cover;
}
Jedoch ändert sich immer noch nichts. (Das Bild ist zwar wie davor sichtbar aber eben nur bis zur hälfte des Bildschirms.
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024