Dropdown-Link Farbe ändern: Oxid 6.2.3

[arud]

Hallo,

an welcher Stelle lässt sich bei Dropdown-Link (hover) bei Oxid CE 6.2.3 (Wave) die Farbe “Malibu” #41DDFF ändern?
Die älteren Beiträge zu diesem Thema haben mir leider nicht weitergeholfen.

Freundliche Grüße
arud

[windes]

Hallo arud,
welchen Weg möchtest Du gehen?
Da gibt es den offizielen Weg über das build Verzeichnis und die grunt.js. Da ist die Lernkurve hoch aber man macht es korrekt. Gleichzeitig hat man eine Grundlage und Überblick was geändert wurde, wenn man es dokumentiert.

Dann gibt es noch den kurzen schnellen Weg, man öffnet die style.min.css in einem Editor und sucht nach #41DDFF und ändert diesen nach gusto ab.

Ich setze hier voraus, daß die Änderung in einem Childtheme passiert! Sonst sind die Änderungen nach einem Update futsch!

Steffen Winde

[indianer3c]

@arud

an welcher Stelle lässt sich bei Dropdown-Link (hover) bei OXID CE 6.2.3 (Wave) die Farbe “Malibu” #41DDFF ändern?

Hallo,

ich habe Dir eine E-Mail diesbezüglich geschrieben.

Viele Grüße,
Tim

[marco.steinhaeuser]

oO, @indianer3c… lass uns diese Diskussion gern hier führen

[arud]

Hallo Steffen, hallo Tim,

Danke für die Tipps! Ein WIN-Update macht im Moment größere Probleme. Sobald der PC wieder einigermaßen Rund läuft schau ich mir die Tipps an.

Freundliche Grüße
Udo

[indianer3c]

@marco.steinhaeuser

oO, @indianer3c… lass uns diese Diskussion gern hier führen

Im Prinzip führe ich die sehr guten Anmerkungen von Steffen Winde nur aus um zu verdeutlichen was z.B. mit Grunt https://gruntjs.com/ gemeint ist, dass dies ein Hilfstool um Abläufe zu automatisieren.

Um das Wave Theme als Beispiel zu nennen, dass es eine Konfigurationsdatei https://github.com/OXID-eSales/wave-theme/blob/master/Gruntfile.js für Grunt Tasks gibt und es für das Farbdesign Variablen in einer Konfiguration Datei gibt https://github.com/OXID-eSales/wave-theme/blob/master/build/scss/_variables.scss wo man Farbwerte definieren kann, aber das diese Farbwerte Variablen meist verschachelt und dies sehr in die Tiefe geht… Beispiel Navbar https://github.com/OXID-eSales/wave-theme/blob/master/build/vendor/bootstrap/less/navbar.less

Einen Einstieg in das Thema bildet OXID6 Child-Themes auf Basis von WAVE-Parent erstellen – the real world ab oder auch mein Klassiker der heute noch Gültigkeit besitzt https://bisweb.me/blog/theme-erstellen.html

[indianer3c]

@arud

Danke für die Tipps! Ein WIN-Update macht im Moment größere Probleme. Sobald der PC wieder einigermaßen Rund läuft schau ich mir die Tipps an.

Gerne. Gib einfach kurz Bescheid. Schönes Wochenende

[arud]

Vielen Dank an Steffen Winde und indianer3c!
Die Ratschläge konnten erfolgreich umgesetzt werden!

Der mit dem Tool Farbpipette (Firefox: Web-Entwickler/Farbpipette) erste ermittelte Farbwert „#41ddff“ war nicht der Gesuchte.

Der gesuchte Farbwert für den Hintergrund von dem Dropdown-Menü ist“ #009ec0“!

Wave-Theme, Farbe für „dropdown-item acitve: #009ec0

Um an die Stelle zu navigieren, wo der Wert für die Farbe vom Dropdown-Hintergrund (hover) eingetragen ist, war die Vorgehensweise unter Firefox folgende:

1. Mauszeiger auf FASHION positionieren, dann klappt das Dropdown-Menü auf und jetzt auf
   Hosen & Jeans klicken.
2. Jetzt befindet man sich auf der Seite „HOSEN-JEANS“.
3. Mauszeiger auf FASHION positionieren, dann klappt das Dropdwon-Menü auf und jetzt den Mauszeiger auf HOSEN & JEASN positionieren.
4. Mit der rechten Maustaste das Kontextmenü einblenden.
5. Auf der Tastatur „Q“ drücken.
6. Auf „Element untersuchen“ wird die Zeile <a class=“dropdown …“ hervorgehoben.
7. Mit der linken Maus-Taste die Zeile darüber „<li class=“dropdown-item active“>“ anklicken.
8. Mittig von „Elemente untersuchen“ unter Inline kann jetzt unter „.dropdown-item:focus, .header .navbar .nav-item .dropdown-item:hover“ background-color die voreingestellte Farbe #009c0 auf
   die gewünschte Farbe angepasst werden indem man die Datei styles.min.css öffnet und an die entsprechende Stelle navigiert.
9. Nach einem Update geht die neue Einstellung verloren!
10. Deshalb sollte ein Child-Theme angelegt werden um hier die Änderungen vorzunehmen.
11. In styles.min.css wurde nach allen Stellen (Anzahl: 46) mit dem Farb-Wert „#009ec0“ gesucht, diese dann kopiert und in das Child-Theme eingefügt. „#009ec0“ wurde dann durch „#meineFarbe“ ersetzt.
    Ausnahme (2 von 46 gefundenen Stellen) in meinem Projekt:
    .header .navbar .nav-item .dropdown-link
    .header .navbar .nav-link

Tipp: JPEG-Datei: Text der nicht für die Veröffentlichung vorgesehen ist wurde verwischt. Zur Kontrolle wurde die JPG-Datei ins OneNote kopiert um mit dem Kontextmenü “Text aus Bild kopieren” den Text herauszufiltern um diesen dann noch mal zu überprüfen.

Freundliche Grüße
Udo