× You can talk here in German about HikaShop. Please understand that we do not speak German at HikaShop and we can't offer support in German.

Hintergrund Warenkorb

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 4 days ago #328406

-- 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

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 4 days ago #328410

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

Please Log in or Create an account to join the conversation.

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 3 days ago #328426

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:


frontend_custom1.css

943 table#hikashop_cart_product_listing,
944 table#hikashop_cart_product_listing > tbody,
945 table#hikashop_cart_product_listing > tbody > tr,
946 table#hikashop_cart_product_listing > tbody > tr > td {
947 display: block;
948 min-height: 30px;
949 background-color: #1e1f24;
}
______________________
Leider keine Änderung
Die Adresse ist : web267.ms-media.at/shop
Ersichtlich wenn man etwas in den Warenkorb legt und dann links auf Warenkorb geht.

Last edit: 1 year 3 days ago by Ziegenpeter.

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 3 days ago #328429

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;
}

Für die Buttons, deren CSS vom hikashop.css Core-File kommt, kannst du folgende Zeilen verwenden:
/*** toolbar buttons ***/
.hika_toolbar_btn .hikabtn {
    background-color: #1e1f24;
    color: #f5f5f5;
}
Das gilt dann für alle HikaShop Toolbar-Buttons.

Also:
Deine HikaShop Custom CSS-Datei bearbeiten (wie hier oben und in der Doku beschrieben), und die CSS-Zeilen bitte am Ende des Files hinzufügen.

Please Log in or Create an account to join the conversation.

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 2 days ago #328475

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!

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 2 days ago #328494

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;
}
Wir können hier nicht CSS-Basisdinge erläutern, aber das funktioniert nicht, weil zum einen ein Syntax-Fehler drin ist (Punkt vor Klassennamen fehlt) und zum andern weil HikaShop Custom-CSS vor dem Notify-CSS geladen und deshalb wieder "überschrieben" wird.

Hier zwei Beispiel-Codeblöcke, die Hintergrund, Text usw. definieren:
.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';
}
Anstelle deiner Zeilen kannst du nun mit gleichen Selektoren deinen eigenen Custom-Code schreiben. Aber -- um wiederum das Überschreiben zu vermeiden: wenn du das im HikaShop frontend_custom2.css machst, solltest du "!important" verwenden, oder deinen Code in deinem Joomla-Template CSS verwenden (weil das als letztes geladen wird).

The following user(s) said Thank You: Ziegenpeter

Please Log in or Create an account to join the conversation.

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 1 day ago #328519

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!

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 1 day ago #328520

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;
}
Das macht nur das was entsprechend deinem Code notwendig ist (anstelle alles andere nochmal = doppelt zu setzen) und setzt auch Farbe und Typ des Fonts (letzteren entsprechend deines Templates).

Last edit: 1 year 1 day ago by lousyfool. Reason: Kleine Code-Updates

Please Log in or Create an account to join the conversation.

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 1 day ago #328521

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?

Last edit: 1 year 1 day ago by Ziegenpeter.

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 1 day ago #328527

Wie ich hier schon sagte :

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


Dafür sorgt die Klasse ".hikashop_cart_products" dort im Code. Kannst du weglassen, dann gilt das CSS überall in der Website wo HikaShop inkl. frontend_custom2.css geladen wird, also auch in der Kasse.

Einmal mehr: das sind Basis-CSS-Dinge, und du kannst das alles per Browser-Inspektor selbst sehen/verifizieren/simulieren. Wenn das weiterhin Schwierigkeiten macht, ist Lernen oder das Anheuern eines Spezialisten nötig, weil hier weder Grundlagen noch ausführlicher Custom-Code geliefert werden können. Ansonsten muss ich dir ne Rechnung für Unterricht bzw. Arbeit schicken... :P :lol:

Please Log in or Create an account to join the conversation.

  • Posts: 2094
  • Thank you received: 713
  • Hikashop Business
1 year 1 day ago #328532

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


Siehe www.hikashop.com/support/documentation/1...the-display.html#css

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.

= ja.

Please Log in or Create an account to join the conversation.

  • Posts: 19
  • Thank you received: 0
  • Hikaserial Standard Hikashop Business
1 year 11 hours ago #328564

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!

Please Log in or Create an account to join the conversation.

Time to create page: 0.088 seconds
Powered by Kunena Forum