# Testreszabás CSS-változókkal

> Az áruház színeinek átírása CSS-változókkal: gombok, szövegek, pénztár, termékkártya, kosárfiók, vásárlói fiók, bolt és termékoldal.

A FluentCart a színeket, kereteket és más megjelenési értékeket CSS-változókba teszi. Ha egy változó értékét felülírod, a megjelenés a sablon fájljainak szerkesztése és bonyolult CSS nélkül megváltozik, és a pénztár, a termékkártya vagy a vásárlói fiók is a márkádhoz igazítható.

Az áruház fő színeit CSS nélkül is beállíthatod a **FluentCart Pro → Beállítások → Áruház beállításai → Megjelenés** oldalon: ott a sablon színeit örökölheted, vagy színválasztókkal adhatsz meg globális gomb-, szöveg-, háttér-, keret- és beviteli mezőszíneket, élő előnézettel. Az oldal ugyanezeket az `--fct-*` változókat írja. A [Megjelenés](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/beallitasok-megjelenes/) fejezet szerint állítsd be a globális palettát, a CSS-t pedig az elemszintű finomhangolásra tartogasd.

## Gyors kezdés

1. Nyisd meg a **Megjelenés → Testreszabás → További CSS** oldalt.
2. Írd be a felülírandó változókat.
3. Kattints a **Közzététel** gombra.

Például így lesz kék az összes elsődleges gomb:

```css
:root {
  --fct-btn-bg-color: #0066cc;
}
```

A változók három helyre kerülhetnek:

1. a WordPress testreszabója (**További CSS**), ez az ajánlott hely,
2. a sablon `style.css` fájlja,
3. az oldalszerkesztő (Elementor, Bricks és társai) egyéni CSS mezője.

A változók a CSS egyik megoldása: egyszer megadod az értéket, és mindenhol azt használja az oldal, ahol a változóra hivatkoznak. A CSS-es testreszabás független a sablontól: sablonváltás után is megmarad, amíg a FluentCart aktív.

## Hova írd a szabályt

A globális változókat a `:root` szabályba írd, hogy az egész áruházra hassanak. Egy adott felület változóit a saját osztályába írd, hogy csak ott érvényesüljenek:

| Felület | Osztály |
|---|---|
| Egész webhely | `:root` |
| Pénztár | `.fct-checkout` |
| Termékkártya | `.fct-product-card` |
| Kosárfiók | `.fct-cart-drawer` |
| Vásárlói fiók | `.fct-customer-dashboard` |
| Bolt | `.fct-shop-app` |
| Termékoldal | `.fct-single-product-page` |

## Globális színek

Ezek egyszerre több oldalra hatnak, ezért az áruház egészét érintő változtatásra valók.

**Gombok**

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-btn-bg-color` | `#253241` | Elsődleges gomb háttere |
| `--fct-btn-text-color` | `#ffffff` | Elsődleges gomb szövege |
| `--fct-btn-border-color` | `#253241` | Elsődleges gomb kerete |

**Szövegek**

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-primary-text-color` | `#2F3448` | Címsorok és fontos szövegek |
| `--fct-secondary-text-color` | `#565865` | Leírások és törzsszöveg |

**Hátterek és keretek**

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-border-color` | `#d6dae1` | Beviteli mezők kerete és elválasztók |
| `--fct-primary-bg-color` | `#4f46e5` | Elsődleges háttér |
| `--fct-secondary-bg-color` | `#f9fafb` | Másodlagos háttér |

**Beviteli mezők**

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-input-bg-color` | `#ffffff` | Mező háttere |
| `--fct-input-text-color` | `#2F3448` | Mező szövege |
| `--fct-input-border-color` | `#d6dae1` | Mező kerete |

Példa, amellyel az összes gomb kék lesz:

```css
:root {
  --fct-btn-bg-color: #0066cc;
  --fct-btn-border-color: #0066cc;
}
```

## Pénztár

A pénztárnak saját változói vannak, hogy finomabban szabályozhasd.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-checkout-btn-bg-color` | `--fct-checkout-primary-bg-color` | A megrendelés gombja |
| `--fct-checkout-btn-text-color` | `#ffffff` | A gomb szövege |
| `--fct-checkout-input-bg-color` | `#ffffff` | Mező háttere |
| `--fct-checkout-input-text-color` | `theme('colors.system.dark')` | Mező szövege |
| `--fct-checkout-input-border-color` | `--fct-checkout-border-color` | Mező kerete |
| `--fct-checkout-summary-bg-color` | `#ffffff` | A rendelés összegzésének háttere |
| `--fct-checkout-payment-method-bg-color` | `#ffffff` | A fizetési módok háttere |
| `--fct-checkout-shipping-methods-bg` | `#ffffff` | A szállítási módok háttere |

Zöld pénztárgomb:

```css
.fct-checkout {
  --fct-checkout-btn-bg-color: #28a745;
}
```

## Termékkártya

A termékkártya a boltoldalon, a kapcsolódó termékeknél és a termékrácsokban jelenik meg.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-card-bg` | `#ffffff` | Kártya háttere |
| `--fct-card-border-color` | `#d6dae1` | Kártya kerete |
| `--fct-card-primary-text-color` | `#2F3448` | Termék neve |
| `--fct-card-text-color` | `#565865` | Termékleírás |
| `--fct-heading-color` | `#2F3448` | Kártyacímsorok |
| `--fct-card-btn-bg-color` | `#253241` | A kártya gombjának háttere |
| `--fct-card-btn-text-color` | `#ffffff` | A kártya gombjának szövege |

```css
.fct-product-card {
  --fct-card-bg: #f9f9f9;
  --fct-card-border-color: #e0e0e0;
  --fct-card-btn-bg-color: #0066cc;
}
```

## Termékgombok

A **Kosárba** és a **Vásárlás most** gomb külön stílust kap.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-add-to-cart-btn-bg-color` | `#ffffff` | Kosárba gomb háttere |
| `--fct-add-to-cart-btn-text-color` | `#2f3448` | Kosárba gomb szövege |
| `--fct-add-to-cart-btn-hover-bg-color` | `#f5f6f7` | Háttér rámutatáskor |
| `--fct-add-to-cart-btn-border-color` | `#d6dae1` | Kosárba gomb kerete |
| `--fct-direct-btn-bg-color` | `#253241` | Vásárlás most gomb háttere |
| `--fct-direct-btn-text-color` | `#ffffff` | Vásárlás most gomb szövege |

```css
:root {
  --fct-add-to-cart-btn-bg-color: #f0f0f0;
  --fct-add-to-cart-btn-text-color: #333;
  --fct-direct-btn-bg-color: #0066cc;
}
```

## Kosárfiók

A kosárfiók az oldal szélén kicsúszó kosár, külön testreszabható.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-cart-drawer-bg` | `#ffffff` | A fiók háttere |
| `--fct-cart-drawer-border-color` | `#d6dae1` | A fiók kerete |
| `--fct-cart-drawer-primary-text-color` | `#2F3448` | Elsődleges szöveg |
| `--fct-cart-drawer-secondary-text-color` | `#565865` | Másodlagos szöveg |
| `--fct-cart-drawer-btn-bg-color` | `#253241` | Műveleti gomb |
| `--fct-cart-drawer-btn-text-color` | `#ffffff` | A gomb szövege |
| `--fct-cart-drawer-open-btn-bg-color` | `#253241` | A kosárikon gombja |
| `--fct-view-cart-btn-bg-color` | `#253241` | A kosár megtekintése gomb |
| `--fct-cart-drawer-badge-bg-color` | `#ef4444` | A tételszám jelvényének háttere |
| `--fct-cart-drawer-badge-text-color` | `#ffffff` | A jelvény szövege |

```css
.fct-cart-drawer {
  --fct-cart-drawer-btn-bg-color: #0066cc;
  --fct-cart-drawer-badge-bg-color: #ff6b6b;
}
```

## Vásárlói fiók

A vásárlói fióknak saját színvilága van.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-customer-dashboard-primary-text-color` | `#2F3448` | Elsődleges szöveg |
| `--fct-customer-dashboard-secondary-text-color` | `#565865` | Másodlagos szöveg |
| `--fct-customer-dashboard-title-color` | `#1f2937` | Oldalcím |
| `--fct-customer-dashboard-sub-title-color` | `#6b7280` | Szakaszcím |
| `--fct-customer-dashboard-nav-text-color` | `#4b5563` | Menüpont szövege |
| `--fct-customer-dashboard-nav-active-text-color` | `#4f46e5` | Aktív menüpont szövege |
| `--fct-customer-dashboard-nav-active-bg-color` | `#eef2ff` | Aktív menüpont háttere |
| `--fct-customer-dashboard-nav-active-bar-color` | `#4f46e5` | Aktív menüpont jelzősávja |
| `--fct-customer-dashboard-btn-bg-color` | `#4f46e5` | Műveleti gomb |
| `--fct-customer-dashboard-btn-text-color` | `#ffffff` | A gomb szövege |
| `--fct-customer-dashboard-logout-btn-bg-color` | `#ef4444` | Kijelentkezés gomb |

```css
.fct-customer-dashboard {
  --fct-customer-dashboard-nav-active-bg-color: #0066cc;
  --fct-customer-dashboard-btn-bg-color: #0066cc;
}
```

## Bolt

A fő boltoldal megjelenése.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-shop-primary-text-color` | `#2F3448` | Elsődleges szöveg |
| `--fct-shop-secondary-text-color` | `#565865` | Másodlagos szöveg |
| `--fct-shop-primary-bg-color` | `#ffffff` | Elsődleges háttér |
| `--fct-shop-secondary-bg-color` | `#f9fafb` | Másodlagos háttér |
| `--fct-shop-btn-bg-color` | `#253241` | Szűrő és rendezés gombjai |
| `--fct-shop-btn-text-color` | `#ffffff` | A gombok szövege |
| `--fct-shop-paginator-bg` | `#ffffff` | Lapozó háttere |
| `--fct-shop-paginator-items-color` | `#4b5563` | Oldalszámok színe |
| `--fct-shop-paginator-items-active-bg` | `#4f46e5` | Az aktív oldal háttere |
| `--fct-shop-paginator-items-active-color` | `#ffffff` | Az aktív oldal szövege |
| `--fct-shop-paginator-items-hover-bg` | `#f3f4f6` | Háttér rámutatáskor |

```css
.fct-shop-app {
  --fct-shop-btn-bg-color: #0066cc;
  --fct-shop-paginator-items-active-bg: #0066cc;
}
```

## Termékoldal

Az egyes termékek oldalának változói.

| Változó | Alapérték | Mire hat |
|---|---|---|
| `--fct-single-product-primary-text-color` | `theme('colors.system.dark')` | Elsődleges szöveg |
| `--fct-single-product-secondary-text-color` | `theme('colors.system.mid')` | Másodlagos szöveg |
| `--fct-single-product-border-color` | `theme('colors.gray.outline')` | Elemek kerete |
| `--fct-single-product-active-border-color` | `theme('colors.primary.500')` | Aktív elem kerete |
| `--fct-single-product-qty-bg` | `#eaecf0` | A mennyiségmező háttere |
| `--fct-single-product-qty-text-color` | `#2F3448` | A mennyiségmező szövege |

```css
.fct-single-product-page {
  --fct-single-product-qty-bg: #f0f0f0;
  --fct-single-product-border-color: #e0e0e0;
}
```

## Gyakori példák

Minden gomb kék:

```css
:root {
  --fct-btn-bg-color: #0066cc;
  --fct-btn-border-color: #0066cc;
}
```

Zöld pénztár:

```css
.fct-checkout {
  --fct-checkout-btn-bg-color: #28a745;
  --fct-checkout-primary-bg-color: #28a745;
}
```

Kék aktív menüpont a vásárlói fiókban:

```css
.fct-customer-dashboard {
  --fct-customer-dashboard-nav-active-bg-color: #0066cc;
  --fct-customer-dashboard-nav-active-text-color: #ffffff;
}
```

## Tippek

1. Először globálisan dolgozz: a `:root` szabállyal az egész áruházat átszínezheted, mielőtt egyes oldalakat külön célzol.
2. Ha pontosabb szabályozás kell, az adott felület osztályát (például `.fct-checkout`) használd.
3. Változtatás után nézd át több oldalon, hogy minden egységes maradt-e.
4. A böngésző fejlesztői eszközeivel megnézheted, melyik változó melyik elemre hat.
5. Csak azokat a változókat írd felül, amelyekre szükséged van: a többinek jó az alapértéke.

## Tudnivalók

- Minden változónak van beépített tartaléka, ezért az áruház akkor is működik, ha egy változó hiányzik.
- A változók automatikusan örökölhetnek szülőváltozóktól.
- A harmadik féltől származó könyvtárak (például a csúszkát adó Swiper vagy az értesítéseket adó Toastify) változói nem szerepelnek ebben a listában.
- A változók teljes, aktuális listáját a FluentCart fájljai között, a `/resources/public/` mappában találod.