> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing the layout of the banner (Legacy Version)

You can customize the layout and styling of your banner directly inside the application. This allows you to create a look and feel that matches your organization’s branding and user experience.

To access these options, navigate to:
**Settings > Banner > Style**

### Position

Choose where and how the banner will appear on your website:

1. **Popup:** Centered on the screen.
2. **Overlay:** Works like the popup, but blocks the page until the user interacts with the banner.
3. **Bar at the top:** Fixed at the top of the screen.
4. **Bar at the top (pushdown):** Slides down from the top, pushing content below. (Note: may not work well with sticky headers.)
5. **Floating at the top left:** Positioned at the top left with a small margin.
6. **Floating at the top center:** Positioned at the top center with a small margin.
7. **Floating at the top right:** Positioned at the top right with a small margin.
8. **Bar at the bottom:** Fixed at the bottom of the screen.
9. **Floating at the bottom left:** Positioned at the bottom left with a small margin.
10. **Floating at the bottom center:** Positioned at the bottom center with a small margin.
11. **Floating at the bottom right:** Positioned at the bottom right with a small margin.

    
### Theme

Select a theme to control padding, button style, and appearance:

1. **Block:** Small padding, square buttons with proportional width.
2. **Classic:** Small padding, rounded buttons of equal width.
3. **Edgeless:** No padding, square buttons of equal width.
4. **Wired:** Same as Block but with inverted button backgrounds and colors.

**Theme Comparison Table**

| Theme | Padding | Button Style | Button Width |
| ---- |
| **Block** | Small | Square | Proportional |
| **Classic** | Small | Rounded | Equal |
| **Edgeless** | None | Square | Equal |
| **Wired** | Small | Square (inverted colors) | Proportional |

### Text Alignment

Applies to banner title, message, and logo:

* Left
* Center
* Right

### Width

Adjusts banner width using **em units** (relative to font size). Example: `2em` = twice the font size.

* Controlled with a slider.
* Works with live preview for instant results.
* Useful for longer messages or button labels.
* Note: Applies only to **banner** positions, not bars (bars always span the full width).

### Font Size

Adjusts text size using **px units**. Example: `1px = 1/96th of 1 inch`.

* Controlled with a slider.
* Works with live preview.
* Defaults to the size set by your store’s theme.

### Padding

Adjusts the space inside the banner using **px units**.

* Controlled with a slider.
* Works with live preview.
* Defaults vary depending on theme.
* Note: Not supported with the **Edgeless** theme.

### Colors

Customize banner and button colors:

* Choose from a palette or define custom colors.
* Supports **Hex** (e.g., `#123456`) and **RGBA** formats.
* RGBA adds transparency support in addition to Red, Green, and Blue values.

### Font Family

By default, the banner inherits your store’s theme font. You can also choose from web-safe fonts supported across browsers:

* Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
* Times New Roman, Didot, Georgia, American Typewriter
* Andalé Mono, Courier, Lucida Console, Monaco
* Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

If you want to use a custom font, first load it into your store assets and make it available in your CSS file.

### z-index

Controls the **stack order** of the banner.

* Higher values ensure the banner appears above other page elements.
* Adjust if conflicts occur with other apps or scripts.

### Container ID

Defines the HTML ID of the banner container.

* Only change this if you need to target the banner with custom scripts or CSS selectors.

### Banner Shadow

Adds a shadow behind the banner.

* Useful when banner and background colors are similar, improving visibility.

### Animation

Enables animations for banner appearance and closing:

* Fade-in / slide-in on open.
* Fade-out / slide-out on close.

Also applies to the **Re-open banner (Revoke)** link, if enabled under **Behavior**.

* Note: Not supported by all browsers.

### Custom CSS

Add your own CSS rules for additional customization.

* Useful for fine-tuning button sizes, border colors, spacing, and more.

### Video Guide

${youtube}[How to customize your cookie banner in Pandectes GDPR compliance](Q_fGcnwDQxk)