> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/footer/columns-styling.md).

# Columns styling

The individual footer columns can be styled independently. Depending on the column type, different settings for colors, typography and appearance are available.

For most columns, the following color settings are available:

* **Background**
* **Text**
* **Headline**
* **Text:hover**
* **Headline:hover**

**Headline:hover** is also used for linked headlines on hover, the collapse icon in the mobile footer and the headline accent line. By default, it matches the respective **Text:hover** setting.

### Logo Column

The logo column can have its own **Background**. The **Vertical alignment** allows you to align the logo in its container.

You can adjust the **Logo height** individually for mobile and larger viewports by selecting the `Custom height` option. When `Automatic (based on header)` is selected, the same logo size is used as in the header. The `Automatic (based on header)` option is mainly provided for backwards compatibility.

Example:

![Vertically centered logo in a column with a darker background.](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MH_AGv3UUCBJzSNZtsx%2F-MH_AsfSu9pam_ruaBwG%2Fdocs-front-footer-logo-spalte.png?alt=media\&token=39c6bd52-1104-4a57-acf9-ad90ad7aec2f)

### Hotline column

In addition to **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**, the following settings are available:

* **Hotline font size** – defines the hotline font size in pixels.
* **Hotline font weight** – defines the font weight from Thin (100) to Black (900).

### Social media column

In addition to **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**, additional settings are available for the social media icons:

* **Icon background** – background color of the icons when using an icon style with a background.
* **Icon background:hover** – background color of the icons on hover.
* **Icon style** – defines the shape and appearance of the social media icons.

Available options for **Icon style** are `Default - no background`, `Squared`, `Slightly rounded`, `Rounded`, `Heavily rounded` and `Round`.

When using `Default - no background`, the icons use the **Text** and **Text:hover** colors. The other styles display the icons on a badge and use the separate icon settings instead.

Set the links to the social media channels in the theme settings. You can find more about this in the [social media icons](/en/settings/social-media-icons.md) entry.

{% hint style="info" %}
The settings only apply if the social media icons are also displayed as a column. When displayed in the `footer bottom` position, the color settings of the footer bottom apply.
{% endhint %}

### Newsletter column

In addition to **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**, the newsletter column provides separate settings for its form fields:

* **Form background**
* **Form background:focus**
* **Form text**
* **Form text:focus**
* **Form border**
* **Form border:focus**

This allows the background, text and border colors of the form fields to be configured separately for their default and focus states.

{% hint style="info" %}
When the form fields use the `underlined` style, **Form background** and **Form background:focus** are not applied. In this case, make sure there is sufficient contrast to the column background color.
{% endhint %}

### Custom column 1 - 3

Each of the three custom footer columns provides the settings **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**.

This allows all three custom columns to be styled independently.

### Payment methods column

The payment column also provide **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**.

In the payment type column, the payment methods icons can be loaded from your store's payment methods configuration.

{% embed url="<https://docs.shopware.com/en/shopware-6-en/settings/Paymentmethods#zahlungsart-anlegen>" %}

### Shipping methods column

The shipping column also provide **Background**, **Text**, **Headline**, **Text:hover** and **Headline:hover**.

In the shipping column, the shipping methods icons can be loaded from your shipping methods configuration of the store.

{% embed url="<https://docs.shopware.com/en/shopware-6-en/settings/shipping#basic-information>" %}