Verstecke letzte Bearbeiter
gru 6.23 1 Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt.
gru 1.1 2
gru 4.1 3 {{content/}}
4
gru 4.2 5 == Einfügen einer Grafik im Formularheader ==
gru 4.1 6
gru 6.23 7 Für das Einfügen einer Grafik im auf allen Formularseiten sichtbaren Headerbereich des Formulars sollen im folgenden 3 verschiedene Möglichkeiten vorgestellt werden. Die hier gezeigten Beispiele müssen im [[CSS-Bereich>>Formcycle.FormDesigner.CodingPanel.CSSTab]] des Designers, in einem [[Design>>Formcycle.UserInterface.FilesAndTemplates.Design]] oder in einer //.css//-Datei im Formular oder Mandanten eingefügt werden.
gru 4.1 8
gru 4.3 9 === Verwenden eines extern gehosteten Bildes ===
gru 4.2 10
gru 6.26 11 Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
gru 6.25 12
gru 4.2 13 {{code language="css"}}
gru 6.25 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 */
gru 6.26 17 background-size: auto 25px; /* Das Bild hat 25 Pixel Höhe und die Breite wird automatisch passend zum Seitenverhältnis des Bildes ermittelt */
gru 6.28 18 height: 60px; /* Die Höhe des Headers wird auf 60 Pixel festgelegt */
gru 6.25 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 */
gru 4.2 22 }
23 {{/code}}
24
25 === Verwenden einer Mandant- oder Formularressource ===
26
gru 6.24 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
gru 4.2 29 {{code language="css"}}
gru 6.24 30 .modern .XHeader {
gru 6.25 31 background-image: url('../../../formcycle/form/includes/ressource?pid=1234&name=headerbild.png'); /* Auswählen des Bildes per relativer URL zur Formularressource */
gru 6.27 32 background-size: 100% 100%; /* Bild über die gesamte Headergröße zeichnen */
gru 4.2 33 }
34 {{/code}}
35
gru 6.7 36 === Einfügen als Base64-String ===
37
38 Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
39
40 {{code language="css"}}
gru 6.12 41 .XHeader {
gru 6.27 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 */
gru 6.9 44 background-position-x: 10px; /* Positionierung in horizontaler Richtung */
45 background-position-y: 10px; /* Positionierung in vertikaler Richtung */
46 background-size: auto 40px; /* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */
47 height: 60px; /* Gesamthöhe des Formularheaders */
gru 6.7 48 }
49 {{/code}}
50
51 Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
52
53 Zu beachten ist hierbei, dass bei der Einbindung des Bildes als base64-String bei jedem Aufruf des Formulars das Bild erneut mitübertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen.
54
gru 4.1 55 == Anpassungen des Schriftbildes ==
56
gru 6.13 57 Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann bei Verwendung des //Modern Themes// folgender CSS-Code als Grundlage genommen werden:
gru 4.1 58
gru 3.1 59 {{code language="css"}}
gru 6.13 60 .xm-form.modern *, .modern .XPage * { /* Selektiert das gesamte Formular und alle Formularseiten*/
gru 6.16 61 font-family: Verdana; /* Setzt die Default-Schriftart. */
gru 1.1 62 }
63 {{/code}}
gru 4.1 64
gru 6.15 65 Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. Dies kann für die entsprechenden Se
gru 4.1 66
67 {{code language="css"}}
gru 6.15 68 .modern .xm-item-div LABEL {
69 font-size: 14px; /* Setzt die Schriftgröße. */
70 color: #111; /* Setzt die Schriftfarbe. */
gru 6.14 71 }
gru 4.1 72 {{/code}}
73
gru 6.6 74 {{velocity}}
gru 6.8 75 ##Hierbei ist insbesondere darauf zu achten, dass die CSS-Regeln mindestens so spezifisch sind, wie es das grundlegende Formular-Theme vorgibt.
76 ##
gru 6.10 77 ##Zu beachten ist hierbei, dass Formularseiten durch das Hinzufügen von Titel und Untertitel unterhalb des auf allen Seiten sichtbareneigentlichen
78 ##
gru 6.6 79 ##Print-PDF-Plugin: Spezialfall
80 ##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
81 {{/velocity}}
gru 4.1 82
gru 5.1 83 == Anpassen des Favicons ==
gru 4.3 84
gru 6.4 85 Um in einem Formular das Favicon zu verändern, kann im Meta-Bereich die Position der zu verwendenen Bildes angegeben werden. Dies erfolgt nach folgendem Muster:
gru 5.1 86
gru 6.4 87 {{code language="html"}}
gru 6.5 88 <link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild.png" />
gru 6.4 89 {{/code}}
gru 5.1 90
gru 6.4 91 Wenn das Favicon als Formularressource unter Dateien hochgeladen wurde, könnte der entsprechende Code für ein Formular mit der ID {{code language="none"}}1234{{/code}} und einer Größe von 32 mal 32 Pixeln wie folgt aussehen:
92
gru 5.1 93 {{code language="html"}}
gru 6.4 94 <link rel="shortcut icon" type="image/png" sizes="32x32" href="../../../form/includes/ressource?pid=1234&name=favicondemo.png" />
gru 5.1 95 {{/code}}
96
gru 6.3 97 {{velocity}}
98 ##Anstelle des Links kann wahlweise auch direkt eine base64-Repräsentation des Bildes verwendet werden:
99 ##
100 ##{{code language="html"}}
101 ##<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAOvr6wDr6+sD6+vrN+vr65Lr6+vS6+vr7Ovr6+vr6+vP6+vrjevr6zPr6+sC6+vrAAAAAAAAAAAA6+vrAPX19gD29vcP8PDwfe3t7eXr6+v/6+vr/+3t7f/t7e3/6+vr/+vr6/7r6+vi6+vrduvr6w3r6+sAAAAAAOvr6wD29vYP2NjXnMTEwvzNzcv/6urq/+Pj4v/ExML/ysvJ/+np6f/r6+v/6+vr/+vr6/vr6+uU6+vrDOvr6wDr6+sB7e3te9jZ1/xtb2b/X2JY/8vLyf/Oz83/W11T/3N2bf/j4+P/6+vs/+vr6//r6+v/6+vr+uvr63Lr6+sA6+vrNOvr6+Lt7e3/qqum/05RRv+GiIH/x8fF/1ZZT/9vcmn/4+Pi/+zs7P/r6+v/6+vr/+vr6//r6+vc6+vrLevr64zr6+v/7Ozs/+Hh4P92eHD/VVdN/5qblf9YW1D/cHJp/+Pj4//s7Oz/6+vr/+vr6//r6+v/6+vr/uvr64Dr6+vM6+vr/+vr6//t7e3/vb26/1VYTv9sbmX/VllP/25xaP/d3dz/5ubl/+Xl5f/m5ub/6urq/+vr6//r6+vA6+vr5+vr6//r6+v/6+vr/+jo6P+GiIH/Zmhf/1daUP9WWU//cnRr/3R2bf9ydWz/hYeA/9/f3//s7Oz/6+vr3evr6+br6+v/6+vr/+vr6//o6Oj/hoiB/2RnXf9XWk//VVhN/2xvZv9ucGf/bW9m/4CCev/f397/7Ozs/+vr69zr6+vJ6+vr/+vr6//t7e3/vb67/1VYTv9pbGP/VllO/25waP/b29r/4+Pj/+Pj4v/k5OT/6urq/+vr6//r6+u+6+vrh+vr6/7s7Oz/4eHh/3d5cf9VWE3/m52X/1hbUf9vcWn/4ODf/+np6P/o6Oj/6Ojo/+rq6v/r6+v96+vre+vr6zDr6+ve7Ozs/6mqpv9NUEX/hoiB/8fHxf9WWU//VllP/3h6cv96fHT/enx0/3p8dP/Bwr//7e3t2Ovr6yjr6+sA7Ozsc+Li4vqPkIr/eXtz/8zMyv/T09L/cnVs/2psY/9oa2H/aGth/2hrYf9pa2L/ubq2+PDw8Wrr6+sA6+vrAO3t7Qzp6emS5eXl+ubm5v/r6+v/6enp/+Dg3//f4N//3+Df/9/g3//f4N//39/f+ePj4orx8fEJ6+vrAAAAAADs7OwA7OzsDOzs7HHr6+ve6+vr/uvr6//s7Oz/7Ozs/+zs7P/s7Oz97Ozs2+3t7Wvy8vIJ8PDwAAAAAAAAAAAAAAAAAOvr6wDr6+sC6+vrLevr64Pr6+vE6+vr4Ovr6+Dr6+vC6+vrf+vr6ynr6+sB6+vrAAAAAAAAAAAA4AcAAMADAACAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAIABAADAAwAA4AcAAA==">
102 ##{{/code}}
103 {{/velocity}}

Navigation

Copyright 2000-2025