Bei "Seiten" und "Produkt" Hintergrund und Schriftfarbe ändern

[Modog74]

Spoiler

Hallo,

ich erstelle mir gerade ein Shop mit dem Thema ORIGIN. Ich habe mir Seiten erstellt wie z. B. "Über uns" oder "Karriere". Als Header Hintergrundfarbe habe ich Braun mit orangener Schrift gewählt. Die geöffnete Seite (Über Uns) möchte ich aber in Weiß haben. Allerdings scheint aber irgendwie an den Header Hintergrund gekoppelt zu sein 😕

Das selbe Problem habe ich auch bei Produktseite. Ich habe nichts gefunden, wo ich das Schema ändern kann...

Kann man es auch irgendwie einzeln einstellen?

[Gabe]

Hey @Modog74 

Ein tolles Theme - gute Wahl! Hast du mit unserem Support sprechen können da das ein Shopify Theme ist? Du bekommst mit unseren Themes 60-Min Design Time. Ob das mit in der Designrichtlinie ist kannst du hier einsehen. 

Da das Origin auf der Struktur des Dawn Theme gebaut ist, gibt es Einstellungen, die über dem Theme Editor ganz einfach eingestellt werden können. Dort kannst du Farben und Layouts anpassen. Überprüfe diese Einstellungen und schaue, ob es eine Option gibt, die Hintergrundfarbe der Header oder Seiten individuell anzupassen.

Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Wenn du über Kenntnisse in CSS verfügst, kannst du versuchen, die Farben direkt im Stylesheet zu ändern. Du müsstest zuerst den entsprechenden CSS-Selektor für den Header oder die Seite finden und dann die background-color-Eigenschaft entsprechend ändern.

Hier ist ein Beispiel für eine CSS-Regel, die du verwenden könntest:

.header {
  background-color: brown;
}

.page-ueber-uns {
  background-color: white;
}

Du müsstest die spezifischen Klassen- oder ID-Namen in deinem Theme herausfinden und entsprechend anpassen. Siehe wie du das mit der Chrome Developer Console machen kannst in meiner kurzen Demo hier:

[Modog74]

Hallo Gabe,

ich habe es bereits herausgefunden und über den CSS ändern können 🙂

Nun möchte ich auch noch die Farbe der Varianten Buttons und deren Schriftfarbe ändern. Könntest Du mir die dazugehörige CSS Sätze verraten?

Es soll so aussehen:

Vielen Dank! 🙂

[Gabe]

Hey @Modog74 

Wenn die Farben der Optionen Buttons nicht über den Theme-einstellungen einstellbar sind dann müsstet du zuerst die Classes oder IDs, die speziell für diese Buttons verwendet werden und ausfindig machen über die Chrome Developer Console (Rechtsklick -> "Inspect").

Hier ist ein Beispiel, wie du die Hintergrundfarbe und Schriftfarbe eines Buttons ändern könntest:

.variant-button {
  background-color: #F58C42; /* Oder eine andere Farbe für den Button */
  color: #FFFFFF; /* Weiß für die Schrift */
}

Bitte beachte, dass du die oben genannten Klassennamen wie .header, .product-page, oder .variant-button entsprechend den tatsächlichen Klassennamen oder IDs in deinem HTML anpassen musst.

Es könnte auch sein, dass du bestehende Stile überschreiben musst, wenn Shopify eigene CSS-Regeln verwendet. In diesem Fall könnte die Verwendung von !important hilfreich sein, obwohl dies eher als letztes Mittel betrachtet werden sollte:

.variant-button {
  background-color: #F58C42 !important;
  color: #FFFFFF !important;
}

Hoffe das hilft dir weiter! Bei weiteren Fragen bitte einen Experten konsultieren. 😉