In diesem Blogpost beschreiben wir etwas detailliert, wie man eine individualisierte Kopf-/Fußzeile für den Rapportschein erstellt. Dadurch lässt sich unter anderem auch ein eigenes Logo integrieren.
Inhalt
Für die Kopfzeile empfehlen wir das Logo, die Anschrift ihres Unternehmens, sowie einige Services. Solange Sie noch keine individuelle Kopfzeile angegeben haben, wird Ihre Anschrift bereits in die PDF generiert. Diese wird aber durch die eigene Kopfzeile ersetzt. Bei der Fußzeile können Sie angeben was Sie möchten.
Logo
Ihr Logo sollte als Base64 direkt in dem HTML hinterlegt werden. Dafür empfehlen wir das Logo auf eine Höhe von 200px runter zu skalieren. Die Kopfzeile hat eine höhe von 100px und durch die doppelte Auflösung wird das Logo immer scharf dargestellt.
Anschließend verwenden Sie die folgende Webseite base64-image.de um Ihr Logo in einen Base64 Text umzuwandeln. Nachdem das Logo hochgeladen wurde klicken Sie auf “copy image” um den Base64 Text des Logos zu erhalten.
HTML
Anschließend erstellen Sie in einer separaten Datei das HTML für die Kopf-/Fußzeilen. Den Base64 Text Ihres Logos kopieren Sie ins “src”-Attribute des “img”-Tags.
Hier Beispielhaft ein 3 spaltiges HTML-Layout für die Kopfzeile:
<div style="display: flex; font-size: 10px;">
<div style="flex: 1">
<ul style="padding-left: 20px;">
<li>
<span style="font-weight: bold">
[Leistung 1]</span><br>
<span>[Subleistungen 1]</span>
</li>
<li>
<span style="font-weight: bold">[Leistung 2]</span><br>
<span>[Subleistungen 2]</span>
</li>
<li>
<span style="font-weight: bold">[Leistung 3]</span><br>
<span>[Subleistungen 3]</span>
</li>
</ul>
</div>
<div style="flex: 1; text-align: center">
<img style="height: 100px;" src="data:image/png;base64, ...">
</div>
<div style="text-align: right; flex: 1">
<span style="font-weight: bold">[Inhaber]</span><br>
[Straße]<br>
[PLZ] [ORT]<br>
[T] [Telefon]<br>
[F] [Fax]<br>
[Email]<br>
[Webseite]<br>
[UST-ID-Nr]
</div>
</div>
Einfügen
Zum Einfügen der neuen Kopf-/Fußzeile müssen die HTML-Schnipsel nur noch in die beiden Feldern in den Einstellungen von ServiceZoid kopiert werden. Anschließend speichern und die nächsten Rapporte werden mit Ihren neuen Kopf-/Fußzeile dargestellt.
Hilfestellung
Uns ist es bewusst, dass die Erstellung von individuellen Kopf-/Fußzeile trotz dieser Anleitung für viele nicht ganz trivial ist. Ihre Web-Design-Agentur wird Ihnen bei der Erstellung helfen können.