Testreszabás CSS-változókkal

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 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:

: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:

: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:

.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

.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

: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

.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

.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

.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

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

Gyakori példák

Minden gomb kék:

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

Zöld pénztár:

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

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