> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Styles für Kunde und Adressen

> Die CSS-Klassen rund um Anmeldung, Rechnungs- und Lieferadresse, Bankverbindung, Kreditkartendaten, multiple Kundendaten, PLZ-Assistent und Werbeeinwilligung.

WEBSALE V8s erzeugt zu vielen Funktionen und Tags automatisch HTML-Code. Dessen Aussehen bestimmen Sie über CSS-Klassen, die der Shop fest vergibt. Diese Seite listet die Klassen rund um das Kundenkonto und die Adresseingabe.

Zwei Mechanismen treten dabei immer wieder auf: feste Klassennamen für erzeugte Tabellen und Auswahllisten, und Fehler-Klassen, die der Shop erst im Fehlerfall anhängt.

Wegweiser: [CSS-Styles](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md)

## Anmeldung

Auf dem Template `ws_login.htm` arbeiten Sie nicht mit festen Klassen, sondern mit Error-Klassen-Tags. Jedes Eingabefeld lässt sich damit versehen. Im Fehlerfall erzeugt das Tag die Zeichenfolge `_error`, sonst nichts.

Aus diesem Feld:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="password" name="~WS-NewPW_input~" value="" class="input~WS-NewPW_error~">
```

wird im Fehlerfall:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="password" name="~WS-NewPW_input~" value="" class="input_error">
```

Welches Error-Klassen-Tag Sie verwenden, hängt vom Feld ab. Die rechte Spalte nennt die Abschnitte, in denen das jeweilige Tag gilt.

| Error-Klassen-Tag | Gilt in den Abschnitten |
| - | - |
| `WS-UserID_error` | `KnownUser` |
| `WS-Email_error` | `KnownUser`, `RequestPW`, `SetPassword` |
| `WS-NewEmail_error` | `NewUser`, `ChangeEmail`, `ForceSet` |
| `WS-EmailAgain_error` | `ChangeEmail`, `ForceSet` |
| `WS-PW_error` | `KnownUser`, `ChangeEmail`, `ForceSet`, `ChangePW` |
| `WS-NewPW_error` | `NewUser`, `ChangePW`, `SetPassword` |
| `WS-PWAgain_error` | `NewUser`, `ChangePW`, `SetPassword` |

Der Vorteil dieser Schreibweise liegt darin, dass Sie eine Grundklasse und eine Fehlerklasse in einem Attribut unterbringen. Im Beispiel entsteht entweder `input` oder `input_error`, und Sie definieren beide in Ihrem Stylesheet.

## Rechnungs- und abweichende Lieferadresse

### Eingabe

| Klasse | Steuert das Aussehen von |
| - | - |
| `addr_table` | die gesamte Adress-Tabelle |
| `addr_tr_1` | erste alternierende Zeile |
| `addr_tr_2` | zweite alternierende Zeile |
| `addr_td_1` | erste Spalte |
| `addr_td_2` | zweite Spalte |
| `addr_td_3` | dritte Spalte |
| `addr_text_input` | Text-Eingabefelder |
| `select_salutation` | Auswahlliste für die Anrede |
| `select_title` | Auswahlliste für den Titel |
| `select_country` | Auswahlliste für das Land |
| `select_date_of_birth` | Auswahllisten für das Geburtsdatum |
| `select_user_def_list` | Auswahlliste für die benutzerdefinierten Felder |
| `addr_error_table` | Tabelle mit der Auflistung der fehlenden Felder |
| `addr_error_ul` | Überschrift der Fehlerliste, also das `ul`-Element |
| `addr_error_li` | der einzelne Fehler, also das `li`-Element |

> [!WARNING]
>
> Benutzerdefinierte `UserDefList`-Auswahllisten sind veraltet und werden nicht mehr unterstützt. Die Klasse `select_user_def_list` brauchen Sie für neue Shops nicht.

### Anzeige

Für die reine Anzeige einer bereits erfassten Adresse gibt es einen zweiten, kleineren Satz.

| Klasse | Steuert das Aussehen von |
| - | - |
| `show_addr_table` | die Tabelle |
| `show_addr_tr_1` | erste alternierende Zeile |
| `show_addr_tr_2` | zweite alternierende Zeile |
| `show_addr_td_1` | erste Spalte |
| `show_addr_td_2` | zweite Spalte |

Wegweiser: [Rechnungsadresse abfragen, Abweichende Lieferadresse abfragen, Auswahllisten der Adressdaten](https://dokumentation.websale.de/v8s/adressdaten/rechnungsadresse-abfragen.md)

## Bankverbindung

| Klasse | Steuert das Aussehen von |
| - | - |
| `bank_info_table` | die Tabelle |
| `bank_info_text_header` | Überschrift beziehungsweise Kopfzeile |
| `bank_info_text` | normaler Text |

Wegweiser: [Lastschrift, Bankverbindungen abfragen](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/lastschrift.md)

## Kreditkartendaten

| Klasse | Steuert das Aussehen von |
| - | - |
| `ccard_table` | Tabelle der Kreditkartendaten |
| `ccard_tr_1` | erste alternierende Zeile |
| `ccard_tr_2` | zweite alternierende Zeile |
| `ccard_td_1` | erste Spalte |
| `ccard_td_2` | zweite Spalte |
| `ccard_td_3` | dritte Spalte |

> [!WARNING]
>
> Die folgenden Klassen gehören zur direkten Erfassung von Kreditkartendaten im Shop und sind veraltet: `ccard_text_input_holder`, `ccard_text_input_number`, `ccard_text_input_cvcode`, `select_ccard`, `select_ccard_validity`, `ccard_error_table`, `ccard_error_ul` und `ccard_error_li`.
>
> Für neue Shops brauchen Sie sie nicht. Nehmen Sie sie nur in Ihr Stylesheet auf, wenn ein bestehender Shop sie noch verwendet.

Wegweiser: Zahlungsart "Kreditkarte"

## Multiple Kundendaten

Wenn ein Kunde mehrere Lieferadressen, Kreditkarten oder Bankverbindungen hinterlegen kann, erzeugt WEBSALE V8s zusätzliche Auswahllisten. Alle folgenden Klassen setzt der Shop automatisch.

Das Muster ist überall gleich: Zu jeder Klasse gibt es eine zweite mit dem Zusatz `_error`, die im Fehlerfall greift.

### Multiple Lieferadressen

| Klasse | Steuert das Aussehen von |
| - | - |
| `select_deliv_selection` | Auswahl der Lieferadresse |
| `select_salutation` | Eingabe der Anrede |
| `select_title` | Eingabe des Titels |
| `select_country` | Eingabe des Landes |
| `select_date_of_birth` | Eingabe des Geburtstags |
| `select_suffix_list` | Eingabe der Suffixliste |
| `select_usertype_list` | Eingabe des Kundentyps |
| `select_user_def_list` | Eingabe der benutzerdefinierten Liste, veraltet |

Zu jeder dieser Klassen gibt es die zugehörige Fehlerklasse, also `select_deliv_selection_error`, `select_salutation_error` und so fort.

Für `select_usertype_list` gibt es keine Fehlerklasse. Alle übrigen Einträge dieser Gruppe haben eine.

### Multiple Kreditkartendaten

| Klasse | Steuert das Aussehen von |
| - | - |
| `select_ccard2_selection` | Auswahl der hinterlegten Kreditkarte |

> [!WARNING]
>
> Die Klassen `ccard_select`, `ccard_select_error`, `ccard_select_validity` und `ccard_select_validity_error` gehören zur direkten Erfassung im Shop und sind veraltet.

### Multiple Bankverbindungen

| Klasse | Steuert das Aussehen von |
| - | - |
| `select_bank2_selection` | Auswahlliste der gespeicherten Bankverbindungen |
| `bank2_select_country` | Auswahlliste für das Land |
| `bank2_select_bank` | Auswahlliste für den Banknamen |

Auch hier gibt es die Fehlerklassen `bank2_select_country_error` und `bank2_select_bank_error`.

Wegweiser: Rechnungs- und Lieferadresse bei multiplen Kundendaten abfragen

## PLZ-Assistent

Der PLZ-Assistent blendet Vorschläge für Postleitzahl und Ort in einem eigenen Bereich ein. Dieser Bereich trägt zwei IDs und mehrere Klassen.

| Art | Name |
| - | - |
| ID | `ws_plzhelp_suggest_zip` |
| ID | `ws_plzhelp_suggest_city` |
| Klasse | `ws_plzhelp_suggest` |
| Klasse | `ws_plzhelp_suggest_close` |
| Klasse | `ws_plzhelp_suggest_headline` |
| Klasse | `ws_plzhelp_suggest_description` |
| Klasse | `ws_plzhelp_suggest_table_div` |
| Klasse | `ws_plzhelp_suggest_table` |
| Klasse | `ws_plzhelp_suggest_tr_1` |
| Klasse | `ws_plzhelp_suggest_tr_2` |
| Klasse | `ws_plzhelp_suggest_td_1` |
| Klasse | `ws_plzhelp_suggest_td_2` |

Anders als bei den übrigen Styles bekommen Sie für den PLZ-Assistenten eine fertige Vorlage. Kopieren Sie diese Standard-Styles in Ihre CSS-Datei und passen Sie sie an Ihr Design an:

```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
#ws_plzhelp_suggest_zip,
#ws_plzhelp_suggest_city {
   position: absolute;
   background: #fff;
   z-index: 99;
   border: solid 1px #cccccc;
}

.ws_plzhelp_suggest_close {
   position: absolute;
   top: 0;
   right: 0;
   height: 16px;
   width: 16px;
   cursor: pointer;
}

.ws_plzhelp_suggest_close:after {
   position: relative;
   font-family: FontAwesome;
   content: "\f00d";
   font-size: 14px;
   line-height: 16px;
   font-weight: bold;
   color: #555555;
}

.ws_plzhelp_suggest_headline {
   color: #337ab7;
   font-weight: bold;
   font-size: 16px;
   padding: 10px 5px 10px 10px;
}

.ws_plzhelp_suggest_description {
   padding: 0px 10px 10px 10px;
   color: #000000;
}

.ws_plzhelp_suggest_table {
   width: 100%;
}

.ws_plzhelp_suggest_table_div {
   height: 140px;
   margin-bottom: 10px;
   overflow-y: scroll;
}

.ws_plzhelp_suggest_tr_1 {
   background-color: #f5f5f5;
}

.ws_plzhelp_suggest_td_1,
.ws_plzhelp_suggest_td_2 {
   padding-left: 10px;
   padding-right: 10px;
}

.ws_plzhelp_suggest_table tr:hover,
.ws_plzhelp_select {
   background-color: #337ab7 !important;
   color: white;
   cursor: pointer;
}
```

> [!NOTE]
>
> Zwei Dinge fallen an dieser Vorlage auf, die Sie beim Anpassen im Blick behalten sollten.
>
> Das Schließkreuz entsteht über `content: "\f00d"` in der Schriftart FontAwesome. Verwendet Ihr Shop diese Schriftart nicht, erscheint an der Stelle ein leeres Kästchen. Ersetzen Sie die Regel dann durch eine Grafik oder ein eigenes Zeichen.
>
> Die Klasse `ws_plzhelp_select` kommt in der Vorlage vor, steht aber nicht in der Liste der Klassen oben. Sie markiert den gerade per Tastatur oder Maus gewählten Vorschlag.

Wegweiser: [PLZ-Assistent](https://dokumentation.websale.de/v8s/adressdaten/plz-assistent.md)

## Zustimmung zur Werbung

| Klasse | Steuert das Aussehen von |
| - | - |
| `check_address_sharing` | Kontrollkästchen für die Einwilligung zur Datenweitergabe an Dritte zu Werbezwecken |
| `check_tele_marketing` | Kontrollkästchen für die Einwilligung zur Telefonwerbung |

Wegweiser: [Weitere Informationen zur Bestellung abfragen](https://dokumentation.websale.de/v8s/adressdaten/weitere-informationen-zur-bestellung-abfragen.md)


## Related topics

- [Styles für Katalog und Produkte](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md)
- [Styles für Module und Schnittstellen](https://dokumentation.websale.de/v8s/referenz/styles/module-und-schnittstellen.md)
- [API-Referenz Kundendaten](https://dokumentation.websale.de/schnittstellen/admin-interface-api/api-referenz-kundendaten.md)
- [Styles für Warenkorb und Bestellung](https://dokumentation.websale.de/v8s/referenz/styles/warenkorb-und-bestellung.md)
- [Import-Dateien](https://dokumentation.websale.de/v8s/schnittstellen/kundendaten/ws-sftp-kunden-pro/import-dateien.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.