Wie kann man am einfachsten den verwendeten HTML-Code von Dokumenten ansehen und dann das zugehörige CSS anpassen?
Wenn man die erstellten Dokumente öffnet, sind es PDFs und bei einer Vorschau wird nicht der Code von den Twig-Dateien der Dokumente angezeigt, sondern etwas anderes.
@Max_Shop, @Moritz_Naczenski und @MarkusFischer wisst ihr, wie das geht?
Hallo UXU4,
das geht nur über Programmierung sprich Templateanpassungen: https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/aenderungen-am-template-vornehmen#anpassungen-am-dokumenten-template. Dieser Artikel liefert dazu einen Ansatz.
Viele Grüße
Markus Fischer
Danke. Ich möchte die erstellten Dokumente in den Entwickler-Tools der Browser ansehen.
Da man aber nur PDFs runterladen kann, kann man nicht richtig nachvollziehen, wie der zugehörige HTML-Code und das angewandte CSS aussieht.
Wenn man das weiß, kann man die Templates viel einfacher anpassen.
Auf den Rechnungen möchte ich die Spaltenbreite anpassen und prüfen, ob #000 als Schriftfarbe angegeben ist. Das geht am einfachsten mit den Entwickler-Tools.
Wenn das Dokument erzeugt wurde, haben die verwendeten Templates keinen Einfluss mehr darauf. Daher wirst Du hier nur weiterkommen, wenn Du Dich mit entsprechenden Sourcen beschäftigst. Bei Fragen dazu wirst Du vermutlich mehr Hilfe im Entwicklerforum bekommen: https://forum.shopware.com/c/shopware-6-german/programmierung/33.
Aus dem Template wird ein HTML-Dokument erstellt und daraus ein PDF. Wo kann man sehen, wie das HTML aussieht?
Dann kann man das Template leicht anpassen, jetzt muss man die Stellen raten.
Falls das nicht einfach möglich ist, könntest du bitte einen Issue anlegen, @MarkusFischer?
Du kannst dich von hier aus durcharbeiten. Es sind nicht all zu viele Dokumente und die Struktur ist eigentlich recht klar, wenn man HTML/twig lesen kann.
@Max_Shop vielen Dank.
Ich kenne dieses Verzeichnis.
Ich habe aber nicht rausgefunden, wie ich die Spaltenbreiten schnell anpassen kann.
Ich möchte auch die Schriftgröße im Footer anpassen, damit ein normaler Mensch die Bankverbindung lesen kann und prüfen, ob für die ganzen Dokumente #000 als Schriftfarbe verwendet wird. Mit den Entwickler-Tools könnte man schnell testen, ob Änderungen angewendet werden und passen.
Das sollte Shopware viel benutzerfreundlicher machen. Es handelt sich schließlich um wichtige Dokumente, die ständig gebraucht werden.
footer {
position: fixed;
bottom: 50px;
font-size: 8px;
padding-top: 25px;
}
Bei der Tabelle musst du selbst schauen, was genau du anpassen möchtest.
Wie kann ich am einfachsten die Spalte mit den Bestellnummern kleiner und die Spalte mit den Artikelbezeichnungen breiter machen?
Ich sehe keine passenden CSS-Angaben dazu.
Die Bestellnummern-Spalte ist zu breit und die Artikelbezeichnungen-Spalte zu schmal, sodass bei vielen Artikeln mehrzeilige Angaben entstehen, obwohl es leicht in eine Zeile gehen würde.
Wenn man mehrere Artikel bestellt, kann die Rechnung schnell zweiseitig und unübersichtlicher werden.
Beim Footer kann man nicht einfach font-size anpassen, weil dort mehrere Spalten angelegt sind.
Ich habe jetzt nicht nachgesehen, aber wenn es momentan noch keine Klassen gibt, welche die Spalten unterscheiden lassen, dann musst du eben selbst solche Klassen anlegen und entsprechend per CSS formatieren.
Ich verstehe nicht genau, wie die Tabelle in platform/base.html.twig at c5caf3a0ec944e0caec347d3fb3d17950a499520 · shopware/platform · GitHub aufgebaut wird.
Man kann die Spaltenbreiten von den Bestellnummern und Artikelbezeichnungen ändern, wenn man
.line-item-table-header > th.product-number {
width: 200px;
}
.line-item-table-header > th.product-label {
width: 240px;
}
von style_base_portrait.css.twig anpasst.
th ist ja nur der head der Tabelle. Um sicher zu gehen, sollte auch das td. entsprechende Breite zugewiesen werden. Aber generell ist genau das der richtige Ansatz.
Den td-Elementen ist von Shopware keine Breite zugewiesen worden, also orientieren sie sich an den th-Elementen.
Am besten wäre es, wenn man die Dokumente mit den Entwickler-Werkzeugen der Browser untersuchen könnte (@MarkusFischer).
Hallo UX4U,
ich kann Dir leider nicht sagen, ob das so ohne Weiteres möglich wäre. Programmwünsche / Verbesserungsvorschläge könnt Ihr am besten über den öffentlichen Issuetracker (https://issues.shopware.com/) anbringen. Mehr könnte ich auch nicht tun.
Viele Grüße
Markus
Hier könnt ihr dafür stimmen, dass man in Shopware 6 den HTML-Code von Dokumenten sehen und dadurch leicht das CSS dazu anpassen kann: Show HTML code of documents – Have an idea? Share it!
Je mehr Stimmen wir haben, desto schneller ändert sich was. Also stimmt dafür!