Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -8,11 +8,17 @@
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
...	...	@@ -22,10 +22,8 @@
22	22
23	23	{{code language="css"}}
24	24	.modern .XHeader {
25		- background-color: transparent;
26		- background-image: url('../../../formcycle/form/includes/ressource?pid=1234&name=headerbild.png');
27		- background-size: 100% 100%;
28		- background-repeat: no-repeat;
	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 */
29	29	}
30	30	{{/code}}
31	31
...	...	@@ -35,8 +35,8 @@
35	35
36	36	{{code language="css"}}
37	37	.XHeader {
38		- background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=);
39		- 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 */
40	40	background-position-x: 10px; /* Positionierung in horizontaler Richtung */
41	41	background-position-y: 10px; /* Positionierung in vertikaler Richtung */
42	42	background-size: auto 40px; /* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */