Shopify themes, liquid, logos, and UX
Hallo. Aktuell kann man im Dawn Theme nur eine Farbe für Text und Überschrift eingeben. Ich möchte aber ein eigenes Eingabefeld haben für die Überschrift in jedem Color-Schema. Das ist mir auch gelungen mit folgendem Code:
Ich habe in der settings_schema.json folgendes hinzugefügt:
{ "type": "color", "id": "heading_color", "label": "Farbe der Überschrift", "default": #000000;}
Das hat auch funktioniert. Ich habe nun ein zusätzliches Eingabefeld für die Farbe der Überschrift.
Danach habe ich in der base.css die Variable geändert von:
color-foreground auf heading-color.
Siehe Screenshot.
Leider übernimmt er die Farbe aber nicht. Was fehlt hier noch? Danke für eure Unterstützung.
Solved! Go to the solution
This is an accepted solution.
Ich konnte es nun lösen.
Schritt 1) Das Eingabefeld im Frontend hinzufügen
dazu musst du
in der settings_schema.json folgende Code hinzufügen
{
"type": "color",
"id": "heading_color",
"label": "Überschrift H1-H6",
"default": "#000000"
},
danach sieht es so aus: Backend sowie Frontend
Schritt 2: in der theme.liquid musst folgende Codezeile hinzufügen, damit du den Wert in einer Variable abspeicherst.
--color-heading: {{ scheme.settings.heading_color.red }}, {{ scheme.settings.heading_color.green }}, {{ scheme.settings.heading_color.blue }};
Schritt 3: Den Wert musst du ins :root statt der Textfarbe verwenden. Du musst --color-foreground mit --color-heading tauschen.
color: rgb(var(--color-heading)); /*rgb(var(--color-foreground));*/
Danach klappt es.
Die Überschriften H1-H6 haben nun eine eigene Farbe
@Roland in der theme.liquid Datei musst du die Variable --heading-color den Wert zuweisen, welchen du in der settings_schema zugeordnet hast.
Du solltest ab Zeile 98 (ab :root) sehen, wie diese Variablen zugeordnet werden.
ich habe die Zeile in der theme.liquid hinzugefügt. Funktioniert aber leider weiterhin nicht.
This is an accepted solution.
Ich konnte es nun lösen.
Schritt 1) Das Eingabefeld im Frontend hinzufügen
dazu musst du
in der settings_schema.json folgende Code hinzufügen
{
"type": "color",
"id": "heading_color",
"label": "Überschrift H1-H6",
"default": "#000000"
},
danach sieht es so aus: Backend sowie Frontend
Schritt 2: in der theme.liquid musst folgende Codezeile hinzufügen, damit du den Wert in einer Variable abspeicherst.
--color-heading: {{ scheme.settings.heading_color.red }}, {{ scheme.settings.heading_color.green }}, {{ scheme.settings.heading_color.blue }};
Schritt 3: Den Wert musst du ins :root statt der Textfarbe verwenden. Du musst --color-foreground mit --color-heading tauschen.
color: rgb(var(--color-heading)); /*rgb(var(--color-foreground));*/
Danach klappt es.
Die Überschriften H1-H6 haben nun eine eigene Farbe
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024