Form Elemente mit CSS gestalten

Hi,

ich habe einige Zeit damit verbracht eine brauchbare Antwort zu finden, wie man einzelne Formularelemente (es ging mir nur darum den Button ans Layout der Seite anzupassen) anpassen kann.

Alle Antworten im Forum brachten mich nicht wirklich weiter, aber einige Stückchen aus verschiedenen Antworten brachten mich dann auf die Lösung.

Also für alle Interessierten gibt es hier eine Lösung ohne gleich eine neue Extension zu installieren und aufwendige Templates selber zu basteln:

Folgende Zeile formatiert sämtliche Felder eines Formulars mit den im Stylsheet angegebenen classes:

tt_content.mailform.20.params = onmouseover="this.className='submitbuttonon'" onmouseout="this.className='submitbutton'" class="submitbutton"

Folgende Zeilen schließen die mit der vorherigen Zeile gesetzten Formatierungen für einzelne Formularelemente wieder aus:

tt_content.mailform.20.params.check =
tt_content.mailform.20.params.textarea =
tt_content.mailform.20.params.input =
tt_content.mailform.20.params.radio =
tt_content.mailform.20.params.select =
tt_content.mailform.20.params.file =
tt_content.mailform.20.params.password =

Möchte man nur einzelne Elemente über das Stylesheet formatieren, kann ebenso eine einzelne Definitionszeile verwendet werden (hier z. B. die Submit-Button):

tt_content.mailform.20.params.submit = onmouseover="this.className='submitbuttonon'" onmouseout="this.className='submitbutton'" class="submitbutton"

Die Einträge erfolgen typischerweise im SETUP des jeweiligen Templates.

In der CSS-Datei kann dann z. B. folgende Definition für die obigen Elemente verwendet werden

.submitbutton { background-image: url("http://www.iken.de/fileadmin/templates/01/images/submit.gif");
FONT: 11px verdana, arial, sans-serif;
font-weight: bold;
letter-spacing: 0px;
color: #FFFFFF;
WIDTH: 154PX;
HEIGHT: 23PX;
cursor:hand;
BORDER: #000000 1px solid;
background-color:#3D5A7B; }

.submitbuttonon { background-image: url("http://www.iken.de/fileadmin/templates/01/images/submiton.gif");
FONT: 11px verdana, arial, sans-serif;
font-weight: bold;
letter-spacing: 0px;
color: #FFFFFF;
WIDTH: 154PX;
HEIGHT: 23PX;
cursor:hand;
BORDER: #000000 1px solid;
background-color:#3D787A; }

Bei der beschriebenen Definition hat man dann einen 3D-wirkenden Button, der die Farbe wechselt, wenn die Maus drüber fährt.

Viel Spaß damit
Oliver

Danke Oliver für die Anleitung. Das war eine GROSSE Hilfe...

Viele Grüße,

Kieran | givemmedia.com 😃

Habe ausgehend vom obrigen Code eine kleine nette Erweiterung ableiten könne:

Die vorbelegten Werte der Inputfelder mussten (zumindest bei mir) erst händisch gelöscht werden.

Mit folgendem Code für das Setup wird ein onclick Event ausgelöst, welches beim Mausklick den Inhalt des Inputfeldes löscht:

  tt_content.mailform.20 {
  params >
  params.input = onclick="this.value=''"
  }

Vielleicht kann's ja jdn brauchen...