> ## 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 for customer and addresses

> The CSS classes for login, billing and delivery address, bank details, credit card data, multiple customer data, postal code assistant, and advertising consent.

WEBSALE V8s automatically generates HTML code for many functions and tags. You control its appearance with CSS classes that the shop assigns as fixed names. This page lists the classes related to the customer account and address entry.

Two mechanisms come up again and again: fixed class names for generated tables and selection lists, and error classes that the shop only appends when an error occurs.

Guide: CSS styles

## Login

On the `ws_login.htm` template, you don't work with fixed classes but with error class tags. You can add these to any input field. If an error occurs, the tag generates the string `_error`; otherwise it generates nothing.

This field:

```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~">
```

becomes the following when an error occurs:

```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">
```

Which error class tag you use depends on the field. The right column lists the sections in which each tag applies.

| Error class tag | Applies in the sections |
| - | - |
| `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` |

> [!NOTE]
>
> The advantage of this notation is that you can fit a base class and an error class into a single attribute. In the example, the result is either `input` or `input_error`, and you define both in your stylesheet.

## Billing and alternative delivery address

### Input

| Class | Controls the appearance of |
| - | - |
| `addr_table` | The entire address table |
| `addr_tr_1` | First alternating row |
| `addr_tr_2` | Second alternating row |
| `addr_td_1` | First column |
| `addr_td_2` | Second column |
| `addr_td_3` | Third column |
| `addr_text_input` | Text input fields |
| `select_salutation` | Selection list for the salutation |
| `select_title` | Selection list for the title |
| `select_country` | Selection list for the country |
| `select_date_of_birth` | Selection lists for the date of birth |
| `select_user_def_list` | Selection list for the user-defined fields |
| `addr_error_table` | Table listing the missing fields |
| `addr_error_ul` | Heading of the error list, that is, the `ul` element |
| `addr_error_li` | The individual error, that is, the `li` element |

> [!WARNING]
>
> User-defined `UserDefList` selection lists are deprecated and no longer supported. You don't need the `select_user_def_list` class for new shops.

### Display

For simply displaying an address that has already been entered, there is a second, smaller set.

| Class | Controls the appearance of |
| - | - |
| `show_addr_table` | The table |
| `show_addr_tr_1` | First alternating row |
| `show_addr_tr_2` | Second alternating row |
| `show_addr_td_1` | First column |
| `show_addr_td_2` | Second column |

Guide: Requesting the billing address, Requesting an alternative delivery address, Selection lists for address data

## Bank details

| Class | Controls the appearance of |
| - | - |
| `bank_info_table` | The table |
| `bank_info_text_header` | Heading or header row |
| `bank_info_text` | Normal text |

Guide: Direct debit, requesting bank details

## Credit card data

| Class | Controls the appearance of |
| - | - |
| `ccard_table` | Table of credit card data |
| `ccard_tr_1` | First alternating row |
| `ccard_tr_2` | Second alternating row |
| `ccard_td_1` | First column |
| `ccard_td_2` | Second column |
| `ccard_td_3` | Third column |

> [!WARNING]
>
> The following classes belong to the direct entry of credit card data in the shop and are deprecated: `ccard_text_input_holder`, `ccard_text_input_number`, `ccard_text_input_cvcode`, `select_ccard`, `select_ccard_validity`, `ccard_error_table`, `ccard_error_ul`, and `ccard_error_li`.
>
> You don't need them for new shops. Only include them in your stylesheet if an existing shop still uses them.

Guide: "Credit card" payment method

## Multiple customer data

If a customer can store multiple delivery addresses, credit cards, or bank details, WEBSALE V8s generates additional selection lists. The shop sets all of the following classes automatically.

The pattern is the same everywhere: for each class there is a second one with the suffix `_error` that applies when an error occurs.

### Multiple delivery addresses

| Class | Controls the appearance of |
| - | - |
| `select_deliv_selection` | Selection of the delivery address |
| `select_salutation` | Salutation input |
| `select_title` | Title input |
| `select_country` | Country input |
| `select_date_of_birth` | Date of birth input |
| `select_suffix_list` | Suffix list input |
| `select_usertype_list` | Customer type input |
| `select_user_def_list` | User-defined list input, deprecated |

Each of these classes has a corresponding error class, that is, `select_deliv_selection_error`, `select_salutation_error`, and so on.

> [!NOTE]
>
> The previous documentation does not list an error class for `select_usertype_list`. All other entries in this group have one.

### Multiple credit card data

| Class | Controls the appearance of |
| - | - |
| `select_ccard2_selection` | Selection of the stored credit card |

> [!WARNING]
>
> The classes `ccard_select`, `ccard_select_error`, `ccard_select_validity`, and `ccard_select_validity_error` belong to direct entry in the shop and are deprecated.

### Multiple bank details

| Class | Controls the appearance of |
| - | - |
| `select_bank2_selection` | Selection list of saved bank details |
| `bank2_select_country` | Selection list for the country |
| `bank2_select_bank` | Selection list for the bank name |

Here, too, there are the error classes `bank2_select_country_error` and `bank2_select_bank_error`.

Guide: Requesting billing and delivery address with multiple customer data

## Postal code assistant

The postal code assistant shows suggestions for postal code and city in a separate area. This area has two IDs and several classes.

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

Unlike the other styles, you get a ready-made template for the postal code assistant. Copy these default styles into your CSS file and adapt them to your design:

```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]
>
> Two things stand out in this template that you should keep in mind when adapting it.
>
> The close icon is created via `content: "\f00d"` in the FontAwesome font. If your shop does not use this font, an empty box appears in its place. In that case, replace the rule with a graphic or a character of your own.
>
> The class `ws_plzhelp_select` appears in the template but is not in the list of classes above. It highlights the suggestion currently selected via keyboard or mouse.

Guide: Postal code assistant

## Advertising consent

| Class | Controls the appearance of |
| - | - |
| `check_address_sharing` | Checkbox for consent to share data with third parties for advertising purposes |
| `check_tele_marketing` | Checkbox for consent to telephone advertising |

Guide: Requesting additional order information


## Related topics

- [API reference customer data](https://dokumentation.websale.de/en/schnittstellen/admin-interface-api/api-referenz-kundendaten.md)
- [A- (Billing address)](https://dokumentation.websale.de/en/v8s/referenz/tags/a-rechnungsadresse.md)
- [Customer, login and account](https://dokumentation.websale.de/en/v8s/referenz/tags/ws/kunde-anmeldung-und-konto.md)
- [Customer, login, and customer account](https://dokumentation.websale.de/en/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md)
- [customer - Customer data](https://dokumentation.websale.de/en/konfiguration/customer-kundendaten.md)


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