> For the complete documentation index, see [llms.txt](https://docs.hubyte.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hubyte.de/pdf-dokumenten-template-bearbeiten/english-documentation/dokument-bloecke.md).

# Document blocks (content & styles)

The card **"Custom document (general settings)"** divides the document into six sections. For each section you can define your own **content** (rich text) and your own **CSS** (style). Use the dropdown to select the block to edit.

<figure><img src="/files/VLX3abcd0UpRDZBwGiIs" alt=""><figcaption></figcaption></figure>

## The six blocks

<figure><img src="/files/yIGwMgLAQPEGnrmVTWLQ" alt=""><figcaption></figcaption></figure>

| Block             | Position in the document   | Applies in the template to                            |
| ----------------- | -------------------------- | ----------------------------------------------------- |
| **Letter Header** | Top header area            | `header { … }`                                        |
| **Receiver**      | Receiver/delivery address  | `.recipient-address-container { … }`                  |
| **Sender**        | Sender line                | `.sender-address-container { … }`                     |
| **Positions**     | Above the line items table | `.hue-costom-document__positions`, `.line-item-table` |
| **Summary**       | Totals area                | `.payment-shipping-container { … }`                   |
| **Letter Footer** | Bottom footer area         | `footer { … }`                                        |

## Content (rich text)

The content field is a rich text editor. The entered content is inserted at the respective position in the document:

* **Letter header, receiver, sender, positions, summary, footer** – Add e.g. additional texts, notices, logos (as HTML) or legal information here.
* If content is set for the **footer**, it replaces the entire standard Shopware footer (four columns). Leave the field empty to keep the standard footer.
* The **positions** content is rendered **above** the line items table.
* The **summary** content is added **inside** the payment/shipping area.

> **Note:** The content is embedded as HTML (`raw`). You can therefore use HTML markup. Make sure the markup is valid and properly closed so the PDF renders correctly.

## Style (CSS)

The style field is a code editor. The CSS entered is written into the document's `<style>` block and applied to the respective container (see table above). You only write the **CSS rules** (properties), not the selector – the latter is set automatically by the plugin.

**Example – letter header (block "Letter Header"):**

```css
text-align: center;
padding-bottom: 20px;
border-bottom: 2px solid #000;
```

This produces in the document:

```css
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #000;
}
```

**Example – receiver address (block "Receiver"):**

```css
font-size: 11px;
line-height: 1.4;
color: #333;
```

## Language switcher

Content and styles are stored **per language**. Use the language switcher (top right of the card) to change the language. When switching, the values stored for that language are loaded.

> **Tip:** Save your changes before switching the language so no input is lost.

## Hide delivery date

Using the **"Hide delivery date"** switch (top of the card) you can hide the delivery date in the document. The setting is stored per document configuration.