eigene Farbe mit Transparenz

[Tina17]

Hey Leute!

bräuchte mal bitte eure Expertise.
Baue gerade meinen Shop auf. Die Farbe mit Hex: #C9DFBE 'knallt' mir aber einfach zu viel.
Auf der Suche nach einer Transparenz bin ich bis zum settings_schema.json gekommen.
Aber da bin ich jetzt leider raus.

Kann mir jemand kurz und knackig sagen wie ich sowas umsetzen kann ?
Hätte gerne ein paar Farben und einige Transparenzen dazu, wie zb.: die #C9DFBE mit 80,60,30 % oder sowas. Wenn ich einmal verstanden habe wie das geht kann ich das (hoffentlich) nachbauen.

Benutze das Theme Impact falls das wichtig ist.

Vielen Dank!!

[Gabe · Accepted solution]

Hey @Tina17 

Danke für die Frage und hast du vielleicht ein Beispiel das den Sachverhalt etwas näher veranschaulicht was du erreichen möchtest? Das würde uns helfen das Problem etwas mehr einzugrenzen denn das ist im Grunde ein sehr Breites Thema mit dem transparenten Hintergrund und dem settings_schema.json. Wie du ja weisst, so etwas immer zuerst in einer Themekopie/Testumgebung testen und Ä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. 

Du kannst auch den neuen CSS-Editor verwenden und die RGBA-Farbcodierung verwenden, wie z. B. die Farbe #C9DFBE in RGBA umwandeln und den Alphakanal für die Transparenz anpassen. Hier eine Umrechnung der Farbe (#C9DFBE) in RGBA:

• Zerlege den Hex-Code in die RGB-Komponenten: R: C9 (201) G: DF (223) B: BE (190)
• Füge den Alphawert (A) hinzu - der Alphawert liegt zwischen 0 und 1, wobei 0 vollständig transparent und 1 vollständig opak ist. Für 80%, 60% und 30% Transparenz verwende 0,8, 0,6 bzw. 0,3 als Alphawerte.

Nun haben wir drei RGBA-Farbcodes mit unterschiedlicher Transparenz:

• 80% Transparenz: rgba(201, 223, 190, 0.8)
• 60% Transparenz: rgba(201, 223, 190, 0.6)
• 30% Transparenz: rgba(201, 223, 190, 0.3)

Gehe zum CSS-Editor und verwende ihn um den Farbcode des Elements oder der Klasse in den gewünschten RGBA-Farbwert zu ändern. Zum Beispiel:

.example-class {
  background-color: rgba(201, 223, 190, 0.8); /* 80% Transparenz */
}

Ersetze "Example class" mit der Class die du ändern möchtest. Diese findest du wenn du einen Rechtsklick an der genauen Stelle im Storefront machts -> "Inspect", und in der Developer Console die genauen Class suchst und findest.

Das schöne am CSS Editor ist dass du damit rumspielen kannst bis es klappt. 😉

[Tina17]

@Gabe du bist der Beste!!! 🫡
Wann war nochmal die Nominierung für den besten Supporter des Jahres? Muss für dich voten!
Falls du irgendwann zu einem anderen Shopanbieter gehst - sag Bescheid ich komme mit 😎

Wiedermal hast du mir superschnell und exakt geholfen.
Poste dennoch was du angefragt hast - vielleicht hilft es ja jemanden.


Anbei der Screenshot:

Das was man dort in grün sieht - wollte ich ein wenig transparenter machen - damit es "feiner" aussieht.
Rechts im Bild unter "benutzerdefiniertes CSS" habe ich den Code von Gabe hinzugefügt und angepasst. In meinem Fall von dem Element ".media-with-text__content"

Sieht super aus vielen Dank nochmal !!

[Gabe]

Hey Tina! @Tina17 

Wow das ist Musik in meinen Ohren dass das geklappt hat und danke dir vielmals für die netten Worte! Sieht echt super aus!