Neu Hintergrundfarbe von megamnü ändern

xpert73

Mitglied
23. Mai 2019
35
3
Hallo,

ich würde gerne die hintergrundfarbe von megamenü ändern?
ich benütze bootstrap theme.
wo kann es in bootstrap.css ändern?

danke
mfg
 
Zuletzt bearbeitet:

Patrick Gugelsberger

Moderator
Mitarbeiter
1. Februar 2019
454
77
Hallo @xpert73,

ich versuche mal dir zu helfen.

Wie jedoch schon in einem anderen Thread geschrieben bin ich absolut kein HTML / CSS Experte und kann dir leider nur Tipps ohne Gewähr geben welche in meinem Testshop oberflächig funktioniert haben, bei denen ich aber nicht weiß was für weitere Auswirkungen diese Änderungen haben könnten. Also bitte meine Vorschläge vorher an einem Child Template vornehmen und das Template testen oder wende dich an einen Servicepartner welcher es sehr wahrscheinlich wesentlich schöner als mit meinen Vorschlägen hinbekommen wird :)

Erst einmal die Navigationsleiste an sich:

Ab Zeile 5789:
Code:
.navbar-default {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
}

Ab Zeile 11689:
Code:
.navbar-default {
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
  background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}

Es gibt nun 2 Wege die Hintergrundfarbe zu ändern.

1. Du passt die Farbwerte bei "background-image" ab Zeile 11689 an.
2.Du passt die Farbwerte bei "background-color" ab Zeile 5789 an und löschst den Inhalt aus meinem zweiten Block (Zeile 11689)

Nun das Megamenü Dropdown:

Ab Zeile 4825:
Code:
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  }

Hier auch wieder entsprechend bei background-color den neuen Farbcode eingeben.


Nun die horizontale Linie im Dropdown Menü

Ab Zeile 2545:
Code:
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #3399ff;
}

Ebenfalls nach Wunsch anpassen.


Zuletzt die Vertikale Linie

Ab Zeile 10385:
Code:
.megamenu .mega-categories.hasInfoColumn {
  border-left: 1px solid #eeeeee;
}

Nach Wunsch anpassen.
 

xpert73

Mitglied
23. Mai 2019
35
3
hey vielen dank für die hilfe

zeile 5789 gibt es bei mir und ich hab den farb code geändert.

ab zeile 11689 das ganze code staffel gibt es nicht.
ich hab sogar suchfunktion benutzt
hab nix gefunden

ob wohl ich die farb code zeile 5789 geändert habe. blieb megamenuimmer noch weiss
ich benutze evo template.

hast du eine idee warum das so sein könnte ?

gruss
 
Zuletzt bearbeitet:

Patrick Gugelsberger

Moderator
Mitarbeiter
1. Februar 2019
454
77
Hallo,

ich habe im Nachhinein erfahren das es wenig Sinn macht Zeilennummern in der bootstrap.css anzugeben da diese Datei generiert wird und nicht bei jedem gleich aussieht, zusätzlich sollte diese auch nicht direkt angepasst werden.

Warum o.g. Änderung bei dir nicht greift kann ich pauschal nicht sagen, ich würde dir wirklich ans Herz legen dich vielleicht doch an einen Servicepartner zu wenden.

Hier nochmal ein Zitat von einem Kollegen aus einem anderen Thread zum Thema CSS Anpassungen:

Um das CSS für dein Template zu verändern, gibt es zwei Möglichkeiten:
1. Du trägst alle Änderungen direkt in die custom.css deines Themes (in /themes/mythemes/custom.css) ein. Oder
2. Du legst in /themes/mythemes/less eine eigene theme.less an und definierst deine Änderungen dort. Nach jeder Änderung musst du dann (z.B. mit dem Evo-Theme Editor Plugin) aus den .less Dateien die bootstrap.css neu kompilieren.

Zum Verständnis: Die bootstrap.css wird automatisch erstellt und sollte nicht direkt verändert werden. Änderungen werden nur über die .less Dateien und neukompilieren eingetragen. Die custom.css wird vom Shop NACH der bootstrap.css geladen und bietet die Möglichkeit vordefinierte Styles wieder zu überschreiben, ohne die bootstrap.css neu kompilieren zu müssen.

Und hier nochmal ein Link aus unserem Guide, eventuell hilft dir das weiter wenn du das Thema selbst erarbeiten willst und keinen Servicepartner zu Rate ziehen möchtest:
https://guide.jtl-software.de/jtl-shop/optik/templates-anpassen/
 

kriss

Aktives Mitglied
13. März 2013
63
11
Hallo xpert73,

in
/templates/DeinTemplate/themes/Deintheme/Deintheme.css
folgendes eintragen und den Wert entsprechend ändern:

Code:
.megamenu .dropdown-menu {
    background-color: #12345;
}

Viele Grüße
Chris
 

kriss

Aktives Mitglied
13. März 2013
63
11
Gerade nochmal probiert. Funktioniert bei mir.
Child-Template richtig angelegt?
Evtl. die Seite nach der Änderung mal mit Strg + F5 laden.
 

xpert73

Mitglied
23. Mai 2019
35
3
ich bin dieses anleitung gefolgt
https://blog.themeart.de/so-erstellst-du-ein-child-theme-fuer-jtl-shop/

so sieht meine index aus

<?xml version="1.0" encoding="UTF-8" standalone="true"?>

-<Template>

<Name>MeinTheme</Name>

<Author>Max Mustermann</Author>

<URL>https://www.meinshop.tld</URL>

<Version>1.0</Version>

<ShopVersion>406</ShopVersion>

<Parent>Evo</Parent>


-<Description>
Dieses Template dient für eigene Anpassungen, wie das genau geht, findest du in unserem
-<![CDATA[<a href="https://blog.themeart.de/so-erstellst-du-ein-child-theme-fuer-jtl-shop/">Tutorial</a>]]>.
</Description>


-<Settings>


-<Section Key="theme" Name="Themes">


-<Setting Key="theme_default" Value="theme" Type="select" Description="Theme">

<Option Value="theme">Eigenes Theme</Option>

</Setting>

</Section>

</Settings>


-<Minify>


-<CSS Name="theme.css">

<File Path="../Evo/themes/base/offcanvas-menu.css"/>

<File Path="../Evo/themes/base/pnotify.custom.css"/>

<File Path="../Evo/themes/base/jquery-slider.css"/>

<File Path="themes/theme/bootstrap.css"/>

<File Path="themes/theme/theme.css"/>

</CSS>

</Minify>

</Template>


und ich habe deine befehle in theme.css eingegeben.

bis jetzt alles was ich ändern wollte würde auchngeändert.

gruss
 
Ähnliche Themen
Titel Forum Antworten Datum
Bestand von Kinderartikeln wird im Vaterartikel zusammenaddiert JTL-Wawi 1.8 1
Neu beim Umstieg von unicorn auf SCX Bilder aktivieren Otto.de - Anbindung (SCX) 0
Neu Filtereinstellungen: wenn Sonderpreis bei Vater- oder Kindartikeln, Anzeige von Vater- UND Kindartikeln User helfen Usern - Fragen zu JTL-Wawi 5
Neu gelöst: Update von 5.3.0 auf 5.3.1 - Dateien hochgeladen - immernoch alte Version Gelöste Themen in diesem Bereich 6
Neu Fehler beim Bearbeiten von PLZ & Ort im Kundenkonto (Update 5.3.0) JTL-Shop - Fehler und Bugs 1
Neu Wechsel WAWI Hosting von JTL mit RDP auf ecomDATA User helfen Usern - Fragen zu JTL-Wawi 2
Neu Fehler bei Bearbeitung von Designvorlagen eBay-Designvorlagen - Fehler und Bugs 0
Neu Mitgabe von Nährwertangaben WooCommerce-Connector 1
Neu E-Mail-Adresse beim Versand von Lieferantenbestellungen User helfen Usern - Fragen zu JTL-Wawi 0
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
Neu Bilder von Merkmalen werden nicht angezeigt Gelöste Themen in diesem Bereich 5
Neu Shopify Erhöhung der Varianten von 100 auf 2000 - Connector App Problem Shopify-Connector 1
Neu Bestimmte Artikel von JTL-Search ausschließen JTL-Search 0
Artikel Netto Preis von 4 Nachkommastellen auf 2 umstellen JTL-Wawi 1.7 5
Artikelabgleich verlangsamt sich automatisch von Wawi JTL-Wawi 1.8 2
Formatierungsfehler in XML bei Verwendung von dotliquid kaufland.de - Anbindung (SCX) 2
Neu Produktfeld "Produktkategorie" von JTL nach Shopify? Shopify-Connector 0
Alternativpositionen und gültig von bis JTL-Wawi 1.8 0
Neu Fehler beim erstellen von Aufträgen. Digitale Unterschrift im Auftrag. JTL-Wawi - Fehler und Bugs 0
Export von Bestellungen als Excel JTL-Wawi 1.6 1
Neu Sortierung von Artikel nach Preis absteigend Allgemeine Fragen zu JTL-Shop 4
Ameisen Import von Aufträgen: Zahlungsziel in Tagen immer 0 JTL-Wawi 1.8 1
Neu Menüleiste wird plötzlich in der Mitte von der Seite angezeigt Allgemeine Fragen zu JTL-Shop 0
Neu 💡Umsatzsteuer- und Internationalisierungs-Expertise von unserem neuen Partner countX News, Events und Umfragen 4
Neu Update von 5.1.5 auf 5.2.4 Installation / Updates von JTL-Shop 1
EAN-Code von Umverpackungen hinterlegen JTL-Wawi 1.7 3
Neu Update von Wawi 17.15.4. auf 18.12.0 geht nicht, weil Primary voll ist JTL-Wawi - Fehler und Bugs 4
In Diskussion Fehler beim Versenden von E-Mails: "Could not convert socket to TLS" JTL-POS - Fehler und Bugs 1
Neu Error beim öffnen von Artikeln und Unterkategorien in zweiter Sprache JTL-Shop - Fehler und Bugs 1
Neu Umstieg von Shopware 5 zu JTL Shop 5 - Ranking behalten Allgemeine Fragen zu JTL-Shop 2
Neu Zusammenführen / Konsolidieren von Artikeln aus 2 Quellen (Amazon / Shopify) und zentrale Bestands-Verteilung an beide Systeme User helfen Usern - Fragen zu JTL-Wawi 0
Neu Bestände von der Wawi mit ebay abgleichen User helfen Usern - Fragen zu JTL-Wawi 2
Neu Anpassen einer Rechnungsvorlage - Bearbeiten von Textbausteinen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 4
Lieferant hat identischen Artikel von verschiedenen Herstellern oder verschiedene Packungsgrößen JTL-Wawi 1.7 0
Kein Fehler von 1.6.39 zu 1.8.12 JTL-Wawi 1.8 4
Verwiesen an Support wo finde ich die Logdatei von den Workflows JTL-Workflows - Fehler und Bugs 9
In Diskussion Workflow von Stornobelege Rechnung JTL-Workflows - Ideen, Lob und Kritik 1
Neu Gruppierung im Megamenü unabhängig von Kategorien Allgemeine Fragen zu JTL-Shop 0
Neu Anzeige von Neuheiten und Topsellern im JTL Shop 5 Allgemeine Fragen zu JTL-Shop 2
Neu Bestände der einzelnen Lager weichen von den reellen Beständen willkürlich ab JTL-Shop - Fehler und Bugs 7
Neu Benachrichtigung von Amazon - Active Listings Report User helfen Usern - Fragen zu JTL-Wawi 0
Neu Nach Update von 1.5 auf 1.8 Versand in die Schweiz nicht mehr möglich JTL-ShippingLabels - Fehler und Bugs 2
Neu Versandetikett von der Merchant FFN JTL an die Fulfiller FFN JTL übertragen? Richtiger Weg? User helfen Usern - Fragen zu JTL-Wawi 0
Neu NEU ✔️ PDF-Angebots-Plugin für den JTL-Shop 5 - PDF Angebote von der Produktseite oder aus dem Warenkorb heraus generieren B2C / B2B Plugins für JTL-Shop 5
Neu Migration von eCommerce-Integrator auf JTL Connector - Software 5 Shop Onlineshop-Anbindung 2
Neu Kurzbeschreibung von einem "Stücklisten-Artikel" wird in der Rechnungskorrektur Vorlage nicht angezeigt. Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu Import von sonderpreisen JTL-Ameise - Fehler und Bugs 1
Neu automatisierte Weiterleitung von https:// nach https://www. Betrieb / Pflege von JTL-Shop 10
Neu Produktbeschreibung von einem anderen Produkt abrufen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Umzug der POS von Tablet zu Windows PC Einrichtung / Updates von JTL-POS 2

Ähnliche Themen