Dokumenten-Template CSS anpassen

Shopware 6 (German) Allgemein
1

Hallo,

wie ändere ich denn z. B. die style_base_portrait.css.twig um Änderungen an den PDFs wie Rechnung/Lieferschein zu machen? Ich habe mir eine eigene style_base_portrait.css.twig in custom/plugins/meintheme/src/resources/views/documents/ angelegt.

{% sw_extends ‘@Framework/documents/style_base_portrait.css.twig’ %}

…

Ist das so korrekt? Aus irgendeinem Grund erstellt er mir so keine Dokumente mehr.

2

Hat so bei mir funktioniert: SwagDocumentTemplate/style_base_portrait.css.twig at master · mnaczenski/SwagDocumentTemplate · GitHub

1 „Gefällt mir“
3

@Moritz Naczenski schrieb:

Hat so bei mir funktioniert: https://github.com/mnaczenski/SwagDocumentTemplate/blob/master/src/Resources/views/documents/style_base_portrait.css.twig

Danke für Deine Anwort. Bin ich also nicht ganz falsch mit meiner Datei. Allerdings greift dort nicht alles, z. B. steht ja der Block .sum-container (wie auch .sender-address-container) standardmäßig nicht richtig rechtsbündig (warum auch immer), aber man kann ihn auch nicht verschieben:

 

 .sum-container {
	    right: 0;
	    margin-right: 0;
        padding-right: 0;
        position: absolute;
    }

bringt leider kein Ergebnis.

 

514×622 17.3 KB

4

Das muss doch irgendwie beinflussbar sein?

5

Keiner eine Idee?

6

Ich muss hier noch mal pushen - der Block will einfach nicht nach rechts…

    .sum-container {
	    right: 0 !important;
	    margin-right: 0 !important;
        padding-right: 0 !important;
        position: absolute !important;
    }

Übersehe ich da etwas?

7

Kann da niemand helfen? Was ist los mit dem .sum-container, dass er da so komisch angeordnet ist?

8

Hatte das gleiche Problem, dass das CSS da einfach nicht greifen wollte.
Hab dann den ganzen Block überschrieben, dem sum-container eine eigene Klasse gegeben und da mein CSS drauf angewendet.

9

Hi @Gluckseule - vielen Dank für Deine Antwort. Kannst Du mir das bitte etwas genauer beschreiben? Das wäre sehr nett! Danke vorab!

10

Du invoice.html.twig im views/documents-Ordner deines eigenen Themes anlegen, dann die originale invoice.html.twig extenden und den {% block document_sum %} (zu finden unter documents/includes/summary.html.twig) dort einfach komplett reinkopieren, nur die Klassen der ersten beiden Divs ändern zu div class=custom-sum-container und
table class=custom-sum-table.

Dann den Style in deiner Datei einfügen:


    .custom-sum-container {
        margin-top: 20px;
        text-align: right;
        float: right;
        right: 0 !important;
    }
    .custom-sum-table {
        border-spacing: 0 !important;
    }

hat für mich funktioniert

2 „Gefällt mir“
11

Vielen Dank, das hat auch bei mir funktioniert!

12

Nach dem Update auf 6.5.7.2 wird die CSS-Datei ignoriert.

{% sw_extends ‚@Framework/documents/style_base_portrait.css.twig‘ %}

Hat jemand eine Ahnung, warum? Wir haben jetzt total zerlegte Lieferscheine/Rechnungen.

13

Niemand? Vielleicht jemand vom Shopware-Team?

14

ich stehe vor dem gleichen Problem und benötige ebenso Hilfe

15

Ja, bei mir wird das auch ignoriert. Hiiiilfe :slight_smile:
Shopware 6.6.1.2

16

Zufällig bin ich auch eben beim Anpassen, aber bei mir wird die style_base_portrait.css.twig nicht ignoriert. Zumindest was die Version 6.5.8.9 betriffft.

17

In der Zwischenzeit sieht es so aus als würde die style_base_portrait.css.twig als Ganzes gar nicht ignoriert.

Aber bestimmte Änderungen greifen einfach nicht. Wie z.B. die Schriftgröße ändern bei body. Footer Schriftgröße geht z.B. wieder.

Den Font überhaupt zu ändern geht bei mir in der base.html.twig auch nicht. Angezeigt wird aber auch ohne mein extended template standardmäßig nicht der voreingestellte Google Font (Source Sans Pro). Sondern eine Standard-Serifenschrift. Die Source Sans ist serifenlos.

Wie kann ich hier debuggen? Wäre das HTML dann wär es leichter, aber im PDF kann ich ja gar keinen „Quellcode“ sehen…

18

Hallo graffito

ich habe das gleiche Problem. Konntest du inzwischen die Dokumentenschrift zu einer sans-serif ändern? Wenn ja wie?

Besten Dank

19

Also den Font in der /documents/base.html.twig hier zu ändern brachte bei mir nichts:

{% block document_font_links %}
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
{% endblock %}

Ich habe dann die style_base_portrait.css.twig neu referenziert und angepasst wie folgt:

    {% block document_style %}
   
        @font-face {
              font-family: 'Open Sans';
              src: url('/theme/018f527f7c6a71f4a6d3b14126dbc9f3/assets/fonts/OpenSans-VariableFont.ttf') format ('truetype-variations');
              font-weight: 100 1000;
              font-stretch: 25% 151%;
            }
.....

Die Url hab ich aus dem Web-Inspector des Browsers.

Und dann entsprechend die CSS-Styles in der Datei angepasst auf den Font Open Sans.

LG Andi

20

Oh ja. Klappt super. Allerbesten Dank!

1 „Gefällt mir“