> ## Documentation Index
> Fetch the complete documentation index at: https://docs.9pic.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding & Theme

> Set your theme colour, header style, header call-to-action, organisation name, logo, and favicon.

## Overview

The **Branding & Theme** tab controls the visual identity of your event gallery website: theme colour, header design, an optional call-to-action button, your organisation name, logo, and favicon.

**Plan availability:** Branding & Theme is editable on **all plans** — there's no plan gate on this tab in the dashboard.

<Frame caption="Branding & Theme top settings">
  <img src="https://assets.9pic.ai/docs/dashboard-guide/settings/branding-theme-top.webp" alt="Branding and Theme tab showing Theme Color, Header Design, and Header Call-to-Action cards on a Trial organisation" />
</Frame>

<Frame caption="Branding & Theme identity settings">
  <img src="https://assets.9pic.ai/docs/dashboard-guide/settings/branding-theme-identity.webp" alt="Branding and Theme tab showing the Header Call-to-Action card and Identity section with organisation name and logo fields" />
</Frame>

## How to Open

<Steps>
  <Step title="Go to Settings">
    Click **Settings** in the sidebar.
  </Step>

  <Step title="Select Branding & Theme">
    Click the **Branding & Theme** tab. This tab is selected by default when you open Settings.
  </Step>
</Steps>

You can also open it directly at `/settings?tab=branding`.

***

## Theme Colour

The theme colour is used for buttons, active link highlights, and accents across your gallery website. If you choose the **Fill** header design, it also fills the header background.

<Steps>
  <Step title="Pick a colour">
    In the **Theme Color** card, click the colour swatch on the left to open a colour picker, or type a hex value into the text field (e.g. `#2E6F40`).
  </Step>

  <Step title="Check the preview">
    The bar on the right of the colour input updates in real time to show the selected colour.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

<Tip>
  The default theme colour is `#2E6F40`. Use a colour with enough contrast against white so buttons stay readable.
</Tip>

***

## Header Design

Choose how the navigation header looks at the top of your gallery website. The tab shows a live preview of each option side by side.

| Style       | What it looks like                                                          |
| :---------- | :-------------------------------------------------------------------------- |
| **Default** | Clean white header with coloured accents on active links.                   |
| **Fill**    | Header background filled with your theme colour, with white text and links. |

<Steps>
  <Step title="Select a style">
    Click either the **Default** or **Fill** card. A blue checkmark badge appears on the selected style.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

<Frame caption="Header Design picker">
  <img src="https://assets.9pic.ai/docs/dashboard-guide/settings/header-design-picker.webp" alt="Branding and Theme tab showing the Header Design picker with Default and Fill previews and Default selected" />
</Frame>

***

## Header Call-to-Action Button

Add one prominent button to the website header that links to any URL — useful for registration pages, ticketing, or your main website.

<Steps>
  <Step title="Enable the CTA">
    In the **Header Call-to-Action** card, turn the **Enable Header CTA** switch on. The button text, link, and position fields appear below it.
  </Step>

  <Step title="Enter the button text">
    Type the button label in the **Button Text** field (e.g. `Register Now`).
  </Step>

  <Step title="Enter the link">
    Paste the full URL in the **Button Link** field (e.g. `https://example.com/register`).
  </Step>

  <Step title="Choose the position">
    Click **Left** or **Right** to place the button on the left or right side of the navigation links. A live preview shows the current setup.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

<Note>
  The button text, link, and position fields only appear after you turn the **Enable Header CTA** switch on. Turn it off to hide the CTA from your website without losing the saved values.
</Note>

<Tip>
  Keep the button text short and action-oriented — "Register Now", "Get Tickets", or "Learn More" all work well.
</Tip>

<Frame caption="Header CTA editor">
  <img src="https://assets.9pic.ai/docs/dashboard-guide/settings/header-cta-on.webp" alt="Header Call-to-Action editor showing the CTA toggle on, Register Now button text, example registration link, and live preview" />
</Frame>

***

## Identity

### Organisation Name

The organisation name is displayed across the dashboard and on your gallery website.

<Steps>
  <Step title="Update the name">
    In the **Identity** card, type your organisation's name into the **Organisation Name** field.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

### Logo

Your logo appears in the header of your gallery website.

<Steps>
  <Step title="Upload or paste a URL">
    Click the **Logo** field to upload an image file, or paste a public image URL.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

<Tip>
  Use a transparent PNG for the best look across both the Default and Fill header styles. **Maximum file size: 300KB.**
</Tip>

### Favicon

The favicon is the small icon that appears in browser tabs.

<Steps>
  <Step title="Upload or paste a URL">
    Click the **Favicon** field to upload an image, or paste a public image URL.
  </Step>

  <Step title="Save">
    Click **Save Branding Changes** at the bottom of the page.
  </Step>
</Steps>

<Tip>
  Recommended favicon size is **32x32** or **16x16** pixels. **Maximum file size: 100KB.**
</Tip>

***

## Common Questions

<AccordionGroup>
  <Accordion title="Where does the theme colour appear?">
    It is used for buttons, active link highlights, and accents across your gallery website. If you choose the **Fill** header design, it also fills the header background.
  </Accordion>

  <Accordion title="Can I add more than one CTA button?">
    No — only one header CTA button is supported. Choose the most important action for your visitors.
  </Accordion>

  <Accordion title="My logo looks blurry. What should I do?">
    Upload a higher-resolution PNG with a transparent background. Make sure the file is under the 300KB limit.
  </Accordion>

  <Accordion title="My favicon is not updating in the browser.">
    Clear your browser cache or open the site in a private window. Browsers cache favicons for a long time.
  </Accordion>

  <Accordion title="Why does the Save button stay disabled?">
    The button is disabled until you change a field on this tab. If you have edited the form and the button is still disabled, check for validation messages under each field.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Footer & Social" icon="share-nodes" href="/dashboard-guide/settings/footer">
    Add footer text and social media icons to every page.
  </Card>

  <Card title="Contact & About" icon="address-card" href="/dashboard-guide/settings/contact-about">
    Embed a contact form and write your About Us page.
  </Card>

  <Card title="Domain & Region" icon="globe" href="/dashboard-guide/settings/domain">
    Set your country or connect a custom domain.
  </Card>
</CardGroup>