Neu Megamenü einstellungen

Icarium

Mitglied
13. Januar 2020
35
11
Hallo JTL-Team und Community!!
Ich such mich leider für die genaue Text-Formatierung der Mega-Menü-Einstellungen dumm und dämlich und fand bisher noch nichts, was meine Fragen beantwortet.

Unsere Voraussetzungen:
Wir nutzen JTL Shop 4.06 EVO Template mit dem Spacelabs Theme.
die Seite: www.energiefabrik-leipzig.de

Unser Wunsch:
Das Megamenü anzupassen in folgenden Punkten:
  • Schriftgröße der Kategorien im Header vergrößern und hervorheben.
  • im Megamenü selbst unter die Kategeorieüberschrift ein <hr>, dann links das Kategoriebild (funktioniert schon) und die Möglichkeit, die einzelnen Kategorien zu bearbeiten im Sinne von Auflistung, Textformatierung, etc.
  • die größe des Dropdownfeldes gegebenfalls anpassen (Bei Kategorien mit weniger, beispielsweise nur 2 Unterkategorien haben wir ansonsten 'nen großen weißen Fleck)

Die Frage:
  • Wo mach ich das? Auf dem FTP bei Evo/snippets/categories_mega.tpl?
    --> Falls ja, kann mir jemand ein Hinweis zur Zeile geben? ;)
  • Im Livestyler?
    --> Welche Variable? (Hab mehrfach durchgeschaut, dafür aber nichts gefunden)
  • Im Evo-Theme-Editor?
    --> Ist ja im Endeffekt das selbe wie der Livestyler - Welche Variable??
Unser geheimer Wunsch:
Den Livestyler die Möglichkeit geben, Schriftgrößen und Positionierungen einzelner Elemente anzupassen, am liebsten via Inspektor. Das wär mal was =)





Vielen Dank für die Aufmerksamkeit und für die hoffentlich hilfreichen Tipps!
Falls ich zu dem Problem eine Lösung finde, würde ich einen kurzen FAQ schreiben und ins Forum stellen, auf das andere Leute es leichter haben.

Beste Grüße,
Ica


Edit:
Ich hab mich mal weiter belesen und kam auf die sehr informative Seite über Bootstrap Navbars:
https://bootstrapious.com/p/bootstrap-navbar
Weiter unten im Text bei Punkt 6.3. wird das YAMM Megamenü vorgestellt und auch zum DL verlinkt.

2 kleine Fragen:
  • Ist das YAMM Megamenu kompatibel mit JTL Shop oder wird davon abgeraten, es zu implementieren??
  • Könnt ihr mir einen Pfad sagen, wo ich das einpflegen soll??
    -> Bei snippets?
    -> in die coustom.css im theme??
    -> irgendwo anders??
 
Zuletzt bearbeitet:

Icarium

Mitglied
13. Januar 2020
35
11
Vielen Dank für eure zahlreiche Anteilnahme & Hilfestellung!
Ich wusste doch, dass dieses Thema noch nicht abschließend geklärt ist und das viele von euch darauf brennen, eine Lösung zu finden - toll!

*ironie off*

So, das mit der Schriftgröße und Textausrichtung hab ich via coustom.css selbst hinbekommen.
Falls jemand von euch auch das Megamenü räumlich im Header anders anordnen möchte, oder die Schriftgröße /-style verändern will, folgende Zeilen in eure template/theme/euer-theme/coustom.css einfügen:


______________________________________________________________________________________________________
/* Megamenü räumliche Anordnung, Textvariablen, Abstand */
.navbar-default .navbar-nav {text-align: center;}
.navbar-default .navbar-nav > li {

margin: -10px; /* Abstand zum Header */
display: inline-block;
float: none;
font-size: 130%; /* Textgröße - da ich nicht wusste, welche Formatierung er nimmt, hab ich mich für ne Prozentuale Änderung entschieden und keine Absolute (px / em) */
font: bold; /* Text-Style, in dem Fall: Fettgedruckt */

}
.affix-top .navbar-default .navbar-nav > li.visible-affix {display:none;}
______________________________________________________________________________________________________

Weitere offene Fragen:

  • im Megamenü selbst unter die Kategeorieüberschrift ein <hr>
    --> Bin ich mit categories_mega.tpl richtig? Wenn ja, an welche Position?? Hab bis jetzt immer nur eine Leerzeile generiert.
  • die Größe des Dropdownfeldes anpassen
    --> Wo kann ich im allgemeinen Feldeinstellungen für das Dropdown tätigen??

Vielen Dank für die Aufmekrsamkeit und in voller Vorfreude auf hilfreiche Kommentare von Wissenden oder Administratoren oder Webentwicklern oder Gärtnern mit HTML/CSS-Fetisch,

Ica
 
  • Gefällt mir
Reaktionen: hermius

Icarium

Mitglied
13. Januar 2020
35
11
Sooo, nächste Lösung zu der horizontalen Linie im Dropdown des Megamenü:

in die coustom.css folgende Variable definieren: (statt new1 könnt ihr auch irgendwas nehmen wie pillepalle oder schnippschnapp)


hr.new1 {
border: 1px solid #Farbcode; /* Dicke der horizontalen Linie, fett gedruckt, Farbeinstellung */
border-radius: 60px; /* Rundet die Linie am Anfang und am Ende etwas ab */
margin-top: 15px; /* Abstand nach oben */
margin-bottom: 5px; /* Abstand nach unten*/
}


habt ihr das implementiert, dann auf zur /templates/Evo/snippets/categories_mega.tpl

und da ca. in Zeile 49 direkt unter:
<a href="{$category->cURL}">
{$category->cName}
</a>

Folgendes einfügen:
<hr class="new1">

new1 ist, wie oben beschrieben, der Klassenname den ihr vorher in der coustom.css definiert habt... die namen sollten also deckungsgleich sein, wie ihr sie nennt ist aber eurem Strukturwunsch überlassen.



Letzte Frage:
  • die Größe des Dropdownfeldes anpassen und die Anordnung übearbeiten.
    --> Wo kann ich im allgemeinen Feldeinstellungen für das Dropdown tätigen??
    --> /templates/Evo/snippets/categories_mega.tpl ... Welche Zeile??

Weiterhin vielen Dank für den massiven Input im Form eines kollektiven Vakuums! Ich halt euch trotzdem auf dem Laufenden!

Grüße, Ica
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: hermius und Josch41

m00200

Mitglied
29. Oktober 2019
9
0
Hey,

die Anordnung der Kategorien ?

Diese ist ja über das WAWI steuerbar -> Vertikal alle Kategorien so angeordnet wie du magst und per Abgleich sortiert es das in diese Reihenfolge.

Aber ich denke das ist nicht das was du meinst.

Aber Zeile 43 könnte eine Adresse sein :)
Der Link ist ja unterm Strich verknüpft mit "Dropdown-toggle"

Aber mal was anderes, wie haßt du die Kat. Bilder neben den Text bekommen ?

Das ist es was mir grad Kopfschmerzen bereitet.


Greetz
 

Icarium

Mitglied
13. Januar 2020
35
11
Die Bilder darzustellen geht über`s Backend.. war nur ein wenig nervig, da es Anfangs im Megamenü auch den Kategorietext noch angezeigt hat..

Der Pfad war glaub ich -> Storfront -> Suche -> Filter -> ganz unten oder einfach nach Einstellungsnr. 623 suchen.

Schau mal ob dir das weiterhilft.. ansonsten muss ich noch weiter rumschauen ;)