> For the complete documentation index, see [llms.txt](https://docs.ninjateam.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninjateam.org/notibar/how-it-works/design-and-appearance.md).

# Design & Appearance

The Style tab controls the visual appearance of each bar.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FCpHYcpqRPKydUKV6gUJc%2FCustomize%20the%20style%20of%20Notibar.png?alt=media&amp;token=e01cd52f-809d-4321-b46a-6d2fb48e6789" alt=""><figcaption></figcaption></figure>

Below are the detailed settings available in this section:

### Preset Colors

#### Color Palette

Choose from a set of ready-made color themes shown as square swatches. Clicking a swatch applies a coordinated background and text color combination instantly.

#### Alpha-Enabled Color Pickers

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2F8IcBN2wIC5oOgzr2Au30%2FOpacity%20for%20the%20notibar.png?alt=media&amp;token=6e837bd7-7924-4445-affe-4a48ee6a2763" alt=""><figcaption></figcaption></figure>

The following color settings now support transparency, not just solid colors:

* Background colour
* Text colour
* Button background
* Button text colour

Click a color swatch to open the color picker, then adjust the alpha channel to make that specific color semi-transparent instead of fully solid. Click Reset next to any setting to revert it to the default color.

#### Opacity (%)

This slider controls the overall transparency of the entire bar, including its background, text, and button together.

* Drag the slider, or enter a value directly in the field next to it.
* 100 means the bar is fully opaque (solid).
* Lower values make the whole bar more transparent.

This is different from the alpha setting on individual colors above. Opacity affects the bar as a whole, while alpha-enabled color pickers let you control transparency for one element at a time, such as making only the background transparent while keeping the text fully solid.

#### Background Color

* Color Picker: Choose a custom background color to match your website's branding.

#### Text Color

* Color Picker: Choose the color for the bar's message text.

#### Button Background Color

* Color Picker: Choose the background color for the call-to-action button.

#### Button Text Color

* Color Picker: Choose the color of the button label.

### Font Size (px)

* Input Field: Set the text size in pixels. For example: 15.

### Alignment

* Dropdown Menu: Choose how the content is aligned inside the bar. Options include: Left, Center, Right, or Space around

### Content width

Modify the size of the notification content.

### Placement

Choose where the bar appears on the screen. Options include:

* Top - displays the bar at the top of the page. This is the default.
* Bottom - displays the bar fixed at the bottom of the page.

If the text and background colors you pick are hard to read, the editor will show a contrast warning. This is just a heads-up; you can still publish. Try a different preset or adjust your colors for better readability.

### Layout picker

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FyV0Lmy2AkpUkurZfFYA3%2Fnew%20layout%20for%20notibar.png?alt=media&amp;token=a29f0eb0-6446-46e1-8959-cc43f9cb9bea" alt=""><figcaption></figcaption></figure>

Choose how content is arranged inside the bar. Click a layout card to apply it. Options include:

* **Centered**: Text and button are centered together in the middle of the bar.
* **Text left**: Text is aligned to the left, with the button following after it.
* **Three zones**: Content is split into three sections across the bar - left, center, and right.
* **Hero**: Text is centered on its own row, with the button centered below it.
* **Split**: Text sits on the left side and the button on the right, with space between them.
* **All left**: Text and button are grouped together on the left side of the bar.
* **All right**: Text and button are grouped together on the right side of the bar.

Note: This Layout picker replaces the previous Alignment dropdown. If you have bars created before this update, they've been automatically mapped to the closest matching layout, so no changes are needed on your end.