Kthehu te Pamja e menysë dhe CSS e personalizuar

CSS e personalizuar për faqen e menysë (udhëzues për zhvilluesit)

Për kë është ky artikull

Ky është udhëzuesi për personin që shkruan CSS-në e personalizuar të një faqeje menuje: një zhvillues ueb që punon për vendin, ose personi teknik i vendit. Nëse doni vetëm të zgjidhni ngjyra, shkronja dhe foto, nuk ju duhet; përdorni Pamja e menysë: zgjidhni dhe personalizoni faqen e menysë. Bëni fillimisht cilësimet atje dhe shkruani CSS vetëm për atë që cilësimet nuk e bëjnë.

Plani dhe qasja: CSS-ja e personalizuar është funksioni me pagesë Menu Custom CSS, mbi Menu Templates. Skeda CSS e personalizuar te Menuja dhe tavolinat → Pamja e menysë hapet vetëm nga administratori i biznesit.

Çfarë lejohet, dhe pse

CSS-ja e personalizuar është vetëm CSS. Nuk ka JavaScript dhe nuk ka HTML. CSS-ja juaj ndryshon faqen e menysë që klientët hapin nga kodi QR, dhe asgjë tjetër.

Tri vendime e mbajnë këtë të sigurt për ju dhe për klientët tuaj:

E kufizuar te faqja e menysë. Çdo përzgjedhës që shkruani vendoset automatikisht brenda faqes së menysë, ndaj CSS-ja juaj nuk mund të arrijë pjesën tjetër të faqes.
Pjesë të mbrojtura. Shporta, dritarja e opsioneve të pjatës, butoni për thirrjen e kamarierit dhe njoftimet e porosisë janë jashtë arritjes së CSS-së suaj. Nuk mund t'i ristilizoni as t'i fshehni. Ato ndjekin ngjyrat, rrumbullakosjen e këndeve dhe shkronjat tuaja përmes variablave CSS më poshtë, por një gabim në CSS-në tuaj nuk mund ta pengojë kurrë një klient të porositë ose të thërrasë kamarierin.
Pa adresa nga jashtë. CSS-ja nuk mund të ngarkojë skedarë, shkronja ose foto të tjera me adresë. Fotot vijnë vetëm nga biblioteka juaj, përmes një variabli (shihni më poshtë).

Si zbatohet

Te skeda CSS e personalizuar shkruani në një redaktues kodi. Pak çaste pasi ndaloni së shkruari, serveri e kontrollon CSS-në dhe shënon problemet me rresht e kolonë. Një klik mbi një problem ju çon te vendi. Redaktuesi numëron shenjat që keni përdorur, nga 65 536 të lejuara.
CSS-ja ruhet bashkë me pjesën tjetër të draftit tuaj dhe korniza e pamjes paraprake e shfaq menjëherë. Një CSS me probleme nuk ruhet as nuk publikohet: drafti mban versionin e fundit pa probleme derisa ta rregulloni.
Kur shtypni Publiko, serveri e përpilon sërish. Nuk e kopjon tekstin tuaj: lexon çdo rregull, e kontrollon me rregullat e këtij artikulli dhe shkruan rezultatin nga pjesët që pranoi. Komentet zhduken, hapësirat rindërtohen dhe çdo përzgjedhës merr kufirin e vet.
Klientët marrin CSS-në e përpiluar, të lidhur në kokën e faqes së menysë, ndaj faqja nuk shfaqet fillimisht pa stil.

Fut një shembull shton një CSS të vogël që funksionon për shabllonin që zgjodhët. Është pikënisje e mirë.

Skeda ka edhe panelin Pikat e lidhjes dhe rregullat me çdo pjesë dhe variabël të shabllonit aktual, secila me buton kopjimi.

Pikat e lidhjes: `data-part`

Çdo seksion i një shablloni mban një emër te atributi data-part. Ju e stilizoni me një përzgjedhës atributi:

[data-part="item-card"] {
  border-radius: 16px;
}

Këto emra janë ndërfaqja publike CSS e shabllonit. I mbajmë këta emra të qëndrueshëm dhe do ta njoftojmë një ndryshim paraprakisht. Një përzgjedhës për një pjesë që shablloni aktual nuk e ka thjesht nuk gjen asgjë, ndaj CSS-ja e shkruar për një shabllon nuk bën dëm te tjetri.

CSS-ja juaj ka përparësi mbi stilet e vetë shabllonit pa !important, me dy përjashtime të përshkruara te seksioni i zgjidhjes së problemeve.

Disa pjesë ekzistojnë vetëm në situata të caktuara (një logo, një slogan, një etiketë tavoline, ndryshuesi i sasisë pasi pjata shtohet). Tabelat e tregojnë.

Klasik (`classic`)

Pjesa	Çfarë është
`header`	Shiriti lart me logon, emrin e vendit, etiketën e tavolinës dhe butonat e gjuhës, monedhës dhe temës.
`category-nav`	Rreshti ngjitës i lidhjeve të kategorive nën kokë (vetëm me më shumë se një kategori).
`category-link`	Një lidhje në atë rresht.
`allergen-note`	Shënimi i vogël për alergjenët (vetëm kur ndonjë pjatë ka alergjenë).
`category-section`	Një kategori e plotë: titulli dhe pjatat e saj.
`category-title`	Titulli i një kategorie.
`category-photo`	Fotoja e vogël e kategorisë pranë titullit (kur kategoria ka një).
`item-card`	Karta e një pjate.
`item-photo`	Fotoja e një pjate.
`item-name`	Emri i një pjate (me shenjën "e mbaruar" kur duhet).
`item-description`	Përshkrimi i një pjate.
`item-allergens`	Alergjenët e një pjate.
`item-price`	Çmimi i një pjate.
`quantity-stepper`	Kontrolli me minus e plus që zëvendëson butonin Shto pasi pjata është në porosi.
`add-button`	Butoni Shto i një pjate.
`cart-bar`	Shiriti poshtë me numrin e pjatave dhe totalin; ai hap shportën.

Hero (`hero`)

Pjesa	Çfarë është
`page-background`	Shtresa pas gjithë faqes: një gradient i butë i ngjyrës së sfondit, ose foto e sfondit nën një vello.
`hero`	Gjithë blloku i kokës.
`hero-cover`	Shtresa e kopertinës brenda kokës (nuk është me kokën E thjeshtë).
`logo`	Kutia me logon tuaj (vetëm nëse biznesi ka logo).
`company-name`	Emri i vendit në kokë.
`table-label`	Pilula me tavolinën dhe zonën (vetëm te faqja QR e një tavoline).
`tagline`	Slogani juaj nën emër (vetëm nëse e keni shkruar).
`language-button`	Butoni rrethor i gjuhës (vetëm nëse menyja ka më shumë se një gjuhë).
`links`	Rreshti i lidhjeve të profilit.
`link`	Një lidhje profili.
`link-icon`	Ikona e një lidhjeje profili.
`info-chips`	Rreshti i informacioneve të shpejta.
`info-chip`	Një informacion i shpejtë.
`info-chip-icon`	Ikona e një informacioni të shpejtë.
`info-chip-label`	Etiketa e një informacioni të shpejtë.
`info-chip-value`	Vlera e një informacioni të shpejtë, për shembull fjalëkalimi i WiFi-t.
`hours`	Paneli i orarit të punës.
`hours-row`	Një ditë te orari i punës.
`search`	Formulari i kërkimit.
`search-input`	Fusha e kërkimit.
`allergen-note`	Shënimi i vogël për alergjenët.
`no-results`	Rreshti që thotë se nuk u gjet asgjë kur kërkimi nuk ka përputhje.
`category-pills`	Rreshti i kategorive si butona (ose skeda) që ndjek lëvizjen e faqes (vetëm me më shumë se një kategori).
`category-pill`	Një buton kategorie.
`category-section`	Një kategori e plotë: titulli dhe pjatat e saj.
`category-title`	Titulli i një kategorie.
`item-card`	Karta e një pjate.
`item-photo`	Fotoja e një pjate (kur Fotot e pjatave është ndezur).
`item-name`	Emri i një pjate.
`item-description`	Përshkrimi i një pjate (nuk shfaqet te paraqitja Kompakte).
`item-allergens`	Alergjenët e një pjate.
`item-price`	Çmimi i një pjate, në dy pjesë.
`price-amount`	Numri i çmimit.
`price-currency`	Kodi i monedhës së çmimit.
`quantity-stepper`	Kontrolli me minus e plus që zëvendëson butonin Shto pasi pjata është në porosi.
`add-button`	Butoni rrethor Shto i një pjate.
`tab-bar`	Shiriti lundrues poshtë.
`tab`	Një skedë e atij shiriti: Të gjitha, secila nga skedat tuaja dhe Porosia.
`tab-badge`	Numri i vogël te skeda Porosia (vetëm kur porosia nuk është bosh).
`cart-bar`	Shiriti i porosisë që zë vendin e shiritit të skedave kur Shiriti i skedave poshtë është i fikur.

Skedat e grupeve: `data-group`

Çdo skedë e juaja nga Skedat e menysë është një tab që mban edhe data-group me çelësin që i keni dhënë (fusha Çelësi e skedës). Kështu mund ta stilizoni një skedë më vete:

[data-part="tab"][data-group="drinks"] {
  letter-spacing: 0.04em;
}

Për të arritur vetëm skedat që nuk janë tuajat (Të gjitha dhe Porosia), përdorni [data-part="tab"]:not([data-group]).

Variablat CSS

Shablloni i vë cilësimet e tij në faqe si variabla CSS, që mund t'i lexoni me var() dhe t'i ndryshoni mbi një pjesë. Ngjyrat vijnë në tri: --menu-<emri> është ngjyra, --menu-on-<emri> është një ngjyrë teksti që lexohet mirë mbi të (e bardhë ose pothuajse e zezë) dhe --menu-on-<emri>-muted është një version më i butë i saj.

Variabli	Kuptimi	Klasik	Hero
`--menu-primary`, `--menu-on-primary`, `--menu-on-primary-muted`	Ngjyra kryesore	po, nëse është caktuar ngjyra kryesore ose e markës	po
`--menu-accent`, `--menu-on-accent`, `--menu-on-accent-muted`	Ngjyra theksuese	jo	po
`--menu-background`, `--menu-on-background`, `--menu-on-background-muted`	Sfondi i faqes	jo	po
`--menu-surface`, `--menu-on-surface`, `--menu-on-surface-muted`	Kartat dhe panelet	jo	po
`--menu-text`, `--menu-on-text`, `--menu-on-text-muted`	Ngjyra e tekstit	jo	po
`--menu-font-heading`, `--menu-font-body`	Shkronjat e zgjedhura, gati për `font-family`	jo	po
`--menu-radius`, `--menu-radius-control`, `--menu-radius-pill`	Rrezja e këndeve të kartave, e fushave dhe butonave të vegjël, dhe e butonave rrethorë	jo	po
`--menu-layout-items`, `--menu-layout-category-nav`, `--menu-layout-header`, `--menu-layout-blocks`	Paraqitja e zgjedhur, si fjalë	jo	po
`--menu-toggle-search`, `--menu-toggle-links`, `--menu-toggle-chips`, `--menu-toggle-bottom-nav`, `--menu-toggle-item-photos`, `--menu-toggle-allergens`	Ndërprerësit, si `true` ose `false`	jo	po
`--menu-image-cover`, `--menu-image-background`	Vetëm emri i fotos së zgjedhur te Cilësimet, dhe vetëm kur është zgjedhur një; jo vetë fotoja (për të përdorni `--asset-<emri>`)	jo	po
`--asset-<emri>`	Një foto nga biblioteka juaj, gati për t'u përdorur si sfond	po	po

Variablat e paraqitjes dhe të ndërprerësve vetëm raportojnë cilësimin aktual. Ndryshimi i tyre në CSS nuk e ndez e as e fik një seksion; për këtë përdorni skedën Cilësimet.

Për të ndryshuar një variabël, vendoseni mbi pjesën që duhet ta përdorë vlerën e re:

[data-part="item-card"] {
  --menu-radius: 8px;
}

Një variabël e vendosur mbi një pjesë arrin atë pjesë dhe gjithçka brenda saj, jo pjesën tjetër të faqes.

Fotot: vetëm përmes `var(--asset-<emri>)`

Nuk mund të shkruani adresë në CSS. Ngarkoni foton te skeda Imazhet, jepini një emër (për shembull terrace) dhe përdorni variablin --asset-terrace. Ai mban një referencë fotoje të gatshme, ndaj përdoreni aty ku vendoset një foto, si background-image ose background:

[data-part="hero-cover"] {
  background-image: var(--asset-terrace);
  background-size: cover;
  background-position: center;
}

Një emër që nuk ekziston në bibliotekë nuk shfaq asgjë. Kopjo variablin CSS te karta e fotos kopjon tekstin e saktë. Një foto që CSS-ja juaj e përdor nuk mund të fshihet derisa ta hiqni nga CSS-ja.

Rregullat

Çfarë mund të përmbajë CSS-ja

Rregulla të zakonshme (përzgjedhës { veti: vlerë; }) dhe rregullat @ @media, @supports, @container dhe @keyframes. Asgjë tjetër: pa @import, pa @font-face, pa @layer, pa @charset.
@media, @supports dhe @container mund të futen njëri brenda tjetrit deri në 4 nivele. Rregullat brenda rregullave (nesting i CSS-së, përzgjedhësi &) nuk mbështeten.
Më së shumti 65 536 shenja dhe 2 000 përzgjedhës (çdo përzgjedhës në një listë me presje numërohet).
Komentet (/* ... */) lejohen dhe hiqen.
!important lejohet, në fund të vlerës.

Përzgjedhësit

Vetëm pjesë të faqes së menysë. Përzgjedhësit për html, body, head, :root, :host dhe ::backdrop refuzohen, si edhe atributet data-menu-root dhe data-protected.
Një përzgjedhës nuk mund të nisë me kombinator (>, +, ~). Shkruani [data-part="a"] > [data-part="b"], jo > [data-part="b"].
Argumentet e :is(), :where(), :not() dhe :has() janë gjithashtu përzgjedhës dhe ndjekin të njëjtin rregull: një argument nuk mund të nisë me +, ~ ose |, as me > (përveç brenda :has()). Kjo refuzohet si CSS_FORBIDDEN_SELECTOR.
Pseudo-klasat me argumente që lejohen: :is(), :where(), :not(), :has(), :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :lang() dhe :dir(). Pseudo-klasat e thjeshta si :hover, :active, :focus-visible dhe :disabled, dhe pseudo-elementet si ::before dhe ::after, lejohen.
Pa sekuenca ikjeje (vijë e pjerrët mbrapsht) në përzgjedhës.

Vlerat

Pa url(), dhe pa asnjë funksion tjetër që ngarkon adresë (src(), image(), image-set() e të ngjashme).
Lejohen vetëm këto funksione:
- të përgjithshme: var, calc, min, max, clamp, env
- ngjyra: rgb, rgba, hsl, hsla, hwb, lab, lch, oklab, oklch, color, color-mix
- gradientë: linear-gradient, radial-gradient, conic-gradient dhe format e tyre repeating-
- transformime: translate, translateX, translateY, translateZ, translate3d, rotate, rotateX, rotateY, rotateZ, rotate3d, scale, scaleX, scaleY, scaleZ, scale3d, skew, skewX, skewY, matrix, matrix3d, perspective
- filtra: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia
- kohë dhe paraqitje: cubic-bezier, steps, minmax, repeat, fit-content
- forma: inset, circle, ellipse, polygon, rect
Pa sekuenca ikjeje në vlera, dhe pa @ në një vlerë.
Çdo funksion që nuk është në listë refuzohet, në një vlerë dhe gjithashtu në kushtin e @media, @supports ose @container. Për shembull @supports selector(...) nuk funksionon. Refuzohen edhe funksionet në përzgjedhës si ::part() dhe ::slotted().
Teksti është i kufizuar, që CSS-ja të mos mund të shkruajë fjalë në faqe. Një varg i thonjëzuar lejohet vetëm te font-family, font, grid-template-areas, grid-template, font-feature-settings, font-variation-settings dhe font-language-override. content mund të jetë vetëm "", none ose normal. Një veti e personalizuar (--emri) nuk mund të mbajë varg. list-style, text-overflow dhe quotes nuk mund të marrin var().
Vetitë behavior, expression, -moz-binding dhe -webkit-binding refuzohen.

Animacionet

Emrat te @keyframes duhet të nisin me menu- dhe të kenë diçka pas tij, për shembull menu-fade. Emrat e keyframes janë të përbashkët për gjithë faqen, ndaj tuajt mbahen të ndarë nga ata të faqes.
animation dhe animation-name mund të emërtojnë vetëm animacione menu- (ose none). Nuk mund të përdorin var() ose env().
Brenda @keyframes shkruani from, to ose përqindje.

Shenjat

Vetëm hapësira e zakonshme ASCII (hapësirë, tab, rresht i ri, kthim karroce, form feed). Llojet e tjera të hapësirës, si hapësira e pandarë që ngjitet shpesh nga faqet e internetit dhe mjetet e bisedës, refuzohen.
Pa < jashtë një vargu, pa shenja kontrolli, pa shenja të padukshme formatimi dhe pa byte order mark (një shenjë e padukshme që disa redaktues e vënë në fillim të skedarit).
Pa sekuenca ikjeje jashtë vargjeve, dhe pa -->.

Këshillë: Mbajeni CSS-në në ASCII të thjeshtë sa herë të mundeni. Shenjat e padukshme të ngjitura nga një faqe interneti ose një bisedë janë shkaku më i shpeshtë i një gabimi që "nuk ka kuptim".

Mesazhet e gabimit dhe si zgjidhen

Redaktuesi e rendit çdo problem si Rreshti 12, kolona 3: me mesazhin pas tij, dhe e shënon në tekst. Serveri raporton më së shumti 50 probleme njëherësh. Rregulloni të parat dhe të tjerat shpesh zhduken. Redaktuesi shfaq mesazhin në gjuhën tuaj, jo kodin. Emrat CSS_... më poshtë janë emrat që API-ja përdor për çdo lloj problemi; një zhvillues ose mbështetja i sheh në përgjigjen e rrjetit pas një ruajtjeje ose kontrolli të dështuar.

`CSS_INVALID_SYNTAX`: CSS-ja ka gabim sintakse

Redaktuesi shfaq: CSS-i ka një gabim sintakse. Kontrolloni rreshtin e treguar dhe provoni përsëri.

Teksti nuk është i formuar mirë: mungon një }, ) ose thonjëz, një koment i papërfunduar, një deklarim jashtë rregullit, një përzgjedhës me & ose <, një emër keyframes që nuk nis me menu-, një animacion që emërton diçka tjetër, rregulla @ të futura shumë thellë, ose një shenjë e padukshme.

/* refused: CSS_INVALID_SYNTAX */
[data-part="item-card"] {
  border-radius: 16px;

[data-part="item-card"] {
  border-radius: 16px;
}

/* refused: CSS_INVALID_SYNTAX */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

`CSS_FORBIDDEN_AT_RULE`: një rregull që nuk lejohet

Redaktuesi shfaq: Ky CSS përdor një rregull që nuk lejohet (si @import ose @font-face).

Keni përdorur një rregull @ tjetër nga @media, @supports, @container ose @keyframes, për shembull @import ose @font-face. Hiqeni. Shkronjat zgjidhen te Cilësimet (përfshihen tetë shkronja), dhe fotot vijnë nga skeda Imazhet.

/* refused: CSS_FORBIDDEN_AT_RULE */
@import "fonts.css";

`CSS_FORBIDDEN_SELECTOR`: një pjesë e faqes që nuk mund ta ndryshoni

Redaktuesi shfaq: Ky CSS synon një pjesë të faqes që nuk mund ta ndryshoni. Përdorni vetëm pjesët e menysë (data-part).

Përzgjedhësi synon vetë faqen (html, body, :root), pjesët e mbrojtura, ose nis me kombinator. Synoni një pjesë të shabllonit dhe vendosini variablat mbi një pjesë, jo mbi :root. I njëjti kod jepet për një argument të :is(), :where() ose :not() që nis me +, ~, | ose >, për një argument të :has() që nis me +, ~ ose |, dhe për :host, :host-context dhe ::backdrop.

/* refused: CSS_FORBIDDEN_SELECTOR */
body {
  background-color: #fafafa;
}

[data-part="category-section"] {
  background-color: #fafafa;
}

`CSS_FORBIDDEN_URL`: adresat nuk lejohen

Redaktuesi shfaq: Adresat (url) nuk lejohen në CSS. Përdorni një nga fotot tuaja të ngarkuara përmes ndryshores së saj --asset.

Keni përdorur url() ose një mënyrë tjetër për të ngarkuar adresë. Ngarkoni foton te skeda Imazhet dhe përdorni variablin e saj.

/* refused: CSS_FORBIDDEN_URL */
[data-part="hero-cover"] {
  background-image: url("https://example.com/terrace.jpg");
}

[data-part="hero-cover"] {
  background-image: var(--asset-terrace);
}

`CSS_FORBIDDEN_FUNCTION`: një funksion që nuk lejohet

Redaktuesi shfaq: Ky CSS përdor një funksion që nuk lejohet.

Vlera përdor një funksion që nuk është në listën më sipër (për shembull attr() ose counter()), një sekuencë ikjeje, ose një @. Përdorni vlera të thjeshta ose një nga funksionet e lejuara. I njëjti kod jepet për ::part(), ::slotted() dhe çdo funksion tjetër në një përzgjedhës që nuk është në listën e përzgjedhësve më sipër, dhe për selector() në kushtin e një @supports.

/* refused: CSS_FORBIDDEN_FUNCTION */
[data-part="item-name"] {
  width: attr(data-width px);
}

[data-part="item-name"] {
  width: calc(100% - 8px);
}

`CSS_FORBIDDEN_PROPERTY`: një veti ose vlerë që nuk lejohet

Redaktuesi shfaq: Ky CSS përdor një veti që nuk lejohet.

Një veti refuzohet (behavior, expression, -moz-binding), ose një varg i thonjëzuar është në një veti që nuk mund ta marrë, ose content ka tekst, ose list-style, text-overflow ose quotes përdor var(), ose animation ose animation-name përdor var() ose env(). CSS-ja nuk mund të shkruajë fjalë në faqen e menysë.

/* refused: CSS_FORBIDDEN_PROPERTY */
[data-part="item-card"]::after {
  content: "Sale!";
}

[data-part="item-card"]::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--menu-primary, #1d4ed8);
}

`CSS_TOO_LARGE`: shumë e madhe

Redaktuesi shfaq: CSS-i është shumë i madh. Shkurtojeni dhe provoni përsëri.

CSS-ja ka më shumë se 65 536 shenja ose më shumë se 2 000 përzgjedhës. Hiqni rregullat që nuk i përdorni më, bashkoni përzgjedhësit që kanë të njëjtat deklarime (a, b { ... }) dhe vendosni vlerat e përsëritura në variabla. Edhe shkurtimi i hapësirave dhe komenteve ndihmon, sepse shenjat numërohen siç i keni shkruar.

Tri shembuj

Të tre janë të vlefshëm siç janë shkruar. Ndryshoni ngjyrat dhe emrat sipas nevojës.

1. Një kokë e errët dhe karta të rrumbullakosura (Klasik)

Koka e Klasik ngjyroset me ngjyrën kryesore, ndaj ndryshohet me variabla, jo me rregull sfondi. Caktoni fillimisht një ngjyrë kryesore (ose ngjyrën e markës).

/* Koka e errët, kartat e rrumbullakosura */
[data-part="header"] {
  --menu-primary: #111827;
  --menu-on-primary: #f9fafb;
  --menu-on-primary-muted: #cbd5e1;
  border-radius: 0 0 24px 24px;
}

[data-part="item-card"] {
  border-radius: 16px;
  border-color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

@media (min-width: 640px) {
  [data-part="item-card"] {
    padding: 16px;
  }
}

2. Një kokë Hero me foto (Hero)

Ngarkoni një foto të gjerë me emrin terrace te skeda Imazhet. Te Cilësimet, lëreni Foto kopertine bosh që CSS-ja ta vendosë foton (një foto kopertine e zgjedhur te Cilësimet shkruhet drejtpërdrejt mbi elementin dhe fiton, përveç nëse shtoni !important).

/* Një foto nga biblioteka në kokë */
[data-part="hero-cover"] {
  background-image: var(--asset-terrace);
  background-size: cover;
  background-position: center 35%;
}

[data-part="hero"] {
  min-height: 22rem;
}

[data-part="company-name"] {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

3. Një buton Shto i ristilizuar (Klasik dhe Hero)

Butoni Shto e mban punën e vet; ndryshon vetëm pamja. Mbajeni të dukshëm dhe të paktën 44 pikselë të lartë, që të mbetet i lehtë për t'u prekur.

[data-part="add-button"] {
  background-color: var(--menu-primary, #1d4ed8);
  color: var(--menu-on-primary, #ffffff);
  border: 0;
  border-radius: 9999px;
  min-height: 44px;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-part="add-button"]:active {
  transform: scale(0.94);
}

[data-part="add-button"]:focus-visible {
  outline: 2px solid var(--menu-primary, #1d4ed8);
  outline-offset: 2px;
}

[data-part="add-button"]:disabled {
  box-shadow: none;
}

Argumenti i dytë i var() është një vlerë rezervë, ndaj e njëjta CSS funksionon në Klasik, ku --menu-primary ekziston vetëm kur është caktuar ngjyra kryesore ose ajo e markës.

Një animacion i vogël

@keyframes menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-part="category-section"] {
  animation: menu-fade 0.4s ease both;
}

Këshillë: Respektoni njerëzit që preferojnë më pak lëvizje. Mbështilleni animacionin në @media (prefers-reduced-motion: no-preference) { ... }.

Mënyra e sigurt: `?nocss=1`

Shtoni ?nocss=1 te adresa e faqes së menysë (ose &nocss=1 nëse adresa ka tashmë një ?) dhe faqja hapet pa CSS-në tuaj. Përdoreni për ta parë shabllonin siç është, për të gjetur nëse një problem vjen nga CSS-ja juaj, ose kur ju kërkohet nga mbështetja. Nuk ndryshon asgjë për vizitorët e tjerë.

Qëndrueshmëria dhe çfarë mund të bëjë platforma

Emrat mbahen të qëndrueshëm. Pjesët dhe variablat e renditura këtu për një shabllon vazhdojnë të funksionojnë, dhe një ndryshim do të njoftohet paraprakisht.
Platforma mund ta fikë CSS-në e personalizuar për një biznes. Mbështetja mund ta bëjë këtë, për shembull kur një CSS e bën faqen të papërdorshme. Atëherë redaktuesi shfaq CSS-ja e personalizuar është fikur nga platforma për kompaninë tuaj, ndaj klientët nuk e marrin. Faqja vazhdon të funksionojë me shabllonin dhe cilësimet tuaja. Kontaktoni mbështetjen që ta rindezë.
Publikoni përsëri pas një përditësimi të platformës. Kontrolli i CSS-së herë pas here bëhet më i rreptë. Kur redaktuesi shfaq CSS-ja e personalizuar e kësaj menyje është bërë me një version më të vjetër dhe është e fikur derisa të publikoni përsëri, hapni skedën, rregulloni çdo gjë që tani shënon dhe shtypni Publiko. Deri atëherë, klientët e shohin faqen pa CSS-në tuaj.

Zgjidhja e problemeve

CSS-ja ime nuk bën asgjë. Pamja paraprake shfaq draftin, por klientët shohin vetëm atë që është publikuar, ndaj kontrolloni që keni shtypur Publiko. Pastaj krahasoni me ?nocss=1. Sigurohuni që pjesa ekziston te shablloni juaj (tabelat më sipër); një përzgjedhës për një pjesë që mungon nuk gjen asgjë.

Funksionon për shumicën e gjërave, por jo për sfondin e kokës së Klasik, as për kopertinën e Hero. Ato të dyja shkruhen drejtpërdrejt mbi elementin kur janë caktuar (koka e Klasik kur ka ngjyrë kryesore, kopertina e Hero kur keni zgjedhur foto kopertine te Cilësimet). Për kokën, ndryshoni variablat në vend të sfondit. Për kopertinën, pastroni cilësimin Foto kopertine, ose shtoni !important.

Redaktuesi thotë "Adresat (url) nuk lejohen në CSS. Përdorni një nga fotot tuaja të ngarkuara përmes ndryshores së saj --asset." për një foto. (API-ja e quan këtë CSS_FORBIDDEN_URL.) Nuk mund të përdorni adresa. Ngarkoni foton te Imazhet dhe përdorni var(--asset-emri).

Fotoja nuk shfaqet. Kontrolloni që emri te --asset-emri është saktësisht ai në kartën e fotos dhe që e përdorët te background-image ose background. Një emër me gabim shkrimi nuk shfaq asgjë.

Marr gabim te një rresht që duket në rregull. Kërkoni një shenjë të padukshme, shpesh një hapësirë e pandarë ose një byte order mark nga teksti i ngjitur. Rishkruani hapësirat në atë rresht, ose ngjitni përmes një redaktuesi me tekst të thjeshtë.

Nuk mund të ristilizoj shportën, butonin e kamarierit apo njoftimet. Kjo është me qëllim. Ato ndjekin ngjyrat, këndet dhe shkronjat tuaja përmes variablave, dhe asnjë CSS nuk mund t'i fshehë ose t'i prishë.

E ndryshova shabllonin dhe CSS-ja duket e gabuar. Pjesët kanë emra dhe strukturë të ndryshme në çdo shabllon, ndaj rregullat e shkruara për Klasik në shumicën e rasteve nuk vlejnë për Hero. Rishkruani përzgjedhësit nga tabela e shabllonit të ri.

A mund të përdor një shkronjë që nuk është në listë? Jo. @font-face nuk lejohet. Zgjidhni një nga tetë shkronjat te Cilësimet → Shkronjat.

Dua ta ruaj ose ta zhvendos CSS-në time. Eksporto temën përfshin CSS-në e personalizuar. Importo temën e kthen, në të njëjtin biznes ose në një tjetër, nëse plani i tij përfshin CSS të personalizuar.