Neu Hintergrundfarbe von megamnü ändern

[xpert73]

Hallo,

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

danke
mfg

 

[Patrick Gugelsberger]

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:

.navbar-default {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
}

Ab Zeile 11689:

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

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

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:

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

Nach Wunsch anpassen.

 

[xpert73]

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

 

[Patrick Gugelsberger]

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]

Hallo xpert73,

child-template ist angelegt?

Viele Grüße
Chris

 

[xpert73]

hallo Kriss,
ja ich ändere alles über child template.

gruss

xpert73

 

[kriss]

Hallo xpert73,

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

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

Viele Grüße
Chris

 

[@DE]

ich hab auch probiert
funktioniert nicht

 

[xpert73]

Bei mir hat auch nicht geklappt

 

[kriss]

Gerade nochmal probiert. Funktioniert bei mir.
Child-Template richtig angelegt?
Evtl. die Seite nach der Änderung mal mit Strg + F5 laden.

 

[xpert73]

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