DAWN Theme: (Sortieren nach...) Drop Down Menü bearbeiten

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo zusammen,

Ich nutze das Dawn Theme und habe mich für einen Dunklen Hintergrund entschieden.
Da der Shop in einem Anthrazit Farbton ist, muss ich eine weiße Schrift nutzen.

Wenn man auf alle Produkte geht und diese Sortieren möchte, kann man leider nicht alle Optionen sehen, da das Drop-Down Menü ebenfalls mit weißem Hintergrund ist. (Siehe Bild)

Sortieren.PNG
Sortieren.PNG1769×248 17.5 KB

Meine Frage:
Wie kann ich die Hintergrundfarbe des Drop-Down Menüs bearbeiten?
Leider gibt es dafür keine möglichkeit im Theme.

Vielen Dank, Marco

2

@Werkszustand kannst du uns einen Link zu deinem Shop zur Verfügung stellen? Dann kann man sich das genauer anschauen.

3

Klar:
https://gamer-base.com

Dann einfach Oben im Header auf Katalog und dann Sortieren.

Danke :slightly_smiling_face:

4

Bei mir wird das korrekt ausgegeben…

Bildschirmfoto 2022-06-14 um 09.40.54.png
Bildschirmfoto 2022-06-14 um 09.40.54.png720×446 66.5 KB

Hast du mal einen anderen Browser ausprobiert?

5

Komisch. Bei mir ist es bei Chrome und edge in weiß.
Was kann man da machen?

6

@Werkszustand in welchem Design hast du gerade Chrome eingerichtet (ggf. Dark)?

7

Nein, normaler Design-Modus.

8

Ich kann das auf meinem Chrome reproduzieren:

sdf (2).gif

9

Danke Gabe.
Die Frage ist, wie lösen wir das?

10

Da das ein Shopify Theme ist kann unser Theme Team das anschauen als Teil deines 60-Min Design Time. Sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Bitte alle Screenshots und Reproduzierungen in diesem Leitfaden mit in der E-Mail beifügen per copy & paste.

11

@Werkszustand du könntest mal folgenden Code in die base.css Datei einsetzen.

.facet-filters__sort {
  background:#000!important;
  font-color:#FFFFFF!important;
}

In Mozilla Firefox sehe ich auch das Problem.

12

@Finer

Dein Code Snippet habe ich jetzt in meiner Dawn Testumgebung getestet und es scheint zu funzen! Hut ab!.. :wink:

13

Habe es jetzt ans Ende gesetzt aber sehe keinen Unterschied.
Habe ich etwas falsch gemacht?

}
}

.product-grid .grid__item {
padding-bottom: var(–grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
.product-grid .grid__item {
padding-bottom: var(–grid-desktop-vertical-spacing);
}
.facet-filters__sort {
background:#000!important;
font-color:#FFFFFF!important;
}
}
}

14

Ja, du hast die CSS-Klassen in einen Media Query eingebaut.

Der folgende Teil gehört ganz an das Ende und sollte nicht innerhalb einer geschwungenen Klammer platziert werden.

.facet-filters__sort {
background:#000000!important;
font-color:#FFFFFF!important;
}
15

Ja nicht innerhalb der Klammern sondern unterhalb und ausserhalb der letzten Klammern auf der allerletzten Zeile

16

Jetzt funktioniert es! Danke :slightly_smiling_face:

17

Hi Werkszustand,

es freut mich zu hören, dass du deinen Shopify Shop wie gewollte anpassen konntest.

Da du dich gerade mit der Optimierung deines Shops beschäftigst, dachte ich, kannst du bestimmt auch von diesen Tipps hier profitieren.

Womit bist du momentan sonst noch beschäftigt in deinem Shop?

18

Vielen Dank. Aktuell nur mit Kleinigkeiten.