Theme Dawn mehrere Hintergrundfarben

[xWaydi]

Hallo zusammen,

kann man im Theme Dawn mehrere Hintergrundfarben einrichten, sodass ich für jeden hinzugefügten Abschnitt eine eigene Hintergrundfarbe vergeben kann?

VG
xWaydi

[Finer · Accepted solution]

@xWaydi ja das ist möglich. Es erfordert jedoch HTML, Liquid und CSS Kenntnisse.

Der schnelle weg, ist einfach die ID des Abschnitts auszulesen und dieser per CSS eine Hintergrundfarbe zuordnen.

Hier ein Beispiel, wie das in der CSS-Datei aussehen könnte:

#[Abschnitts-ID] {background-color:#000;}

 Das kann man entweder in der base.css oder in einer entsprechenden CSS-Datei eines Abschnitts einfügen. Der Nachteil ist, dass sobald du den Abschnitt entfernst und erneut reinsetzt, ändert sich auch die ID. Daher müsstest du das jedes Mal im Code erneut anpassen.

Die alternative dazu wäre in jedem Abschnitt dem ersten Container ein Style-Attribut zuzuweisen und hierin die Hintergrundfarbe als Variable einzusetzen, welche du über das Schema des Abschnitts definieren kannst. Dadruch kannst du die Farbe im Theme-Editor definieren. Das ist aber von der Erläuterung etwas umfangreicher und muss bei jedem Abschnitt eingefügt werden. 

Hier ein Beispiel, wie das Attribut im Container gesetzt werden könnte:

<section id="123456789" style="background-color:{{ section.settings.background-color }};">
[...]
</section>

Ich hoffe, das hilft dir weiter.

[Finer · Accepted solution]

@xWaydi ja das ist möglich. Es erfordert jedoch HTML, Liquid und CSS Kenntnisse.

Der schnelle weg, ist einfach die ID des Abschnitts auszulesen und dieser per CSS eine Hintergrundfarbe zuordnen.

Hier ein Beispiel, wie das in der CSS-Datei aussehen könnte:

#[Abschnitts-ID] {background-color:#000;}

 Das kann man entweder in der base.css oder in einer entsprechenden CSS-Datei eines Abschnitts einfügen. Der Nachteil ist, dass sobald du den Abschnitt entfernst und erneut reinsetzt, ändert sich auch die ID. Daher müsstest du das jedes Mal im Code erneut anpassen.

Die alternative dazu wäre in jedem Abschnitt dem ersten Container ein Style-Attribut zuzuweisen und hierin die Hintergrundfarbe als Variable einzusetzen, welche du über das Schema des Abschnitts definieren kannst. Dadruch kannst du die Farbe im Theme-Editor definieren. Das ist aber von der Erläuterung etwas umfangreicher und muss bei jedem Abschnitt eingefügt werden. 

Hier ein Beispiel, wie das Attribut im Container gesetzt werden könnte:

<section id="123456789" style="background-color:{{ section.settings.background-color }};">
[...]
</section>

Ich hoffe, das hilft dir weiter.

[xWaydi]

@Finer vielen Dank für deine Antwort.

Soweit erstmal gut das es möglich ist, leider sind bei mir kaum HTML usw. Kenntnisse vorhanden.

Ich denke als Laie kann ich nur mehr kaputt als richtig machen.

VG

xWaydi

[Finer · Accepted solution]

@xWaydi du kannst natürlich in einer Sicherheitskopie deines Themes mit dem Code herumspielen und ein paar Sachen ausprobieren, ohne dass es das live Theme beeinflusst. Allerdings sind Code-Kenntnisse definitiv von Vorteil. 

Fall du Unterstützung benötigst, kannst du jederzeit eine Ausschreibung von Shopify Experts erstellen. Hier der Link dazu: https://experts.shopify.com/