Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

...	...	@@ -8,21 +8,28 @@
8	8
9	9	=== Verwenden eines extern gehosteten Bildes ===
10	10
	11	+Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
	12	+
11	11	{{code language="css"}}
12		-FORM.xm-form { /* Selektiert das gesamte Formular */
13		- font-size: 16px; /* Setzt die Basisschriftgröße. */
14		- color: #111; /* Setzt die Default-Schriftfarbe. */
15		- font-family: Arial; /* Setzt die Default-Schriftart. */
	14	+.modern .XHeader {
	15	+ background-image: url('https://beispiel.de/pfad/zum/bild/logo.png'); /* Auswählen des Bildes per URL */
	16	+ /* Positionierung des Bildes */
	17	+ background-size: auto 25px; /* Das Bild hat 25 Pixel Höhe und die Breite wird automatisch passend zum Seitenverhältnis des Bildes ermittelt */
	18	+ padding-top: 60px; /* Die Höhe des Headers wird auf 60 Pixel festgelegt */
	19	+ background-repeat: no-repeat; /* Das Bild wird nur einmal angezeigt */
	20	+ background-position-x: calc(100% - 30px); /* Das Bild wird 30 Pixel vom rechten Rand positioniert */
	21	+ background-position-y: 20px; /* Das Bild wird 20 Pixel vom oberen Rand positioniert */
16	16	}
17	17	{{/code}}
18	18
19	19	=== Verwenden einer Mandant- oder Formularressource ===
20	20
	27	+Für das Anzeigen eines als Formularressource hochgeladenen Bilddatei {{code language="none"}}headerbild.png{{/code}} mit dem Namen über die gesamte Headergröße eines Formulars mit der ID {{code language="none"}}1234{{/code}} kann folgender Code verwendet werden:
	28	+
21	21	{{code language="css"}}
22		-FORM.xm-form { /* Selektiert das gesamte Formular */
23		- font-size: 16px; /* Setzt die Basisschriftgröße. */
24		- color: #111; /* Setzt die Default-Schriftfarbe. */
25		- font-family: Arial; /* Setzt die Default-Schriftart. */
	30	+.modern .XHeader {
	31	+ background-image: url('../../../formcycle/form/includes/ressource?pid=1234&name=headerbild.png'); /* Auswählen des Bildes per relativer URL zur Formularressource */
	32	+ background-size: 100% 100%; /* Bild über die gesamte Headergröße zeichnen */
26	26	}
27	27	{{/code}}
28	28
...	...	@@ -32,8 +32,8 @@
32	32
33	33	{{code language="css"}}
34	34	.XHeader {
35		- background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=);
36		- background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
	42	+ background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=); /* Auswahl eines Bildes per Base64-String*/
	43	+ background-repeat: no-repeat; /* Das Bild wird nur einmal angezeigt */
37	37	background-position-x: 10px; /* Positionierung in horizontaler Richtung */
38	38	background-position-y: 10px; /* Positionierung in vertikaler Richtung */
39	39	background-size: auto 40px; /* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */