Ich habe ein Affiliate Partnerprogramm Modul installiert. Dann eine Kategorie "Partnerprogramm" erstellt. Diese wird auch oben in der horizontalen Navigationsbar angezeigt. Den würde ich jetzt gerne farblich hervorheben. Aber nur diesen einen Button. Wisst ihr wo ich diese Änderung vornehmen kann ?
Das ist ein bisschen schwieriger, aber nicht unmöglich. Was du dafür brauchst, ist die Kategorie-ID. Dann kannst du folgendes Beispiel anpassen: Code: li[data-id="deineCatID"].dropdown { background-color: #deineFarbe; } Die Kategorie-ID der entsprechenden Kategorie kannst du auch per "Element untersuchen" im Browser finden. Mach im Shop auf der Kategorie, die du farblich anpassen willst, einen Rechtsklick und wähl dort "Element untersuchen" aus. In der sich öffnenden Entwicklerkonsole suchst du dann nach folgendem: Code: <li class="dropdown level-1-child flyout-right" data-id="28"> Der Wert, der da bei dir für data-id steht, ist deine Kategorie-ID, die du für das CSS brauchst.
Hallo Torben, danke für die wertvolle Info. Kannst Du kurz mitteilen, wo genau ich diese CSS Datei finde.
Eine bestehende Datei brauchst du dafür nicht bearbeiten. Du kannst den oberen Codeschnipsel, angepasst mit deiner Kategorie, per StyleEdit3 als Eigenes CSS eintragen. Das ist dann Updatesicher
Und wie mach ich das ? Ich geh auf: Darstellung --> Template Einstellung --> Shop im Bearbeitungsmodus laden dann einen neuen Style erstellen so und wo muss ich das einfügen ?
Klick in der Bearbeitung des Styles auf den Namen des Styles oben. Da öffnet sich dann ein Dropdown, mit dem Menüpunkt "Eigenes CSS".
Aaaaahhhhhhhhhhh da tut sich was :-D Hättest Du mir das nicht gesagt, hätte ich Morgen noch suchen können x-D Ok das habe ich nun gemacht. Habe das hier eingefügt. li[data-id="23"].dropdown { background-color: #2eae06;} und gespeichert. Es tut sich nichts. Ich hab eben das Cache mal geleert und erneut probiert. Tut sich immer noch nichts. Fehlt da vielleicht irgend etwas ? Vielleicht solche Pfeile < > am Anfang und am Ende ?
Nimm mal das .dropdown aus der CSS-Regel raus. Sollte dann so aussehen: Code: li[data-id="23"] { background-color: #2eae06; }
Ich möchte nicht Nerven aber eine Kleinigkeit wäre da noch. Wenn ich mit dem Mauszeiger jetzt drauf gehe, wird aus dem grünen Button ein dunkel graues Button, wie bei den anderen Buttons auch. Wie krieg ich das hin, dass es nicht dunkel grau, sondern ein dunkleres Grünton wird.
Ergänz noch mal folgendes: Code: li[data-id="23"]:hover { background-color: deinFarbwert; } für "deinFarbwert" trägst du natürlich deinen gewünschten Farbwert ein
Mit der Ergänzung bleibt das Button grau, wie die anderen. Wenn ich mit der Maus drauf gehe, blinkt das nur kurz einmal grün auf und bleibt danach dunkelgrau.
Mit ergänzen hatte ich eigentlich zusätzlich zu deinem bisherigen CSS hinzufügen gemeint. Es klingt gerade so, als hättest du das Bestehende genommen und da das :hover drangehängt. Warum das allerdings nur kurz in der Farbe aufblinkt muss ich mir noch mal genauer ansehen
Ich hatte beide Variationen probiert. Ich kann noch mal das andere einfügen. So ist es jetzt eingetragen li[data-id="23"] { background-color: #2eae06; } li[data-id="23"] :hover { background-color: #339900; } Bei dieser Variation schaut es so aus, als hätte ich nichts ergänzt. Button bleibt grün und wenn ich mit dem Mauszeiger drauf gehe, wird es dunkel-grau. Wenn ich nur dieses eintrage, li[data-id="23"] :hover { background-color: #339900; } ist das Button grau, gehe ich mit dem Mauszeiger drauf, blinkt es nur kurz grün auf und bleibt dann dunkel-grau.
vielleicht nicht li[data-id="23"] :hover { background-color: #339900; } sondern li[data-id="23"] a:hover { background-color: #339900; } ?
Ok, du hattest da ein Leerzeichen zu viel, sowiet ich das sehen kann und die Regel, war nicht explizit genug geschrieben, sodass sie von einer anderen CSS Anweisung wieder überschrieben worden ist. Versuch mal das hier: Code: .navbar-default .navbar-nav > li[data-id="23"] a { background-color: #2eae06; } .navbar-default .navbar-nav > li[data-id="23"] a:hover { background-color: #339900; }