Widget „Überprüfung - Textbereich“ anpassen



Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprytextarea_custom_de.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationTextArea.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Textbereich“ erstellen, speichert Dreamweaver die Datei „SpryValidationTextArea.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.

Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.

Fehlermeldungs-Textstil für das Widget „Überprüfung - Textbereich“

Fehlermeldungen für das Widget „Überprüfung - Textbereich“ werden in Rot mit einem 1 Pixel breiten Rahmen um den Text angezeigt.

 Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu:

Zu ändernder Text

Dazugehörige CSS-Regel

Zu ändernde dazugehörige Regeln

Text der Fehlermeldung

.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

color: #CC3333; border: 1px solid #CC3333;

Hintergrundfarben des Widgets „Überprüfung - Textbereich“ ändern

 Um die Hintergrundfarben eines solchen Widgets zu ändern, suchen Sie in folgender Tabelle nach der richtigen CSS-Datei und ändern Sie die Standardwerte:

Zu ändernde Hintergrundfarbe

Dazugehörige CSS-Regel

Zu ändernde dazugehörige Eigenschaft

Hintergrundfarbe des Widgets im Gültig-Zustand

.textareaValidState textarea, textarea.textareaValidState

background-color: #B8F5B1;

Hintergrundfarbe des Widgets im Ungültig-Zustand

textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

background-color: #FF9F9F;

Hintergrundfarbe des Widgets im Fokus

.textareaFocusState textarea, textarea.textareaFocusState

background-color: #FFFFCC;