Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | powermail_formulare_frontend [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Frontend für Powermail Formulare ====== | ||
+ | Hier finden Sie einige Beispiele, wie Sie die Eingabefelder der beliebten Extension Powermail gestalten können. Es gibt zudem noch die Möglichkeit, | ||
+ | |||
+ | ===== Powermail Standards formatieren ===== | ||
+ | |||
+ | |||
+ | Powermail generiert Formulare mit HTML-Standards, | ||
+ | |||
+ | ==== Überschrift mit eigener Farbe und Font ==== | ||
+ | |||
+ | .powermail_legend { | ||
+ | color: #478FAD; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | ==== Überschrift abschalten ==== | ||
+ | |||
+ | Je nach Vorlage kann es sinnvoll sein, die Überschrift eines Eingabefeldes abzuschalten. Dies kann z. B. geschehen, wenn man die Erklärung des Inhalts in einem Feld in den Placeholder verlagert. | ||
+ | |||
+ | .powermail_legend { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | **Abstand des gesamten Containers anpassen** | ||
+ | |||
+ | .container-fluid { | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | |||
+ | **Überschrift eines Eingabefeldes mit Farben versehen und ausrichten** | ||
+ | |||
+ | .form-horizontal .control-label { | ||
+ | text-align: left; | ||
+ | color: #478FAD; | ||
+ | } | ||
+ | |||
+ | |||
+ | ==== Eingabefelder formatieren ==== | ||
+ | |||
+ | |||
+ | Die Eingabefelder wie Input, Drop Down Menu und Textfeld kann man mit eigenem Layout versehen, um die Standards von Bootstrap zu überschreiben. | ||
+ | |||
+ | .powermail_fieldwrap select, | ||
+ | .powermail_fieldwrap input, | ||
+ | .powermail_fieldwrap textarea { | ||
+ | border: 1px #F4E6F4 solid; | ||
+ | border-radius: | ||
+ | } | ||
+ | | ||
+ | | ||
+ | ==== Formular Felder mit eigenem Layout ==== | ||
+ | |||
+ | **Rahmen der Felder mit eigener Farbe** | ||
+ | |||
+ | .form-control { | ||
+ | background-color: | ||
+ | background-image: | ||
+ | } | ||
+ | |||
+ | **Aktiver Zustand eines Feldes** | ||
+ | |||
+ | .form-control: | ||
+ | border-color: | ||
+ | outline: 0; | ||
+ | -webkit-box-shadow: | ||
+ | box-shadow: inset 0 1px 1px rgba(144, | ||
+ | } | ||
+ | |||
+ | **Placeholder mit eigener Farbe** | ||
+ | |||
+ | .form-control:: | ||
+ | color: #900591; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | .form-control: | ||
+ | color: #900591; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | .form-control:: | ||
+ | color: #900591; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | **Fehlermeldungen formatieren** | ||
+ | |||
+ | .tx-powermail .powermail_fieldset .powermail_field_error, | ||
+ | .tx-powermail .powermail_fieldset .parsley-error, | ||
+ | .tx-powermail .powermail_fieldset .powermail_form .parsley-error: | ||
+ | .tx-powermail .powermail_fieldset div.error { | ||
+ | background-color: | ||
+ | color: #900591; | ||
+ | } | ||
+ | .tx-powermail .powermail_fieldset .parsley-errors-list> | ||
+ | background-color: | ||
+ | color: #F4E6F4; | ||
+ | } | ||
+ | ==== Button zum Abschicken (Submit) ==== | ||
+ | |||
+ | Wählt man den Button zum '' | ||
+ | |||
+ | input.btn.btn-primary { | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | border: none; | ||
+ | border-radius: | ||
+ | transition: all ease 0.5s; | ||
+ | } | ||
+ | input.btn.btn-primary: | ||
+ | background-color: | ||
+ | transition: all ease 0.8s; | ||
+ | } | ||
+ | |||
+ | |||
+ | ==== Buttons zum Weiterschalten ==== | ||
+ | |||
+ | Wenn man das mehrseitige Menu von Powermail auswählt, bekommt man die Möglichkeit zum Weiterschalten zwischen den Seiten mit den Feldern Formulare. Hier ein CSS zum Ändern der Farben. | ||
+ | |||
+ | a.btn.btn-default.btn-read-more, | ||
+ | .btn.btn-default.btn-login { | ||
+ | border: 1px #4B778A solid; | ||
+ | background-color: | ||
+ | width: 100%; | ||
+ | color: #4B778A; | ||
+ | margin-bottom: | ||
+ | font-weight: | ||
+ | } | ||
+ | a.btn.btn-default.btn-read-more: | ||
+ | .btn.btn-default.btn-login: | ||
+ | border: 1px #fff solid; | ||
+ | color: #ddd; | ||
+ | background-color: | ||
+ | } | ||
+ | a.btn.btn-default.btn-read-more { transition: all ease 1.5s; } | ||
+ | .btn.btn-default.btn-login { transition: all ease 0.8s; } |