... | ... | @@ -46,15 +46,51 @@ Bitte für die Social Icons keine FontAwesome Icons benutzen! Stattdessen sollen |
|
|
|
|
|
|
|
|
### 1.2 Einschränkungen
|
|
|
Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` gesetzt wird, wird immer in einem Container platziert (siehe **Screenshot 2** - rot markiert). Das heißt man hat an dieser Stelle automatisch den Abstand von links und rechts genauso wie der Header und Footer. Möchte man jedoch das Template etwas erweitern, neue Abschnitte (Sections) mit eventuell anderer Hintergrundfarbe verwenden, ist das etwas aufwändiger. Siehe dazu den nächsten Abschnitt.
|
|
|
Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` gesetzt wird, wird immer in einem Block platziert (siehe **Screenshot 2** - rot markiert). Das heißt man hat an dieser Stelle automatisch den Abstand von links und rechts genauso wie der Header und Footer. Auch für den Abstand von oben und unten sorgt der Block automatisch. Möchte man jedoch das Template erweitern, neue Blöcke (*sections*) mit eventuell anderer Hintergrundfarbe verwenden, ist das etwas aufwändiger. Siehe dazu den nächsten Abschnitt.
|
|
|
|
|
|
**Screenshot 2 - Einschränkungen**
|
|
|
|
|
|
![image](uploads/727ab3be27e172a4b94ac5de6e3d9995/image.png)
|
|
|
|
|
|
## 2. Template überschreiben - weitere Email Layouts
|
|
|
|
|
|
Möchte man die E-Mails für z.B. Newsletter schöner machen oder passende Buttons hinzufügen, kann man die `quiqqer/quiqqer/lib/template/mail/body.html` Datei überschreiben und mit weiterem Code erweitern:
|
|
|
## 2. Template überschreiben - weitere Layouts
|
|
|
|
|
|
Möchte man die Emails neu gestalten bzw komplett überarbeiten (z.B. für Newsletter) hat man dazu 2 Möglichkeiten:
|
|
|
1. Template Events verwenden,
|
|
|
2. HTML Template im Projekt / Paket überschreiben.
|
|
|
|
|
|
### 2.1 Template Events
|
|
|
QUIQQER bietet die Möglichkeit auch in Templates an bestimmten Stellen eingreifen zu können. Dafür sind in den 3 Template-Dateien die Template Events eingeführt worden:
|
|
|
1. `header.html`
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::headerHeadEnd"}*
|
|
|
2. `body.html`
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::bodyBegin"}*
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::bodyAfterHeader"}*
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::bodyEnd"}*
|
|
|
3. `footer.html`
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::footerBegin"}*
|
|
|
- *{template_event name="quiqqer::quiqqer::mail::footerEnd"}*
|
|
|
|
|
|
Somit ist es möglich diese Stellen mit eigenen Templates / HTML zu erweitern. Mehr zu diesem Thema siehe [Template Events](function_template_event). Code Beispiele für verschiedene Block Layouts siehe weiter unten in **Abschnitt 3**.
|
|
|
|
|
|
### 2.2. HTML Template überschreiben
|
|
|
Die Email Templates befinden sich in Haupt QUIQQER Paket unter `quiqqer/lib/template/mail/`. Möchte man z.B. die `body.html` ändern, muss in gewünschtem Paket (oder in `user` Ordner) neue Datei angelegt werden:
|
|
|
|
|
|
```bash
|
|
|
quiqqer/lib/template/mail/body.html
|
|
|
```
|
|
|
Mehr zum Thema "Template überschreiben" siehe [Template Überschreiben](template_overwrite). Beispiele für verschiedene Block Layouts siehe unten in **Abschnitt 3**.
|
|
|
|
|
|
**Wichtig:** wenn kein Body gesetzt wird (`setBody()`), dann wird der Block für Body nicht generiert. Somit entsteht keine unschöne leere Lücke zwischen eigenen über **Template Events** hinzugefügten Blöcken.
|
|
|
|
|
|
|
|
|
## 3. Beispiel für weitere Layouts
|
|
|
|
|
|
**Screenshot 3 - Beispiel für weitere Layouts**
|
|
|
|
|
|
![screencapture-webmail-pcsg-de-2018-12-10-23_33_20](uploads/deaa0a5568a767d182fc1bbb527280d8/screencapture-webmail-pcsg-de-2018-12-10-23_33_20.png)
|
|
|
|
|
|
**Code Beispiel - Layouts**
|
|
|
```html
|
|
|
<!-- ONE COLUMN SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
... | ... | @@ -426,6 +462,4 @@ Möchte man die E-Mails für z.B. Newsletter schöner machen oder passende Butto |
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
```
|
|
|
|
|
|
![screencapture-webmail-pcsg-de-2018-12-10-23_33_20](uploads/deaa0a5568a767d182fc1bbb527280d8/screencapture-webmail-pcsg-de-2018-12-10-23_33_20.png) |
|
|
\ No newline at end of file |
|
|
``` |
|
|
\ No newline at end of file |