Wiki source code of Stilanpassungen an Formularen
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt. | ||
| 2 | |||
| 3 | {{content/}} | ||
| 4 | |||
| 5 | == Einfügen einer Grafik im Formularheader == | ||
| 6 | |||
| 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. | ||
| 8 | |||
| 9 | === Verwenden eines extern gehosteten Bildes === | ||
| 10 | |||
| 11 | Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden: | ||
| 12 | |||
| 13 | {{code language="css"}} | ||
| 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 | height: 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 */ | ||
| 22 | } | ||
| 23 | {{/code}} | ||
| 24 | |||
| 25 | === Verwenden einer Mandant- oder Formularressource === | ||
| 26 | |||
| 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 | |||
| 29 | {{code language="css"}} | ||
| 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 */ | ||
| 33 | } | ||
| 34 | {{/code}} | ||
| 35 | |||
| 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"}} | ||
| 41 | .XHeader { | ||
| 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 */ | ||
| 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 */ | ||
| 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 | |||
| 55 | == Anpassungen des Schriftbildes == | ||
| 56 | |||
| 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: | ||
| 58 | |||
| 59 | {{code language="css"}} | ||
| 60 | .xm-form.modern *, .modern .XPage * { /* Selektiert das gesamte Formular und alle Formularseiten*/ | ||
| 61 | font-family: Verdana; /* Setzt die Default-Schriftart. */ | ||
| 62 | } | ||
| 63 | {{/code}} | ||
| 64 | |||
| 65 | Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. Dies kann beispielsweise wie folgt erreicht werden: | ||
| 66 | |||
| 67 | {{code language="css"}} | ||
| 68 | .modern .xm-item-div LABEL { | ||
| 69 | font-size: 14px; /* Setzt die Schriftgröße. */ | ||
| 70 | color: #111; /* Setzt die Schriftfarbe. */ | ||
| 71 | } | ||
| 72 | {{/code}} | ||
| 73 | |||
| 74 | {{velocity}} | ||
| 75 | ##Hierbei ist insbesondere darauf zu achten, dass die CSS-Regeln mindestens so spezifisch sind, wie es das grundlegende Formular-Theme vorgibt. | ||
| 76 | ## | ||
| 77 | ##Zu beachten ist hierbei, dass Formularseiten durch das Hinzufügen von Titel und Untertitel unterhalb des auf allen Seiten sichtbareneigentlichen | ||
| 78 | ## | ||
| 79 | ##Print-PDF-Plugin: Spezialfall | ||
| 80 | ##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten | ||
| 81 | {{/velocity}} | ||
| 82 | |||
| 83 | == Anpassen des Favicons == | ||
| 84 | |||
| 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: | ||
| 86 | |||
| 87 | {{code language="html"}} | ||
| 88 | <link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild.png" /> | ||
| 89 | {{/code}} | ||
| 90 | |||
| 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 | |||
| 93 | {{code language="html"}} | ||
| 94 | <link rel="shortcut icon" type="image/png" sizes="32x32" href="../../../form/includes/ressource?pid=1234&name=favicondemo.png" /> | ||
| 95 | {{/code}} | ||
| 96 | |||
| 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}} |