# Dokumenten-Template CSS anpassen

**URL:** <https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919>\
**Category:** Allgemein\
**Created:** [29. September 2020 um 14:23 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919 "2020-09-29T14:23:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [29. September 2020 um 14:23 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/1 "2020-09-29T14:23:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Moritz\_Naczenski](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/moritz_naczenski/32/7792_2.png) [@Moritz\_Naczenski](https://forum.shopware.com/u/Moritz_Naczenski)\
**Post date:** [29. September 2020 um 15:41 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/2 "2020-09-29T15:41:25Z")

</div>

Hat so bei mir funktioniert:&nbsp;[SwagDocumentTemplate/style\_base\_portrait.css.twig at master · mnaczenski/SwagDocumentTemplate · GitHub](https://github.com/mnaczenski/SwagDocumentTemplate/blob/master/src/Resources/views/documents/style_base_portrait.css.twig)

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [29. September 2020 um 18:42 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/3 "2020-09-29T18:42:27Z")

</div>

> [@Moritz Naczenski schrieb:](https://forum.shopware.com/profile/14574/Moritz%20Naczenski "Moritz%20Naczenski")
> 
> Hat so bei mir funktioniert:&nbsp;[https://github.com/mnaczenski/SwagDocumentTemplate/blob/master/src/Resources/views/documents/style\_base\_portrait.css.twig](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:

&nbsp;

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

```

bringt leider kein Ergebnis.

&nbsp;

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/c/cbd7159ec6b9ab6a465f3813d78f3ee7a053c2c6.png)

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [20. Oktober 2020 um 21:52 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/4 "2020-10-20T21:52:54Z")

</div>

Das muss doch irgendwie beinflussbar sein?

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [1. Januar 2021 um 17:15 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/5 "2021-01-01T17:15:48Z")

</div>

Keiner eine Idee?

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [20. Januar 2021 um 15:17 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/6 "2021-01-20T15:17:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [5. Mai 2021 um 09:32 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/7 "2021-05-05T09:32:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gluckseule](https://avatars.discourse-cdn.com/v4/letter/g/90ced4/32.png) [@Gluckseule](https://forum.shopware.com/u/Gluckseule)\
**Post date:** [25. August 2021 um 14:07 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/8 "2021-08-25T14:07:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [25. August 2021 um 19:43 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/9 "2021-08-25T19:43:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gluckseule](https://avatars.discourse-cdn.com/v4/letter/g/90ced4/32.png) [@Gluckseule](https://forum.shopware.com/u/Gluckseule)\
**Post date:** [26. August 2021 um 06:20 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/10 "2021-08-26T06:20:57Z")

</div>

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:

```auto

    .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

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [26. August 2021 um 08:16 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/11 "2021-08-26T08:16:51Z")

</div>

Vielen Dank, das hat auch bei mir funktioniert!

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [27. November 2023 um 09:54 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/12 "2023-11-27T09:54:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [6. Dezember 2023 um 15:31 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/13 "2023-12-06T15:31:54Z")

</div>

Niemand? Vielleicht jemand vom Shopware-Team?

---

<div class="post-metadata">

**Author:** ![wtjsh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wtjsh/32/10500_2.png) [@wtjsh](https://forum.shopware.com/u/wtjsh)\
**Post date:** [31. Januar 2024 um 08:59 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/14 "2024-01-31T08:59:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![graffito](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/graffito/32/24053_2.png) [@graffito](https://forum.shopware.com/u/graffito)\
**Post date:** [23. Mai 2024 um 12:15 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/15 "2024-05-23T12:15:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [23. Mai 2024 um 12:36 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/16 "2024-05-23T12:36:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![graffito](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/graffito/32/24053_2.png) [@graffito](https://forum.shopware.com/u/graffito)\
**Post date:** [23. Mai 2024 um 13:08 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/17 "2024-05-23T13:08:35Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![tiefseh1](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@tiefseh1](https://forum.shopware.com/u/tiefseh1)\
**Post date:** [26. Juni 2024 um 09:43 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/18 "2024-06-26T09:43:06Z")

</div>

Hallo graffito

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

Besten Dank

---

<div class="post-metadata">

**Author:** ![graffito](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/graffito/32/24053_2.png) [@graffito](https://forum.shopware.com/u/graffito)\
**Post date:** [26. Juni 2024 um 10:00 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/19 "2024-06-26T10:00:37Z")

</div>

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

```auto
{% 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:

```auto
    {% 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

---

<div class="post-metadata">

**Author:** ![tiefseh1](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@tiefseh1](https://forum.shopware.com/u/tiefseh1)\
**Post date:** [26. Juni 2024 um 14:41 UTC](https://forum.shopware.com/t/dokumenten-template-css-anpassen/69919/20 "2024-06-26T14:41:51Z")

</div>

Oh ja. Klappt super. Allerbesten Dank!
