Torna a Aspetto del menu e CSS personalizzato

CSS personalizzato per la pagina del menu (riferimento per sviluppatori)

A chi è rivolto questo articolo

Questo è il riferimento per chi scrive il CSS personalizzato di una pagina del menu: uno sviluppatore web che lavora per il locale, oppure il referente tecnico del locale. Se vuoi solo scegliere colori, caratteri e immagini non ti serve; usa invece Aspetto del menu: scegli e personalizza la pagina del menu. Fai prima le impostazioni lì e scrivi CSS solo per ciò che le impostazioni non permettono.

Piano e accesso: il CSS personalizzato è la funzione a pagamento Menu Custom CSS, in aggiunta a Menu Templates. La scheda CSS personalizzato in Menu e tavoli → Aspetto del menu può essere aperta solo dall'amministratore dell'attività.

Cosa è consentito, e perché

Il CSS personalizzato è solo CSS. Non c'è JavaScript e non c'è HTML. Il tuo CSS modifica la pagina del menu che i clienti aprono dal codice QR, e nient'altro.

Tre scelte lo rendono sicuro per te e per i tuoi clienti:

Limitato alla pagina del menu. Ogni selettore che scrivi viene collocato automaticamente dentro la pagina del menu, quindi il tuo CSS non può raggiungere il resto del sito.
Parti protette. Il carrello, la finestra delle opzioni del piatto, il pulsante per chiamare il cameriere e gli avvisi dell'ordine sono fuori dalla portata del tuo CSS. Non puoi cambiarne lo stile né nasconderli. Seguono i tuoi colori, l'arrotondamento degli angoli e il carattere tramite le variabili CSS qui sotto, ma un errore nel tuo CSS non può mai impedire a un cliente di ordinare o di chiamare il cameriere.
Nessun indirizzo esterno. Un CSS non può caricare altri file, caratteri o immagini tramite indirizzo. Le immagini arrivano solo dalla tua libreria, tramite una variabile (vedi sotto).

Come viene applicato

Nella scheda CSS personalizzato scrivi in un editor di codice. Poco dopo che smetti di scrivere, il server controlla il CSS e segna i problemi con riga e colonna. Un clic su un problema porta al punto. L'editor conta i caratteri usati, su 65.536 consentiti.
Il CSS viene salvato insieme al resto della bozza e la cornice dell'anteprima lo mostra subito. Un CSS con problemi non viene salvato né pubblicato: la bozza mantiene l'ultima versione senza problemi finché non lo correggi.
Quando premi Pubblica, il server lo compila di nuovo. Non copia il tuo testo: legge ogni regola, la controlla con le regole di questo articolo e scrive il risultato con le parti che ha accettato. I commenti spariscono, gli spazi vengono ricostruiti e ogni selettore riceve il proprio ambito.
I clienti ricevono il CSS compilato, collegato nell'intestazione della pagina del menu, quindi la pagina non appare prima senza stile.

Inserisci un esempio aggiunge un piccolo CSS funzionante per il modello scelto. È un buon punto di partenza.

La scheda ha anche il pannello Hook e regole con ogni parte e variabile del modello attuale, ciascuna con un pulsante di copia.

Gli hook: `data-part`

Ogni sezione di un modello porta un nome nell'attributo data-part. Gli dai stile con un selettore di attributo:

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

Questi nomi sono l'interfaccia CSS pubblica del modello. Manteniamo stabili questi nomi e annunceremo in anticipo ogni cambiamento. Un selettore per una parte che il modello attuale non ha non trova nulla, quindi il CSS scritto per un modello non fa danni su un altro.

Le tue regole hanno la precedenza sugli stili del modello senza !important, con due eccezioni descritte nella sezione sulla risoluzione dei problemi.

Alcune parti esistono solo in certe situazioni (un logo, uno slogan, l'etichetta del tavolo, il selettore di quantità dopo che un piatto è stato aggiunto). Le tabelle lo indicano.

Classico (`classic`)

Parte	Cos'è
`header`	La barra in alto con logo, nome del locale, etichetta del tavolo e pulsanti di lingua, valuta e tema.
`category-nav`	La riga fissa dei link alle categorie sotto l'intestazione (solo con più di una categoria).
`category-link`	Un link in quella riga.
`allergen-note`	La piccola nota sugli allergeni (solo quando qualche piatto ha allergeni).
`category-section`	Una categoria intera: titolo e piatti.
`category-title`	Il titolo di una categoria.
`category-photo`	La piccola immagine della categoria accanto al titolo (quando la categoria ne ha una).
`item-card`	Il riquadro di un piatto.
`item-photo`	La foto di un piatto.
`item-name`	Il nome di un piatto (con l'etichetta "esaurito" quando serve).
`item-description`	La descrizione di un piatto.
`item-allergens`	Gli allergeni di un piatto.
`item-price`	Il prezzo di un piatto.
`quantity-stepper`	Il controllo con meno e più che sostituisce il pulsante Aggiungi quando il piatto è nell'ordine.
`add-button`	Il pulsante Aggiungi di un piatto.
`cart-bar`	La barra in basso con il numero di piatti e il totale; apre il carrello.

Hero (`hero`)

Parte	Cos'è
`page-background`	Lo strato dietro tutta la pagina: un morbido gradiente del colore di sfondo, oppure la tua immagine di sfondo sotto un velo.
`hero`	L'intero blocco dell'intestazione.
`hero-cover`	Lo strato di copertina dentro l'intestazione (assente con l'intestazione Semplice).
`logo`	La casella con il tuo logo (solo se l'attività ha un logo).
`company-name`	Il nome del locale nell'intestazione.
`table-label`	La pillola con tavolo e area (solo nella pagina QR di un tavolo).
`tagline`	Il tuo slogan sotto il nome (solo se ne hai scritto uno).
`language-button`	Il pulsante rotondo della lingua (solo se il menu ha più di una lingua).
`links`	La riga dei link del profilo.
`link`	Un link del profilo.
`link-icon`	L'icona di un link del profilo.
`info-chips`	La riga delle info rapide.
`info-chip`	Una info rapida.
`info-chip-icon`	L'icona di una info rapida.
`info-chip-label`	L'etichetta di una info rapida.
`info-chip-value`	Il valore di una info rapida, per esempio la password del WiFi.
`hours`	Il pannello degli orari di apertura.
`hours-row`	Un giorno negli orari di apertura.
`search`	Il modulo di ricerca.
`search-input`	Il campo di ricerca.
`allergen-note`	La piccola nota sugli allergeni.
`no-results`	La riga che dice che non è stato trovato nulla quando la ricerca non ha risultati.
`category-pills`	La riga delle categorie a pulsanti (o schede) che segue lo scorrimento (solo con più di una categoria).
`category-pill`	Un pulsante di categoria.
`category-section`	Una categoria intera: titolo e piatti.
`category-title`	Il titolo di una categoria.
`item-card`	Il riquadro di un piatto.
`item-photo`	La foto di un piatto (quando Foto dei piatti è attivo).
`item-name`	Il nome di un piatto.
`item-description`	La descrizione di un piatto (non mostrata nel layout Compatto).
`item-allergens`	Gli allergeni di un piatto.
`item-price`	Il prezzo di un piatto, in due parti.
`price-amount`	Il numero del prezzo.
`price-currency`	Il codice della valuta del prezzo.
`quantity-stepper`	Il controllo con meno e più che sostituisce il pulsante Aggiungi quando il piatto è nell'ordine.
`add-button`	Il pulsante Aggiungi rotondo di un piatto.
`tab-bar`	La barra mobile in basso.
`tab`	Una scheda di quella barra: Tutti, ognuna delle tue schede e Ordine.
`tab-badge`	Il piccolo numero sulla scheda Ordine (solo quando l'ordine non è vuoto).
`cart-bar`	La barra dell'ordine che prende il posto della barra delle schede quando Barra delle schede in basso è disattivata.

Schede dei gruppi: `data-group`

Ognuna delle tue schede di Schede del menu è un tab che porta anche data-group con la chiave che le hai dato (il campo Chiave della scheda). Così puoi dare stile a una scheda da sola:

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

Per raggiungere solo le schede che non sono tue (Tutti e Ordine) usa [data-part="tab"]:not([data-group]).

Variabili CSS

Il modello mette le sue impostazioni nella pagina come variabili CSS, che puoi leggere con var() e sovrascrivere su una parte. I colori sono tre: --menu-<nome> è il colore, --menu-on-<nome> è un colore di testo che si legge bene sopra di esso (bianco o quasi nero) e --menu-on-<nome>-muted ne è una versione più tenue.

Variabile	Significato	Classico	Hero
`--menu-primary`, `--menu-on-primary`, `--menu-on-primary-muted`	Colore principale	sì, se è impostato un colore principale o del marchio	sì
`--menu-accent`, `--menu-on-accent`, `--menu-on-accent-muted`	Colore di accento	no	sì
`--menu-background`, `--menu-on-background`, `--menu-on-background-muted`	Sfondo della pagina	no	sì
`--menu-surface`, `--menu-on-surface`, `--menu-on-surface-muted`	Schede e pannelli	no	sì
`--menu-text`, `--menu-on-text`, `--menu-on-text-muted`	Colore del testo	no	sì
`--menu-font-heading`, `--menu-font-body`	I caratteri scelti, pronti per `font-family`	no	sì
`--menu-radius`, `--menu-radius-control`, `--menu-radius-pill`	Raggio degli angoli dei riquadri, dei campi e dei piccoli pulsanti, e delle pillole	no	sì
`--menu-layout-items`, `--menu-layout-category-nav`, `--menu-layout-header`, `--menu-layout-blocks`	Il layout scelto, come parola	no	sì
`--menu-toggle-search`, `--menu-toggle-links`, `--menu-toggle-chips`, `--menu-toggle-bottom-nav`, `--menu-toggle-item-photos`, `--menu-toggle-allergens`	Gli interruttori, come `true` o `false`	no	sì
`--menu-image-cover`, `--menu-image-background`	Solo il nome dell'immagine scelta nelle Impostazioni, e solo quando ne è scelta una; non l'immagine in sé (per quella usa `--asset-<nome>`)	no	sì
`--asset-<nome>`	Un'immagine della tua libreria, pronta da usare come sfondo	sì	sì

Le variabili di layout e degli interruttori si limitano a riportare l'impostazione attuale. Cambiarle nel CSS non attiva né disattiva una sezione; per questo usa la scheda Impostazioni.

Per cambiare una variabile, impostala sulla parte che deve usare il nuovo valore:

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

Una variabile impostata su una parte raggiunge quella parte e tutto ciò che contiene, non il resto della pagina.

Immagini: solo tramite `var(--asset-<nome>)`

Nel CSS non puoi scrivere un indirizzo. Carica l'immagine nella scheda Immagini, dalle un nome (per esempio terrace) e usa la variabile --asset-terrace. Contiene un riferimento a un'immagine già pronto, quindi usala dove va un'immagine, come background-image o background:

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

Un nome che non esiste nella libreria non mostra nulla. Copia la variabile CSS sul riquadro dell'immagine copia il testo esatto. Un'immagine usata dal tuo CSS non può essere eliminata finché non la togli dal CSS.

Le regole

Cosa può contenere un CSS

Regole normali (selettore { proprietà: valore; }) e le at-rule @media, @supports, @container e @keyframes. Nient'altro: niente @import, niente @font-face, niente @layer, niente @charset.
@media, @supports e @container possono essere annidate l'una nell'altra fino a 4 livelli. Le regole dentro le regole (nesting CSS, il selettore &) non sono supportate.
Al massimo 65.536 caratteri e 2.000 selettori (ogni selettore di un elenco separato da virgole conta).
I commenti (/* ... */) vanno bene e vengono rimossi.
!important è ammesso, alla fine del valore.

Selettori

Solo parti della pagina del menu. I selettori per html, body, head, :root, :host e ::backdrop vengono rifiutati, così come gli attributi data-menu-root e data-protected.
Un selettore non può iniziare con un combinatore (>, +, ~). Scrivi [data-part="a"] > [data-part="b"], non > [data-part="b"].
Anche gli argomenti di :is(), :where(), :not() e :has() sono selettori e seguono la stessa regola: un argomento non può iniziare con +, ~ o |, né con > (tranne dentro :has()). Viene rifiutato come CSS_FORBIDDEN_SELECTOR.
Pseudo-classi con argomenti ammesse: :is(), :where(), :not(), :has(), :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :lang() e :dir(). Le pseudo-classi semplici come :hover, :active, :focus-visible e :disabled, e gli pseudo-elementi come ::before e ::after, vanno bene.
Niente sequenze di escape (barra rovesciata) nei selettori.

Valori

Niente url(), e nessun'altra funzione che carichi un indirizzo (src(), image(), image-set() e simili).
Sono ammesse solo queste funzioni:
- generali: var, calc, min, max, clamp, env
- colori: rgb, rgba, hsl, hsla, hwb, lab, lch, oklab, oklch, color, color-mix
- gradienti: linear-gradient, radial-gradient, conic-gradient e le loro forme repeating-
- trasformazioni: translate, translateX, translateY, translateZ, translate3d, rotate, rotateX, rotateY, rotateZ, rotate3d, scale, scaleX, scaleY, scaleZ, scale3d, skew, skewX, skewY, matrix, matrix3d, perspective
- filtri: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia
- tempi e layout: cubic-bezier, steps, minmax, repeat, fit-content
- forme: inset, circle, ellipse, polygon, rect
Niente sequenze di escape nei valori, e niente @ in un valore.
Ogni funzione che non è nell'elenco viene rifiutata, in un valore e anche nella condizione di @media, @supports o @container. Per esempio @supports selector(...) non funziona. Vengono rifiutate anche le funzioni nei selettori come ::part() e ::slotted().
Il testo è limitato, così il CSS non può scrivere parole nella pagina. Una stringa tra virgolette è ammessa solo in font-family, font, grid-template-areas, grid-template, font-feature-settings, font-variation-settings e font-language-override. content può essere solo "", none o normal. Una proprietà personalizzata (--qualcosa) non può contenere una stringa. list-style, text-overflow e quotes non possono usare var().
Le proprietà behavior, expression, -moz-binding e -webkit-binding vengono rifiutate.

Animazioni

I nomi in @keyframes devono iniziare con menu- e avere qualcosa dopo, per esempio menu-fade. I nomi dei keyframes sono condivisi da tutta la pagina, quindi i tuoi sono tenuti separati da quelli della pagina.
animation e animation-name possono nominare solo animazioni menu- (oppure none). Non possono usare var() né env().
Dentro @keyframes scrivi from, to o percentuali.

Caratteri

Solo gli spazi ASCII normali (spazio, tabulazione, a capo, ritorno a capo, form feed). Gli altri tipi di spazio, come lo spazio non separabile che pagine web e strumenti di chat spesso incollano, vengono rifiutati.
Niente < fuori da una stringa, niente caratteri di controllo, niente caratteri di formattazione invisibili e niente byte order mark (un carattere invisibile che alcuni editor mettono all'inizio di un file).
Niente escape con barra rovesciata fuori dalle stringhe, e niente -->.

Consiglio: Tieni il CSS in ASCII semplice quando puoi. I caratteri invisibili incollati da una pagina web o da una chat sono la causa più frequente di un errore che "non ha senso".

Messaggi di errore e come risolverli

L'editor elenca ogni problema come Riga 12, colonna 3: seguito dal messaggio, e lo segna nel testo. Il server segnala al massimo 50 problemi alla volta. Correggi i primi e gli altri spesso spariscono. L'editor mostra il messaggio nella tua lingua, non il codice. I nomi CSS_... qui sotto sono i nomi che l'API usa per ogni tipo di problema; uno sviluppatore o l'assistenza li vede nella risposta di rete di un salvataggio o di un controllo fallito.

`CSS_INVALID_SYNTAX`: il CSS ha un errore di sintassi

L'editor mostra: Il CSS contiene un errore di sintassi. Controlla la riga indicata e riprova.

Il testo non è ben formato: manca una }, una ) o un apice, un commento non è chiuso, c'è una dichiarazione fuori da una regola, un selettore con & o <, un nome di keyframes che non inizia con menu-, un'animazione che ne nomina un'altra, at-rule annidate troppo in profondità, oppure un carattere invisibile.

/* 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`: una regola non consentita

L'editor mostra: Questo CSS usa una regola non consentita (come @import o @font-face).

Hai usato una at-rule diversa da @media, @supports, @container o @keyframes, per esempio @import o @font-face. Rimuovila. I caratteri si scelgono in Impostazioni (ne sono inclusi otto) e le immagini arrivano dalla scheda Immagini.

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

`CSS_FORBIDDEN_SELECTOR`: una parte della pagina che non puoi cambiare

L'editor mostra: Questo CSS agisce su una parte della pagina che non puoi modificare. Usa solo le parti del menu (data-part).

Il selettore punta alla pagina stessa (html, body, :root), alle parti protette, oppure inizia con un combinatore. Punta a una parte del modello e imposta le variabili su una parte, non su :root. Lo stesso codice viene dato per un argomento di :is(), :where() o :not() che inizia con +, ~, | o >, per un argomento di :has() che inizia con +, ~ o |, e per :host, :host-context e ::backdrop.

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

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

`CSS_FORBIDDEN_URL`: gli indirizzi non sono ammessi

L'editor mostra: Gli indirizzi (url) non sono consentiti nel CSS. Usa una delle tue immagini caricate tramite la sua variabile --asset.

Hai usato url() o un altro modo per caricare un indirizzo. Carica l'immagine nella scheda Immagini e usa la sua variabile.

/* 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`: una funzione non consentita

L'editor mostra: Questo CSS usa una funzione non consentita.

Il valore usa una funzione che non è nell'elenco qui sopra (per esempio attr() o counter()), una sequenza di escape, oppure una @. Usa valori semplici o una delle funzioni consentite. Lo stesso codice viene dato per ::part(), ::slotted() e ogni altra funzione in un selettore che non è nell'elenco dei selettori qui sopra, e per selector() nella condizione di una @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`: una proprietà o un valore non consentiti

L'editor mostra: Questo CSS usa una proprietà non consentita.

La proprietà viene rifiutata (behavior, expression, -moz-binding), oppure una stringa tra virgolette è in una proprietà che non può contenerla, oppure content ha del testo, oppure list-style, text-overflow o quotes usano var(), oppure animation o animation-name usano var() o env(). Il CSS non può scrivere parole nella pagina del menu.

/* 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`: troppo grande

L'editor mostra: Il CSS è troppo grande. Accorcialo e riprova.

Il CSS ha più di 65.536 caratteri o più di 2.000 selettori. Elimina le regole che non usi più, unisci i selettori che hanno le stesse dichiarazioni (a, b { ... }) e metti i valori ripetuti in variabili. Aiuta anche accorciare spazi e commenti, perché i caratteri si contano come li hai scritti.

Tre esempi

Tutti e tre sono validi così come sono scritti. Cambia colori e nomi a piacere.

1. Intestazione scura e riquadri arrotondati (Classico)

L'intestazione di Classico è colorata con il colore principale, quindi si cambia con le variabili, non con una regola di sfondo. Imposta prima un colore principale (o il colore del marchio).

/* Intestazione scura, riquadri arrotondati */
[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. Un'intestazione Hero con un'immagine (Hero)

Carica un'immagine larga di nome terrace nella scheda Immagini. In Impostazioni lascia vuota la Foto di copertina, così il CSS può mettere l'immagine (una foto di copertina scelta nelle Impostazioni è scritta direttamente sull'elemento e vince, a meno che tu aggiunga !important).

/* Un'immagine della libreria nell'intestazione */
[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. Un pulsante Aggiungi con un altro stile (Classico e Hero)

Il pulsante Aggiungi mantiene il suo compito; cambia solo l'aspetto. Tienilo visibile e alto almeno 44 pixel, così resta facile da toccare.

[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;
}

Il secondo argomento di var() è un valore di riserva, quindi lo stesso CSS funziona in Classico, dove --menu-primary esiste solo se è impostato un colore principale o del marchio.

Una piccola animazione

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

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

Consiglio: Rispetta chi preferisce meno movimento. Racchiudi l'animazione in @media (prefers-reduced-motion: no-preference) { ... }.

Modalità sicura: `?nocss=1`

Aggiungi ?nocss=1 all'indirizzo della pagina del menu (oppure &nocss=1 se l'indirizzo ha già un ?) e la pagina si apre senza il tuo CSS. Usalo per vedere il modello così com'è, per capire se un problema viene dal tuo CSS, o quando te lo chiede l'assistenza. Non cambia nulla per gli altri visitatori.

Stabilità e cosa può fare la piattaforma

Manteniamo stabili i nomi. Le parti e le variabili elencate qui per un modello continuano a funzionare e un cambiamento sarà annunciato in anticipo.
La piattaforma può disattivare il CSS personalizzato per un'attività. L'assistenza può farlo, per esempio quando un CSS rende una pagina inutilizzabile. L'editor mostra allora Il CSS personalizzato è stato disattivato dalla piattaforma per la tua azienda, quindi i clienti non lo ricevono. La pagina continua a funzionare con il modello e le tue impostazioni. Contatta l'assistenza per riattivarlo.
Pubblica di nuovo dopo un aggiornamento della piattaforma. Il controllo del CSS ogni tanto diventa più severo. Quando l'editor mostra Il CSS personalizzato di questo menu è stato creato con una versione precedente ed è disattivato finché non pubblichi di nuovo, apri la scheda, correggi ciò che ora segnala e premi Pubblica. Fino ad allora i clienti vedono la pagina senza il tuo CSS.

Risoluzione dei problemi

Il mio CSS non fa nulla. L'anteprima mostra la bozza, ma i clienti vedono solo ciò che è pubblicato, quindi controlla di aver premuto Pubblica. Poi confronta con ?nocss=1. Assicurati che la parte esista nel tuo modello (le tabelle qui sopra); un selettore per una parte che manca non trova nulla.

Funziona per quasi tutto, ma non per lo sfondo dell'intestazione di Classico né per la copertina di Hero. Entrambi sono scritti direttamente sull'elemento quando sono impostati (l'intestazione di Classico quando c'è un colore principale, la copertina di Hero quando hai scelto una foto di copertina nelle Impostazioni). Per l'intestazione, cambia le variabili invece dello sfondo. Per la copertina, svuota l'impostazione Foto di copertina oppure aggiungi !important.

L'editor dice "Gli indirizzi (url) non sono consentiti nel CSS. Usa una delle tue immagini caricate tramite la sua variabile --asset." per un'immagine. (L'API lo chiama CSS_FORBIDDEN_URL.) Non puoi usare indirizzi. Carica l'immagine in Immagini e usa var(--asset-nome).

L'immagine non si vede. Controlla che il nome in --asset-nome sia esattamente quello sul riquadro dell'immagine e che tu l'abbia usato in background-image o background. Un nome con un errore di battitura non mostra nulla.

Ricevo un errore su una riga che sembra a posto. Cerca un carattere invisibile, spesso uno spazio non separabile o un byte order mark da testo incollato. Riscrivi gli spazi in quella riga, oppure incolla passando da un editor di testo semplice.

Non posso cambiare lo stile del carrello, del pulsante del cameriere o degli avvisi. È voluto. Seguono i tuoi colori, angoli e carattere tramite le variabili, e nessun CSS può nasconderli o romperli.

Ho cambiato modello e il mio CSS sembra sbagliato. Le parti hanno nomi e struttura diversi in ogni modello, quindi le regole scritte per Classico per lo più non valgono per Hero. Riscrivi i selettori dalla tabella del nuovo modello.

Posso usare un carattere che non è nell'elenco? No. @font-face non è ammesso. Scegli uno degli otto caratteri in Impostazioni → Caratteri.

Voglio salvare o spostare il mio CSS. Esporta il tema include il CSS personalizzato. Importa il tema lo riporta, nella stessa attività o in un'altra, se il suo piano include il CSS personalizzato.