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

# Teemaeditori - Ylätunnistepalkki

> Mukauta verkkokaupan ylätunnisteen tausta-, teksti-, kuvake- ja reunavärit.

<Frame>
  <img src="https://mintcdn.com/twicecommerce/5ARkyCTk5wMAizBn/images/theme-editor-header-bar.webp?fit=max&auto=format&n=5ARkyCTk5wMAizBn&q=85&s=dda87413fb67132aa4a29c6c8a0e3769" alt="Ylätunnistepalkin teemapaneeli" width="1920" height="1080" data-path="images/theme-editor-header-bar.webp" />
</Frame>

Ylätunnistepalkin paneeli ohjaa verkkokaupan ylätunnisteen värejä — eli ylänavigaatiota, jossa ovat logo, valikko sekä ostoskorin ja tilin kuvakkeet.

## Värit

| Asetus | Peritään kohteesta | Oletus    | Kuvaus                                                                              |
| ------ | ------------------ | --------- | ----------------------------------------------------------------------------------- |
| Tausta | Yleinen tausta     | `#FFFFFF` | Ylätunnisteen taustatäyttö.                                                         |
| Teksti | Yleinen teksti     | `#111826` | Navigointilinkkien ja kaupan nimen tekstiväri.                                      |
| Kuvake | —                  | `#111826` | Ostoskorin, tilin ja valikon kuvakkeet. Aina erikseen määritetty arvo, ei perintää. |
| Reuna  | Yleinen reuna      | `#E4E6EB` | Alareuna, joka erottaa ylätunnisteen sivun sisällöstä.                              |

### Perintä

Tausta, Teksti ja Reuna perivät oletuksena arvonsa vastaavasta yleisestä väristä [Värit](/docs/fi/sales-channels/online-store/theme-editor/settings/colors)-paneelissa. Kun asetat arvon, se ohittaa yleisen värin vain ylätunnisteen osalta.

Kuvakkeen väri on itsenäinen — sillä on aina erikseen määritetty arvo, eikä se palaudu yleiseen väriin.

### Nollaus

Napsauta ylätunnistepalkin paneelissa **Reset**, niin kaikki neljä asetusta palautuvat oletuksiinsa. Tausta, Teksti ja Reuna palaavat perimään yleiset värit. Kuvake nollautuu arvoon `#111826`.

## CSS-muuttujat

Jokainen ylätunnistepalkin väri vastaa CSS-muuttujaa, johon voit viitata [mukautetussa CSS:ssä](/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css):

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-header-background-color: #FFFFFF;
    --storefront-header-text-color: #111826;
    --storefront-header-icon-color: #111826;
    --storefront-header-border-color: #E4E6EB;
  }
  ```
</CodeGroup>

<Note>CSS-muuttujat palauttavat aina ratkaistun arvon. Jos asetus perii yleisen värin, muuttuja vastaa nykyistä yleistä arvoa — ei arvoa `null` tai tyhjää.</Note>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä yleinen väripaletti, josta ylätunnistepalkin asetukset perivät arvonsa.
  </Card>

  <Card title="Mukautettu CSS" icon="code" href="/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css">
    Ohita mikä tahansa tyyli mukautetulla CSS:llä.
  </Card>
</CardGroup>