Drstellung Liste

Shopware 5 Themes & Design
1

Guten Morgen @Alle,

Wenn ich in den Kategorien oder Artikelbeschreibungen eine Liste erstelle, dann  sieht das Ergebnis so aus, dass die Liste immer ganz links erscheint und die Punkte (oder Zahlen) aus dem Text nach links ausserhalb dem Text gesetzt werden (siehe Bild) :frowning:

874×527 22.9 KB

Ich habe nun in den Shopware Daten gesucht, finde aber nicht die Stelle an der das geändert werden kann. Ich arbeite mit dem Standard Resposive Theme.

Kann mir jemand verraten wie das so geändert werden kann, dass es wie bei normalem HTML-Text eingerückt erscheint?

Vielsten Dank für Hinweise und Gruß Antenne1

2 
ul {
    list-style-position: outside;
    margin-left: 10px; /* Hier kannst Du noch mehr Einrücken, wenn Du magst!? */
}

 

3

Besten Dank für den Hinweis… nur wo trage ich das ein???

Ich habe das gesamte lokale Shopware Verzeichnis nach dem Text „list-style-position“ mit WinGrep durchsucht und nichts in css dateien gefunden. Mein lokales Shopware Verzeichnis ist eine 99,99% exakte Kopie vom der Domain; es sind nur der Datenbankeintrag  und die Hostangabe auf den lokalen Server geändert.

4

@Antenne1 schrieb:

Besten Dank für den Hinweis… nur wo trage ich das ein???

Ich habe das gesamte lokale Shopware Verzeichnis nach dem Text „list-style-position“ mit WinGrep durchsucht und nichts in css dateien gefunden. Mein lokales Shopware Verzeichnis ist eine 99,99% exakte Kopie vom der Domain; es sind nur der Datenbankeintrag  und die Hostangabe auf den lokalen Server geändert.

Benutz bspw. einen Browser wie „Firefox Developer Edition“, mit diesem wechselst du dann via F12 in die Developer Tools. Dann kannst du einfach über das gewünschte Element hovern und es wird dir angezeigt in welcher CSS Datei sich der Eintrag befindet.

 

Beispiel:

1018×65 2.46 KB

 

Nun wissen wir das wir „.navigation-main .navigation–link“ in der „styles.css“ Line 60 bearbeiten müssen.

Die styles.css findest du dann in deinem Theme Ordner.

Mfg,

ent_dev

5

@ent_dev schrieb:

Benutz bspw. einen Browser wie „Firefox Developer Edition“, mit diesem wechselst du dann via F12 in die Developer Tools. Dann kannst du einfach über das gewünschte Element hovern und es wird dir angezeigt in welcher CSS Datei sich der Eintrag befindet.

Naja, ganz so stimmt das aber nicht…, denn eigentlich zeigt Shopware da nur dynamische CSS Dateien an, wie z.B.:

https://yourdomain/web/cache/1234567890_25d055f558e75edc59179aa34123e504.css

Wenn Du mit den DEV Tools die Quell-CSS Dateien wirklich sehen willst, also so wie es @ent_dev‍ beschrieben hat, dann musst Du im Theme Manager, unter Einstellungen > CSS Source Maps erstellen ein Häkchen setzen:

Aber lass das besser und binde Dir doch einfach über den Teammanager ein CSS Datei ein:

1078×595 45.9 KB

Hier das ganze nochmal zum Kopieren:

DEIN-THEME ersetzt Du aber unbedingt durch den namen Deines Theme Ordners!!!

Jetzt brauchst Du nur noch eine CSS Datei, nämlich: _ your-awesome-styles.css _

Die Datei befüllst Du dann mit meinem CSS:

ul {
    list-style-position: outside;
    margin-left: 10px; /* Hier kannst Du noch mehr Einrücken, wenn Du magst!? */
}

Und jetzt ab damit…, in den richtigen Ordner:

themes/Frontend/DEIN-THEME/frontend/_public/src/css

Wenn Du alles richtige gemacht hast, dann wird es auch klappen… Wink

2 „Gefällt mir“
6

Ein “Teammanager” gibt es im Call-Center :slight_smile: Hier nennt sich das Ding: Theme Manager

Man kann auch ohne Schnickschnack einfach eine all.css in sein Theme packen:

https://developers.shopware.com/designers-guide/css-and-js-files-usage/

Viele Wege führen nach Rom.

7

Besten Dank Euch allen, ich werde mich heute wieder an die Sache setzen.

Das Thema mit den Entwicklertools im Firefox wie von @ent_dev beschrieben ist mir durchaus bekannt. So baue ich meine Drupal WebSites um… Nur in Shopware hatte das so nicht wirklich funktioniert! Ich werde mich nun mit den beiden anderen Vorschlägen von @Murmeltier und @R4M‍ befassen und berichte weiter :slight_smile:

8

Hallo wieder,

zwischenzeitlich habe ist getestet und eine schnelle und m.E. saubere Lösung war die von Murmeltier :slight_smile: und die war vor allem einfach :slight_smile: :slight_smile:

Ich habe auch den Haken bei CSS Source Map erstellen gesetzt, den Cache geleert, die Seite neu gelanden, aber mit den DEV Tools habe ich die Formatierung immer noch nicht gefunden :frowning:

Vielsten Dank noch einmal und einen schönen Tag…

9

:slight_smile: