ChronoForms hat eine Standard-CSS-Datei, die frontform.css, in der die Formatierungen des Formulares festgelegt sind. Dort steht z. B. dass die Breite des „beschreibenden Feldes“ (engl. Label) bei den Textfeldern genau 150 Bildpunkte breit ist. In diesem Beispiel möchte ich zeigen, wie man die Label der Felder mit ein paar CSS-Formatierungen versehen kann.
Die folgende Abbildung zeigt ein Beispielformular mit einem Textfeld, wie es z. B. in dem Beitrag "ChronoForms - Erstellen eines Formulares unter Joomla! 1.6 mit dem Easy Form Wizard " hinzugefügt wurde.
Wenn ich das Label vor dem Textfeld mit dem Webdeveloper Toolbar unter Firefox betrachte, finde ich die Klasse "cfdiv_text" die dem Label des Textfeldes zugewiesen ist. Öffne ich die verantwortliche CSS-Datei "frontform.css" aus dem Verzeichnis ".../components/com_chronoforms/css", so stehen dort ...
... genau diese 150px. Natürlich lässt sich das hier nun leicht anpassen. Doch lasst uns erst mal weiter schauen.
Beachtet bitte, dass ich hier über einen Release Candidate schreibe. Es kann sein, dass sich das hier bis zur finalen Version noch drei Mal ändert! Ich übernehme natürlich keinerlei Garantie, dass das hier funktioniert!
Ich öffne im Backend das Formular über "Wizard edit" und schaue mir die Eigenschaften des Textfeldes "Name" an.
Neben dem "Field Name" hier txt_name, der "Field Max Length" von 150 Zeichen, der "Field Size" mti 30 Zeichen, könnt Ihr hier eine "Field Class" eingeben. Ich schreibe dort mal "my_textfield" hinein. Weiter unten findet Ihr noch das "Label", ...
... in dem derzeit "Name" steht. Ich klicke auf "Apply" und schließe die Einstellungen. Dann "Speichere & Schließe" ich das Formular und betrachte es im Frontend (klick auf Frontend View im Forms Manager).
Im nächsten Schritt betrachte ich mir den Quellcode, den ChronoForms da ausgibt.
Das Textfeld "Name" mit dem entsprechenen Label wird in DIV-Tags geklammert. So trägt unser Textfeld, das mit "Name" gelabelt ist, die ID "name_container_div". Das Feld "E-Mail" wird in den DIV-Tag mit der ID "e_mail_container_div" eingeklammert, der Textbereich "Nachricht" in den DIV-Tag mit der ID "nachricht_container_div", usw. usw.
Hinweis: Die "Field class" mit der Bezeichnung "my_textfield" wird dem Textfeld (Input Type "text") zugewiesen, kann daher nicht auf das Label vor dem Textfeld einwirken. Wer allerdings gerade das Textfeld anpassen möchte hat hier seinen Angriffspunkt.
Damit haben wir erst mal die Fakten zusammengetragen, mit denen sich nun arbeiten lässt.
Ziel wird es nun sein das Label "Name" vor dem Textfeld zu vergrößern und das Textfeld dahinter entsprechend zu verkleiner. Hierzu nutze ich die selbe CSS-Datei (die frontform.css).
Vorgehen: Da das Label in den Bereich "name_container_div" eingeklammert ist, kann die CSS-Syntax wie folgt lauten:
...
#name_container_div label {
width: 500px;
background-color: green;
}
#name_container_div .my_textfield {
width: 100px;
background-color: red;
}
...
Mit der ersten Formatierung (#name_container_div zielt auf den Bereich und "label" auf den HTML-Tag des Lables), wird das Label vor dem Textfeld auf eine Breite von 500 Bildpunkten gesetzt. Die Hintergrundfarbe wird auf "Grün" gesetzt.
Die zweite Formatierung greift auf das Textfeld zu. "#name_container_div" zielt wieder auf den Bereich und mit ".my_textfield" bestmmt Ihr die "Field Class" bzw. "CSS-Klasse" die angepasst werden soll. Die Breite wird hier auf 100px gesetzt, die Hintergrundfarbe auf "Rot".
Den Code baue ich in der Datei direkt nach der Formatierung des Labels ein:
Das Ergebnis ist sofort sichtbar (und zugegeben nicht sehr schön).
Das Beispiel sollte euch zeigen, wo Ihr Hand anlegen könnt. Wer jetzt mehr will, sollte ich ein wenig um die CSS-Formatierungen kümmern und lernen, wie man so ein Zeug formatiert. Ein netter Einstieg ist da der Webmaster-Crashkurs und anschließend findet Ihr ein paar Codeschnipsel unter www.css4you.de.
Viel Spaß beim Ausprobieren.
Weitere Hinweise auf die Formatierung von Formularen über CSS im Web
- http://www.webmaster-crashkurs.de/formulare-ueber-css-gestalten.htm
- Details
- Erstellt: 23. Dezember 2013
- Zuletzt aktualisiert: 23. Dezember 2013
Weiterhin noch der Hinweis: Die Kommentar-Erweiterung arbeitet mit Cookies! Ohne aktive Cookies werden die Captchas nicht erkannt!