# Megjelenés: az áruház színei

> Az áruház színeinek és sarokkerekítésének beállítása: saját stílus, a sablonból öröklés vagy kézi testreszabás.

A **Megjelenés** oldalon CSS írása nélkül állíthatod be az áruház színeit: a boltét, a termékoldalét, a kosárét és a pénztárét. Három forrás közül választhatsz, és a jobb oldali élő előnézet azonnal mutatja a változást.

## Az oldal megnyitása

1. Nyisd meg a **FluentCart Pro → Beállítások** oldalt.
2. A bal oldali menüben kattints az **Áruház beállításai** pontra, majd a **Megjelenés** almenüre.

![A Megjelenés oldal a három színforrással és a webáruház előnézetével](./kepek/beallitasok-megjelenes.webp)

*A Megjelenés oldal a három színforrással és a webáruház előnézetével* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent-cart)

Bal oldalon a **Honnan származnak a színek és a sarokkerekítés** rész áll a három kártyával, jobb oldalon a **Webáruház előnézete**: egy minta termékkártya, kosár és szállítási cím űrlap a kiválasztott színekkel.

Az áruház stílusa néhány globális színből, valamint a kártyák, gombok és beviteli mezők sarokkerekítéséből épül fel. A bolt, az egyes termékoldal, a kosár, a pénztár és a vásárlói fiók minden gombja, kerete, mezője és panelje ezek valamelyikét használja. Ha itt módosítasz egy értéket, minden oldalon frissül, ahol használják. A három kártya közül egyszerre csak egy lehet aktív.

## 1. A FluentCart saját stílusa

Ez az alapértelmezés. Az áruház megtartja az eredeti színeket és sarokkerekítést, és semmilyen kiegészítő stílus nem kerül az oldalakra. Akkor válaszd, ha elég a gyári megjelenés, vagy ha vissza akarsz állni a tiszta alaphelyzetre.

## 2. Öröklés az aktív sablonból

Ezzel a kártyával az áruház a használt WordPress-sablon színeiből építi fel a saját palettáját. A FluentCart beolvassa a sablon színeit, és hozzárendeli a felületekhez, a szövegekhez, a kiemelő színhez és a gombokhoz. Azokat a köztes árnyalatokat, amelyeket a sablon nem ad meg (vonalak, elválasztók, halvány feliratok, rámutatáskor megjelenő árnyalatok, helyőrző szöveg), maga számolja ki. A gombfelirat színét a gomb színéhez mérten választja, így egy világos márkaszín mellett is olvasható marad a felirat. Ha később sablont váltasz, az áruház követi az új sablont.

A színek mellett a sablon sarokkerekítését is átveszi: a gombokét a sablon gombstílusából, a beviteli mezőkét a keresőmezőjéből. A termékkártyák megtartják a FluentCart saját sarkait.

Csak a színpaletta és a kerekítés öröklődik. A betűtípus, a térközök és az elrendezés változatlan marad.

Az előnézet azonnal frissül, így rögtön látod, átjöttek-e a sablon színei. Hogy mennyire pontos az eredmény, az attól függ, milyen színinformációt ad meg a sablon:

| Sablontípus | Hogyan olvassa be a FluentCart |
|---|---|
| Minden sablon, amely színpalettát ad át a WordPressnek: az összes blokksablon (teljes webhelyszerkesztős sablon) és a szerkesztőpalettát regisztráló klasszikus sablonok | A palettát olvassa be, és a gyakori szerepeket (alap, kontraszt, elsődleges, kiemelő) a saját színeihez rendeli. |
| Blokksablonok, amelyek a webhelyszerkesztőben gombszínt is megadnak, a rámutatásos állapottal együtt | A gombszíneket közvetlenül átveszi. |
| Astra, Blocksy, Kadence, Divi, GeneratePress és Bricks | A sablon saját beállításaiból közvetlenül olvassa ki a kiemelő, a szöveg-, a háttér- és a gombszíneket, így az admin előnézete és az éles áruház mindig egyezik. |

Ha a sablonod egyik csoportba sem tartozik, vagy nem akarsz a találgatásra hagyatkozni, válaszd a **Testreszabás** kártyát, és állítsd be a színeket kézzel.

## 3. Testreszabás

A **Testreszabás** kártya kinyílik, és húsz színválasztót mutat, csoportokba rendezve. Csak azok a színek kerülnek az áruházba, amelyeket beállítasz: az üresen hagyott választó a FluentCart alapszínét használja.

![A kinyitott Testreszabás kártya a színválasztókkal](./kepek/beallitasok-megjelenes-testreszabas.webp)

*A kinyitott Testreszabás kártya a színválasztókkal* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent-cart)

A kártyán a **SZÖVEG**, a **HÁTTEREK ÉS KERETEK**, a **GOMBOK** és az **ŰRLAPMEZŐK** csoport címe látszik, minden választónál egy „Hozzáadás…” mezővel. A csoportok és a színek hatása:

- **Szöveg**
  - **Elsődleges szöveg**: a termékcímek, az árak és a címsorok színe.
  - **Másodlagos szöveg**: a leírások, a feliratok és az inaktív menüpontok színe.
  - **Aktív szöveg**: a pénztár kijelölt lépése és az aktív hivatkozások színe.
- **Hátterek és keretek**
  - **Elsődleges háttér**: az aktív és kijelölt elemek mögötti márkaszín.
  - **Másodlagos háttér**: a bolt rácsa és a pénztár összesítője mögötti halvány panelek színe.
  - **Szegély**: a kártyák, beviteli mezők és finom vonalak színe.
  - **Aktív keret**: a kijelölt változat vagy fizetési mód körvonala.
  - **Másodlagos aktív keret**: a halványabb aktív körvonal a felugró pénztárban.
  - **Elválasztó**: a sorok és szakaszok közötti világosabb vonalak színe.
  - **Kártya háttere**: a termékkártyák és panelek felülete.
- **Gombok**
  - **Gomb háttere** és **Gomb szövege**: a pénztári, az **Azonnali vásárlás** és a bolt többi elsődleges gombja.
  - **Gomb háttere rámutatáskor** és **Gomb szövege rámutatáskor**: ugyanezek a gombok rámutatáskor.
  - **Másodlagos gomb háttér**, **Másodlagos gomb szöveg**, **Másodlagos gomb keret** és **Másodlagos gomb rámutatási állapota**: a **Kosárba teszem** és a többi körvonalas gomb.
- **Űrlapmezők**
  - **Beviteli mező háttere**, **Beviteli szöveg**, **Helyőrző szöveg** és **Kikapcsolt beviteli mező háttere**: a pénztár, a címűrlapok és a vásárlói fiók mezői.

A színt kétféleképpen adhatod meg: kattints a választó színmintájára, és válaszd ki látványosan, vagy írj be egy hexadecimális értéket (például `#00009F`) a szövegmezőbe. Az előnézet mentés előtt is frissül, amint az érték érvényes. Egyetlen szín törléséhez kattints a választó × jelére.

Az összes szín törléséhez kattints a színválasztók listája jobb felső sarkában lévő, körkörös nyilat ábrázoló ikonra. Ez minden választót üresre állít, mintha egyet sem állítottál volna be. A visszaállítás is csak mentés után lép életbe, mint az oldal minden más változtatása.

A színek alatt a **SZEGÉLY LEKEREKÍTÉSE** csoportban három felület sarokkerekítését adhatod meg:

| Beállítás | Mire hat |
|---|---|
| **Kártya** | a termékkártyák és a képeik sarkai |
| **Gomb** | a **Kosárba teszem**, a pénztári és a többi műveleti gomb |
| **Űrlapmező** | a szövegmezők, legördülő listák, szövegterületek és mennyiségmezők |

Pixelértékhez elég egy szám (például `8`), de mértékegységgel is megadhatod (például `8px`, `0.5rem` vagy `1em`). Az üresen hagyott mező a FluentCart alapértelmezett kerekítését használja.

## Mentés

A változtatások alkalmazásához kattints a képernyő jobb felső sarkában a **Mentés** gombra. Az áruház a következő oldalbetöltéskor már az új színeket mutatja, a felugró pénztárat is beleértve, és a beállítások addig maradnak, amíg át nem írod őket.

Ha a beágyazott Stripe-pénztárral fogadsz kártyás fizetést, a Stripe fizetési űrlapja is átveszi a beviteli mező háttérszínét, a beviteli szöveg színét és az elsődleges háttérszínt, így nem lóg ki a márkázott pénztárból.

Az oldal az általános színeket állítja, amelyekből a többi felület örököl. Egyetlen elem átformázásához, illetve a térközök, a kerekítés és a betűtípus finomhangolásához továbbra is felülírhatod a FluentCart CSS-változóit. Amit ezen az oldalon beállítasz, ugyanezekként a változókként kerül az oldalra, így az egyéni CSS-ed ráépülhet.