Widget „Überprüfung - Bestätigung“ anpassen



Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an dem Widget „Überprüfung - Bestätigung“ vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den CSS-Code für das Widget „Überprüfung - Bestätigung“ ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryconfirm_custom_de.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationConfirm.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Bestätigung“ erstellen, speichert Dreamweaver die Datei „SpryValidationConfirm.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 CSS-Regeln für das Widget „Überprüfung - Bestätigung“ entweder schnell und einfach in der zugehörigen CSS-Datei oder im 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.

Stil für Widgets vom Typ „Überprüfung - Bestätigung“ zuweisen (allgemeine Anweisungen)

  1. Öffnen Sie die Datei „SpryValidationConfirm.css“.

  2. Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Bestätigung“ ändern möchten, bearbeiten Sie die Regel input.confirmRequiredState in der Datei „SpryValidationConfirm.css“.

  3. Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.

Die Datei „SpryValidationConfirm.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.

Textstil von Fehlermeldungen für das Widget „Überprüfung - Bestätigung“ zuweisen

Fehlermeldungen für das Widget „Überprüfung - Bestätigung“ werden standardmäßig mit einem 1 Pixel breiten roten durchgehenden Rahmen um den Text angezeigt.

 Um den Textstil für Fehlermeldungen des Widgets „Überprüfung - Bestätigung“ 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

.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

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

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

 Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Bestätigung“ zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie die Standardwerte für die Hintergrundfarbe.

Zu ändernde Farbe

Dazugehörige CSS-Regel

Zu ändernde dazugehörige Eigenschaft

Hintergrundfarbe des Widgets im Gültig-Zustand

.confirmValidState input, input.confirmValidState

background-color: #B8F5B1;

Hintergrundfarbe des Widgets im Ungültig-Zustand

input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input

background-color: #FF9F9F;

Hintergrundfarbe des Widgets im Fokus

.confirmFocusState input, input.confirmFocusState

background-color: #FFFFCC;