Mit Maskito Formularware können Sie Ihre Formulare schnell und einfach gestalten, um sie zum Beispiel in ihrer Farbe an das Corporate Design Ihres Unternehmens anzupassen. Dafür stehen Ihnen im FormDesigner vordefinierte Stylevorlagen zur Verfügung, um Ihren Formularen ein Grunddesign zu geben. Zusätzlich können Sie Ihren Webformularen auch mit CSS ein eigenes Design geben.
¶ Stylevorlagen
Im FormDesigner stehen Ihnen 10 Stylevorlagen für Web-Formulare (ab Masktio 7 “Themes”) zur Verfügung, in denen das Design der Controls bereits vordefiniert ist.
¶ Vorgehensweise
- Öffnen Sie im Maskito FormDesigner ein bestehendes oder neues Projekt.
- Klicken Sie am unteren Rand der Bühne auf die Registerkarte “Styles” (ab Maskito 7 „Theme“).
- Wählen Sie aus der Klappliste den gewünschten Style (ab Maskito 7 „Theme“) aus.
Nach dem Speichern erhält Ihr Formular nun das gewählte Design.
¶ Gestaltung mit CSS
Manchmal reichen diese Stylevorlagen nicht aus, um die Vorgaben der Grafiker umzusetzen. Dann haben Sie zusätzlich die Möglichkeit, das Design Ihrer Webformulare mit Hilfe von CSS anzupassen.
¶ Praxisbeispiel
Wir möchten den Standard-Button folgender Vorgabe anpassen:
- Schriftart soll Verdana sein.
- Jeder Button soll 30px hoch sein.
- Die Hintergrundfarbe der Buttons hat der Grafiker mit folgendem Farbcode definiert: RGB 222,49,41 bzw. Hex #de3129.
- Jeder Button soll runde Ecken erhalten.
- Jeder Button soll einen Schatten erhalten.
¶ Vorgehensweise
- Öffnen Sie im Maskito FormDesigner ein bestehendes oder neues Projekt.
- Klicken Sie am unteren Rand der Bühne auf die Registerkarte „CSS“.
- Laden Sie eine neue CSS-Vorlage*.
- Fügen Sie folgenden Code in den Textbereich des entsprechenden Elements (in diesem Beispiel. „.Button“) ein.
- Speichern Sie das Formular auf dem FormServer und sehen Sie, wie sich das Standardformat des Controls verändert hat.
¶ Code für unser Beispiel
.Button { font-family: 'Verdana' , sans-serif; color: white; font-size: medium; height: 30px; background-color: #de3129; border-width: 1px; border-style: groove; border-radius: 5px; border-color: #de3129; box-shadow: 5px 5px 3px #888888; }
CSS bietet Ihnen eine Vielzahl zusätzlicher Gestaltungsmöglichkeiten. Weitere Einführungen und Tutorials finden Sie hier [[1]]
Wir wünschen Ihnen viel Spaß bei der Gestaltung Ihrer Formulare und stehen Ihnen gern für Fragen zur Verfügung.
¶ Hinweis
- Diese Vorlage enthält die notwendigen Klassenbezeichnungen für die Gestaltung der einzelnen Elemente. Bitte beachten Sie diese bei der CSS-Erstellung.
- Web-Formulare können per Control-Eigenschaften sowie auch per CSS-Definitionen gestaltet werden. Priorität hat das benutzerdefinierte CSS gegenüber den integrierten CSS-Themes - und diese haben Vorrang gegenüber den Control-Eigenschaften. Unterstützen Sie Ihre CSS-Definitionen ggf. mit dem Zusatz "!important".
Zur Übersicht über weitere Funktionen