Zeilenbabstände und Schriftart, Spaltenanzahl bei a-Menü ändern

Shopware 5 Themes & Design
1

Leider hat die Suche nichts ergeben. Ich habe das less angelegt und das Menü reagiert schon mal auf die andere Fontgröße.
Nur die Zeilenabstände sind viel zu groß. Die Schrift ist weiterhin fett und bei 20 Einträgen bekomme ist 3 Spalten wobei die dritte Spalte unter dem Bild liegt und die Links nicht auszuwählen sind.
In der Orginaldatei wird oben noch einiges eingebunden wie es aussieht. Ich vermute das es daran liegen könnte.
Sind das css Dateien und wo liegen die?
 

@adv-menu-header-bg: @text-color-dark;
@adv-menu-header-text-color: @btn-secondary-text-color;
@adv-menu-bg: @btn-secondary-text-color;
@adv-menu-text-color: @text-color-dark;
@adv-menu-link-color: @adv-menu-text-color;
@adv-menu-link-hover-color: @link-color;
@adv-menu-delimiter: @border-color;
@adv-menu-teaser-link-color: @link-color;
@adv-menu-teaser-link-hover-color: @adv-menu-teaser-link-color;

Die Bildgröße habe ich schon geändert da Bilder einfach nur abgeschnitten wurden. Zentrieren verweigert das Menü auch noch.
Vielleicht gab es das Problem schon mal. Das mit der Spalten anzahl habe ich gefunden, dabei ging es nur ums erweitern. 3 Spalten wäre auch ok wenn die Schrift nicht so fett wäre und alles unter das Bild rutschen würde. Dürfte eigentlich nicht passieren.
 

2

@shopwaredummy schrieb:
In der Orginaldatei wird oben noch einiges eingebunden wie es aussieht. Ich vermute das es daran liegen könnte.
Sind das css Dateien und wo liegen die?
 

@adv-menu-header-bg: @text-color-dark;
@adv-menu-header-text-color: @btn-secondary-text-color;
@adv-menu-bg: @btn-secondary-text-color;
@adv-menu-text-color: @text-color-dark;
@adv-menu-link-color: @adv-menu-text-color;
@adv-menu-link-hover-color: @link-color;
@adv-menu-delimiter: @border-color;
@adv-menu-teaser-link-color: @link-color;
@adv-menu-teaser-link-hover-color: @adv-menu-teaser-link-color;

 

irgendwie drückst du dich immer so aus das ich nicht verstehe was du richtig Meinst.

Eigentlich solltest du die Stellen mit den Dev-Tools von Chrome und eingeschaltetem „CSS Source Map erstellen:“ herausfinden.

http://community.shopware.com/Theme-Manager\_detail\_1808\_959.html#Einstellungen

und dann hatte ich dir ja mal auf dieses Tutorial verwiesen https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen bei dem nochmal erklärt ist wie du „CSS Source Map“ im Thememanager aktivierst und dann über die Dev-Tools deine zu änderenden Einträge findest.

Ein Link zur Seite ist immer von Vorteil oder wenigstens ein Screenshot von deiner Seite der den Fehler zeigt.

Uwe

 

1 „Gefällt mir“
3

Mit Chrome arbeite ich ungern. Das selbe gibt es auch bei Firefox.  Mit Dev.Tools meinst sicher Entwicklertools? Sieht jedenfalls so aus wie im Video.
Wie ich schon sagte habe ich die Less Datei angelegt und bei der Fontgröße reagiert shopware auch. Also liegt die schon mal am richtigen Platz. Es geht nur ums Advanced Menü. Und das wird im Entwicklertool nicht angezeigt. Das Tool für chrome heißt übrigens clear cache. Habs gerade mal installiert.
Gutes Video. Dann habe ich ja schon mal alles richtig gemacht. Habe eine header.less footer.less schon angelegt wegen der hintergrundfarbe. sind auch in der all.less eingebunden. Soweit alles richtig und funktioniert auch.
im ordner _plugins habe ich die datei advanced-menu.less und die ist auch in der all.less drin
Sieht so aus:

@import "_modules/header";
@import "_modules/footer";
@import "_modules/main-navigation";
@import "_plugins/advanced-menu";

in der advanced-menu.less habe ich die fontgröße und die imagegröße geändert. Funktioniert soweit auch.
Da mir aber dev-tool bei ausgeklappten menü nix anzeigt weiß ich nicht wo ich suchen muss.
welcher editor speichert direkt auf dem server? oder ist das eine lokale installation die du im video zeigst? Interessant auch das er die geschweiften klammern automatisch schließt :slight_smile: sehr hilfreich.
So sieht das menü als beispiel jetzt aus.

Das seltsame ist das im Desktopansicht das Bild oben und unten abgeschnitten wird und wenn man den Screen schmaler macht wird es besser.  Ausser der Fontgröße und Image

.teaser–image {
        .unitize-height(250);
        width: 40%;
habe ich noch nichts geändert. Das Image wird also nicht passend gemacht und muss vorher wohl auf passende Größe gebracht werden. Damit kann man leben.
Problem ist,  durch die weiten Abstände der Menüpunkte ergeben sich 3 Spalten die unter das Bild rutschen und nicht erreichbar sind.
Habe im Backend Prozent auf 25% gestellt dann wandert es nicht mehr unters bild aber schneidet das ab. Bei 50% wandert die 3te Spalte unters Bild.
Die Abstände habe ich bereits kleiner bekommen. Schrift ist nach wie vor fett. Kopiere jetzt alle Templates und auch engines runter und lass die style angaben die im quelltext ausgegeben werden suchen um zu sehen wo die versteckt sind. Wozu man 20 irgendwo versteckte Dateien braucht ist mir schleierhaft.  Übersichtlicher wird es dadurch sicher nicht. Mit einer suchen Funktion findet man auch alles in einer Datei.

Habe nun die komplette advanced-menü.less genommen und überall font-weight: normal; eingetragen. Der Font bleibt fett. Das gibt es doch nicht…
Theme compiliert alle caches gelöscht ist klar.

Habs nun doch hinbekommen. Nach ewiger Sucherei und gefühlten 100x compilieren. Die sSpaltenanzahl wir wohl woanders eingestellt. Aber durch das ändern der Schrift und deren Abstände reichen 2 Spalten aus das nicht alles unters Bild rutscht. Schriftabstand unter .item–level-0

.item--level-0 {
        .unitize(padding-bottom, 10);
        display: block;
        position: relative;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        font-weight: normal;