> ## 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.

# Editor storefrontu - Vlastní CSS

> Přidejte do storefrontu vlastní CSS pro styl, který přesahuje možnosti vizuálních nastavení.

![Panel nastavení vlastního CSS v editoru storefrontu](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)

Editor storefrontu > Vlastní CSS

Panel Vlastní CSS poskytuje editor kódu pro přidání libovolných pravidel CSS do vašeho storefrontu. Použijte jej pro vše, co vizuální nastavení motivu nepokrývají: vlastní hover efekty, skrytí konkrétních prvků nebo doladění responzivního chování.

## Jak to funguje

1. Klikněte na ikonu **odemknout** pro zapnutí úprav.
2. Napište své CSS do editoru.
3. Klikněte na **Použít změny**. Náhled se aktualizuje okamžitě.
4. Klikněte na **Uložit** v horní liště editoru pro nasazení změn na živý storefront.

CSS se vkládá až po všech stylech motivu, takže vaše pravidla mají přednost. Editor se spouští uzamčený, aby se předešlo náhodným úpravám. Odemkněte jej pokaždé, když chcete provést změny.

> [!WARNING]
>
> Vlastní CSS se před uložením na serveru sanitizuje. Pravidla `@import` a `@charset` se odstraní a každý výraz `url(...)` se nahradí hodnotou `none`. To znamená, že pozadí obrázků, webová písma načítaná přes `@font-face` a pravidla `content: url(...)` se potichu přestanou zobrazovat. Pro použití obrázků nebo písem využijte nastavení motivu (například [Typografie](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/typography.md)) nebo je načtěte přes [vlastní skripty](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/custom-scripts.md).

## Použití proměnných motivu

Každé nastavení motivu je dostupné jako CSS proměnná. Odkazujte se na ně ve svém vlastním CSS, abyste zůstali v souladu se zbytkem motivu, pokud později změníte barvu v panelu Barvy, vaše vlastní CSS změnu automaticky převezme.

```css Příklad: vlastní banner s proměnnými motivu 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);
}
```

Úplný seznam CSS proměnných najdete v panelu [Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md).

> [!WARNING]
>
> Vlastní CSS se použije globálně na každou stránku vašeho storefrontu a uložené změny se projeví okamžitě. Otestujte je napříč více stránkami a zobrazeními, než je uložíte.

## Související články

> **[Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md)**
>
> Prohlížejte a kopírujte všechny dostupné CSS proměnné.

> **[Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md)**
>
> Definujte barevnou paletu storefrontu.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.