Hintergrund Warenkorb

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.4
-- Browser(s) name and version -- : Firefox 84.0.2

Hallo,
Mein Template ist sehr dunkel (#1e1f24), die Produkte im Warenkorb werden jede zweite Zeile in #f5f5f5 angezeigt, in der Zeile dazwischen ist transparent, aber ein Hover-Effekt auch in der Farbe #f5f5f5.
Wie und vorallem wo kann ich das ändern? Ich habe in der hikashop.css aber auch in der bootstrap.css keine Anhaltspunkte gefunden.
Wie kann ich die Icons oben rechs (Drucken, Kasse, Speichern) ändern auf Hintergrund #1e1f24 und Farbe der Icons auf #f5f5f5?
Vielen Dank für ihre Mühe
Manfred Spirk

Hi,

wie üblich zwecks Analyse und ggfs. Simulation von CSS, Element rechts-klicken, dann in Browser-Developmenttools inspizieren.

Leider ist da mit Screenshots deshalb nichts anzufangen, da muss man schon die Website im Browser laden.

Beispiele und weitere Dokumentation zu HikaShop CSS-Overrides: www.hikashop.com/support/documentation/1...the-display.html#css

Hi, vielen Dank für die rasche Antwort.
Diese Anleitung habe ich schon durch. Leider keinen Erfolg.
Unter System->Anzeige gibt es kein Menü CSS nur Ansichten und Benutzerdefinierte Felder. Unter Ansichten erhalten ich nur die php Dateien wo zwar die ID's und Klassen ersichtlich sind, jedoch finde ich diese in den CSS-Dateien nicht.
Unter System->Konfiguration gibt es einen Punkt CSS. Hier kann man eine Frontend CSS Datei bearbeiten, ich finde zwar auch die Klassen, wenn ich dazu eingebe: background-color: #1e1f24; ändert sich überhaupt nichts.
Ebenso bei Designvorlagen für die Webseite.
Bei beiden Einstellungen sehe ich Änderungen im Aussehen des Warenkorbes, jedoch finde ich nirgends etwas, dass in der Ansicht 1. u. 3 also jede zweite Zeile einen Background von #f5f5f5 und die 2., 4, usw. einen hover Effekt hat.
Bin ich in der falschen css oder passen nur die Klassen nicht?
Mit firebug müte das die Klasse: hikashop_cart_product_listing sein. In den CSS einstellungen unter frontend:custom1.css finde ich diese Klasse und habe eingetragen damit ich in den Zeilen den f5 Hintergrund wegbekomme:

Hi,

wie in der Dokumentation beschrieben, werden CSS-Overrides tatsächlich unter System -> Konfiguration -> Anzeige -> CSS Optionen -> Frontend CSS Datei ("custom...") und Klick auf das "bearbeiten"-Icon vorgenommen.
(Im Unterschied dazu und wie auch in der Dokumentation beschrieben, kannst du unter Anzeige -> Ansichten Layout-Overrides der PHP-Dateien erstellen.)

In der Browserkonsole ist bei Inspektion deines CSS zu sehen, dass die Hintergrundfarben der Tabellen-Zellen im bootstrap.css deines Joomla-Templates gesetzt werden.

Um sie nur für den Warenkorb (und nicht global über die gesamte Website) zu ändern, tut folgendes CSS:

/*** table cell backgrounds ***/
/* regular */
.hikashop_cart_products.table-striped tbody > tr:nth-child(odd) > td {
    background-color: #1e1f24;
}
/* on hover */
.hikashop_cart_products.table-hover tbody tr:hover > td {
    background-color: #1e1f24;
}

/*** toolbar buttons ***/
.hika_toolbar_btn .hikabtn {
    background-color: #1e1f24;
    color: #f5f5f5;
}

Hi lousyfool,
Danke, Danke für deine Erklärungen. Ich habe nun kapiert dass man die bootstrap.css Einstellungen mit frontend_custom überschrieben werden können. Ich war dann, dank deiner Anleitungen auf dem richtigen Weg, wenn ich auch die Klassen noch nicht so richtig herausfiltern konnte.
Es passt nun so, nur eine Frage hätte ich noch und zwar:
Wenn man einen Artikel in den Warenkorb legt, erscheint rechts oben am Bildschirm ein Fenster mit hellblauen Hintergrund (#d9edf7)
Wenn ich das mit Firebug untersuche erhalte ich als Klasse
com_contend - body view-article no-layout no-task itemid-165 pageide--169 ltr bzw. notifyjs-container und notifyjs-metro-base notifyjs-metro-info
Diese Klassen habe ich in frontend_custom2.css mit dem entsprechenden Hintergrund eingetragen, leider ohne Erfolg.
Nochmals Danke!

Hi,

in deinem frontend_custom2.css finde ich die folgenden Zeilen:

.notifyjs-container {
	min-width:250px;
background-color: #ff0000;
color: #000;
}

.notifyjs-metro-base notifyjs-metro-info {
background-color: #ff0000;
color: #000;
}

.notifyjs-metro-info {
    color: #31708f !important;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
}
.notifyjs-metro-base .text-wrapper, .notifyjs-metro-lite-base .text-wrapper {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    clear: both;
    font-family: 'Segoe UI';
}

Hi, danke für Deine Ausführungen und Hilfestellungen.
CSS ist bei mir noch immer in weiten Bereichen ein weißer Fleck auf der Landkarte, nicht so sehr die CSS Anweisungen, sondern vielmehr wann, wo und in welcher Reihenfolge sie geladen werden.
Einen großen Teil konnte ich nun mit deiner Hilfe erledigen, anderes noch nicht. Und einiges kapier ich nicht.
zB.
So konnte ich den Hintergrund des Fensters, das bei 'In den Warenkorb legen' auftaucht, ändern, jedoch die Schriftfarbe nicht.
Aber vielleicht schaff ich's noch.
Jedenfalls vielen Dank für Deine Hilfe!

Tja, die Font-Farbe ist schon in Notify-CSS mit einem "!important" gesetzt, da kann man dann mit gleichem Selektor nichts machen, sondern es muss schon gezielter "geschossen" werden.

Anstelle deines jetzigen Codes in frontend_custom2.css nimm mal:

.notifyjs-metro-info {
    background-color: #e3e3e3 !important;
    border: 1px solid #fff !important;
}
.notifyjs-metro-base .text-wrapper, .notifyjs-metro-lite-base .text-wrapper {
    color: #000;
    font-family: inherit;
}

Checkout Warenkorb hab ich erledigen können. Jetzt noch die hikashop_wizardbar, das wär's dann.

Bleib mir die Datei frontend_custom2.css bei einem Update erhalten?

Wie ich hier schon sagte :

Um sie nur für den Warenkorb (und nicht global über die gesamte Website) zu ändern...

Ziegenpeter wrote: Bleib mir die Datei frontend_custom2.css bei einem Update erhalten?

We highly recommend that you edit the CSS files of HikaShop via the CSS settings of the HikaShop configuration as explained below and not directly. That way, you won't loose your changes when updating your HikaShop.

Ups, jetzt trau ich mich aber nichts mehr zu fragen. Dabei bin ich im Lernen rund um CSS. Aber alles steht halt auch nicht in den Fach- und Handbüchern.
Trotzdem, ich habe sehr viel gelernt (Lerning by Doing!).
Vielen Dank!