> ## 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 - Mukautettu CSS

> Lisää verkkokauppaan mukautettua CSS:ää tyylittelyyn, joka ei onnistu visuaalisilla asetuksilla.

<Frame caption="Teemaeditori > Mukautettu CSS">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-custom-css.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=46f2ae6187208e3dbe7ea08733e3d346" alt="Mukautetun CSS:n asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-custom-css.webp" />
</Frame>

Mukautetun CSS:n paneelissa on koodieditori, jolla lisäät verkkokauppaan vapaavalintaisia CSS-sääntöjä. Käytä sitä kaikkeen, mitä visuaaliset teema-asetukset eivät kata — mukautettuihin hover-efekteihin, yksittäisten elementtien piilottamiseen tai responsiivisen käyttäytymisen hienosäätöön.

## Miten se toimii

1. Ota muokkaus käyttöön napsauttamalla **unlock**-kuvaketta.
2. Kirjoita CSS editoriin.
3. Napsauta **Apply changes**. Esikatselu päivittyy heti.
4. Napsauta editorin yläpalkissa **Tallenna**, jolloin muutokset siirtyvät julkiseen verkkokauppaan.

CSS lisätään kaikkien teematyylien jälkeen, joten omat sääntösi menevät edelle. Editori on aluksi lukittu vahinkomuokkausten estämiseksi — avaa lukitus aina, kun haluat tehdä muutoksia.

<Warning>
  Mukautettu CSS puhdistetaan palvelimella ennen tallennusta. `@import`- ja `@charset`-säännöt poistetaan, ja jokainen `url(...)`-lauseke korvataan arvolla `none`. Tämä tarkoittaa, että taustakuvat, `@font-face`-säännöllä ladatut verkkofontit ja `content: url(...)` -säännöt hajoavat huomaamatta. Käytä kuva- ja fonttiaineistoihin teema-asetuksia (esimerkiksi [Typografia](/docs/fi/sales-channels/online-store/theme-editor/settings/typography)) tai lataa ne [mukautetuilla skripteillä](/docs/fi/sales-channels/online-store/custom-scripts).
</Warning>

## Teemamuuttujien käyttö

Jokainen teema-asetus on saatavilla CSS-muuttujana. Viittaa niihin mukautetussa CSS:ssä, jotta tyyli pysyy yhtenäisenä muun teeman kanssa — jos vaihdat myöhemmin värin Värit-paneelissa, mukautettu CSS ottaa muutoksen käyttöön automaattisesti.

<CodeGroup>
  ```css Esimerkki: mukautettu banneri teemamuuttujilla theme={null}
  .custom-banner {
    background-color: var(--storefront-color-background-contrast);
    color: var(--storefront-color-text-contrast);
    padding: 16px var(--storefront-layout-margin);
    border-radius: var(--storefront-button-border-radius);
  }
  ```
</CodeGroup>

Koko luettelo CSS-muuttujista löytyy [Teematyyli](/docs/fi/sales-channels/online-store/theme-editor/settings/theme-style)-paneelista.

<Warning>
  Mukautettu CSS vaikuttaa verkkokaupan jokaiseen sivuun, ja tallennetut muutokset tulevat voimaan välittömästi. Testaa muutokset useilla sivuilla ja eri näyttökoilla ennen tallennusta.
</Warning>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Teematyyli" icon="settings" href="/docs/fi/sales-channels/online-store/theme-editor/settings/theme-style">
    Selaa ja kopioi kaikki käytettävissä olevat CSS-muuttujat.
  </Card>

  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>
</CardGroup>