Hintergrundgrafik in Serienbrief

Andrej

@best kann man bei margin und padding mit negativen Werten arbeiten? oder bei height mit Prozenten größer als 100%?
Wenn ja, bringt das vielleicht die gewünschte Darstellung

BeSt

Ich habe jetzt mal eine Briefvorlage in HTML / CSS erstellt (ohne ein ganzseitiges Background Image!).

Ich poste hier mal den Code - vielleicht hilft es dem einen oder anderen ja....

<!DOCTYPE HTML>

<!--

ChurchTools-Serienbrief-HTML-Template
   
Autor: Benni S., FilderGoodNews im Gemeindeverbund God in Life
Datum: 01.02.2022

-->

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>

/*-----------------------------------------------------------------
	Erst wird sämtliches HTML quasi resettet auf 'Standard-Werte'

	Diese Standardwerte sind übernommen von:

	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
-----------------------------------------------------------------*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


	/*-----------------------------------------------------------------
		Jetzt werden Vorgaben für einen Brief gesetzt, dabei wird
		die DIN-Norm 5008 verwendet, mit einigen geringfügigen 
		Anpassungen - dabei wird der umlaufende Rand von 10mm, den
		ChurchTools immer vorgibt, berücksichtigt

		Ausgangspunkt für die Vorlage ist dabei dieses GitHub-Projekt:
		https://github.com/hennerthepenner/html-dinbrief
	-----------------------------------------------------------------*/

	body {
		margin: 0mm 5mm 35mm 12mm !important;
		font-size: 10pt;
		line-height: 4.23mm;
		/* border: 1px solid red; */
	}

	#briefkopf {
		height: 38mm;
		width: 100%;
		overflow: hidden;
		/* border: 1px solid green; */
	}
	
	#gemeindelogo {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50mm;
	}

	#absender {
		font-size: 7pt;
		height: 5mm;
		top: 0.8mm;
		/* border: 1px solid blue; */
	}

	#anschriftenfeld {
		width: 85mm;
		height: 40mm;
		overflow: hidden;
		/* border: 1px solid yellow; */
	}

	#bezugszeichenzeile {
		width: 100%;
		height: 10mm;
		/* border: 1px solid black; */
	}

	#bezugszeichenzeile #leitwort {
		font-weight: bold;
	}

	#betreff {
		margin-top: 8mm;
		height: 5mm;
		font-weight: bold;
		/* border: 1px solid lightblue; */
	}

	#text {
		margin-top: 10mm;
		/* border: 1px solid darkred; */
		text-align: justify;
	}
	
	#footer {
		position: fixed;
		bottom: 0;
		height: 15mm;
		width: 100%;
		/* border: 1px solid gray; */
	}
	
	#footerimage {
		display: block;
		height: 12.7mm;
	}
  
	</style>
</head>
<body>
  
	<div id="briefkopf">
		<img id="gemeindelogo" src="data:image/png;base64,[base64 encoded Image]" />
	</div>

	<div id="absender">
		{{sitename}} - Gemeindename, Gemeindeweg 123, 12345 Gemeindestadt
	</div>

	<div id="anschriftenfeld">
		<!-- Insgesamt neun Zeilen. -->

		<!-- Drei Zeilen für Zusätze und Vermerke, z.B.
			 Beförderungsvermerke wie "Eilzustellung", "persönlich", 
			 "Einschreiben", "Warensendung", "Nicht nachsenden", "Luftpost" usw.
			 Gegebenenfalls bleiben diese drei Zeilen leer. -->
		
		<!-- Eilzustellung<br/> -->
		<!-- persönlich<br/>-->
		<!-- Einschreiben<br/>-->

		<!-- Name bzw. Firma -->
		{{firstname}} {{lastname}}<br/>

		<!-- Namenszusatz oder Straße und Hausnummer oder Postfach -->
		{{street}}<br/>

		<!-- Straße und Hausnummer oder Postfach oder PLZ und Ort -->
		{{postalcode}} {{city}}
	</div>

	<table id="bezugszeichenzeile">
		<tr id="leitwort">
			<td id="ihr-zeichen">
			<!-- Ihr Zeichen oder Ihre Nachricht vom -->
			&nbsp;
			</td>
			<td id="unser-zeichen">
			<!-- Unser Zeichen oder Unsere Nachricht vom -->
			&nbsp;
			</td>
			<td id="ansprechpartner">
			<!-- Name, Telefon, Telefax, E-Mail, Internet -->
			&nbsp;
			</td>
			<td id="datum" style="text-align: right;">
			<!-- Datum -->
			Datum
			</td>
		</tr>
		<tr id="inhalt">
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td style="text-align: right;">{{currentDate}}</td>
		</tr>
	</table>

	<div id="betreff">
		{{titel}}
	</div>

	<div id="text">
		{{content}}
	</div>
  
	<div id="footer">
		<img id="footerimage" src="data:image/png;base64,[base64 encoded Image]" />
	</div>

</body>

Ein Nachteil hat dieses Template:
Für einen einseitigen Brief funktioniert das recht gut. Aber sobald der Brieftext auf eine zweite Seite umgebrochen werden muss, geht das Layout in die Hose. Grund ist, dass das <div id="text"> ja nicht weiß, wo die erste Seite aufhört und die zweite anfängt. Es ist einfach ein langes div. Und ChurchTools baut da irgendwo den Seitenumbruch bei der PDF-Erstellung ein. Und dieser Seitenumbruch ist immer bei den oben schon erwähnten fixen 10mm Seitenrand. Der Text läuft also auf der ersten Seite über den Footer. Und egal, was im <body>-Tag als Margin für Bottom definiert ist, der Umbruch erfolgt immer erst bei 10mm.

@chuchtools: Ist das irgendwie individualisierbar?

bwl21

@best sagte in Hintergrundgrafik in Serienbrief:

Ein Nachteil hat dieses Template:
Für einen einseitigen Brief funktioniert das recht gut. Aber sobald der Brieftext auf eine zweite Seite umgebrochen werden muss, geht das Layout in die Hose. Grund ist, dass das <div id="text"> ja nicht weiß, wo die erste Seite aufhört und die zweite anfängt. Es ist einfach ein langes div. Und ChurchTools baut da irgendwo den Seitenumbruch bei der PDF-Erstellung ein. Und dieser Seitenumbruch ist immer bei den oben schon erwähnten fixen 10mm Seitenrand. Der Text läuft also auf der ersten Seite über den Footer. Und egal, was im <body>-Tag als Margin für Bottom definiert ist, der Umbruch erfolgt immer erst bei 10mm.

wir machen das so, dass wir den Zeilenumbruch von Hand einbringen. Z.b. ein Paragraph mit entsprechender klasse, oder ein <hr> oder was auch immer.

BeSt

@bwl21 Wie sage ich denn in HTML / CSS, dass ein Seitenumbruch erfolgen soll? Das kennen diese Sprachen doch gar nicht, oder??

bwl21

@best schau mal hier
https://forum.church.tools/topic/7533/mehrseitige-serienbriefe-nochmal-gefragt/7?_=1643791578557

BeSt

@bwl21 Vielen Dank für den Schubs zu diesem Posting.

Dann habe ich aber noch eine Frage: Wie kann ich im Wiki einen Serienbrief schreiben und dann das HTML in den Serienbrief kopieren. Ich habe dann immer im PDF des Serienbriefs die HTML-Tags im Klartext, nicht das ausgewertete HTML.

Irgendwie fehlt mir da noch der Kniff, wie das geht.

bwl21

@best Wir machen das gerade so, dass wir im Wiki den Brief schreiben - redigieren, abstimmen usw. und am Ende kopieren wir ihn in den Serienbrief rein. Du musst die HTML-Ausgabe aus dem Wiki (nicht den Quelltext) kopieren.

Manchmal nehm ich sogar einen externen Editor (typora) her, und schreibe den Inhalt zunächst in Markdown.

BeSt

@bwl21 Ok, aber wie bekomme ich dann den HTML-Code

<p class="bgk__pagebreak">Seite 2</p>

für den Seitenumbruch rein, so dass er ausgewertet, und nicht als PlainText in dem PDF auftaucht?

Gelöst Hintergrundgrafik in Serienbrief