> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Come impostare CSS personalizzato per le prenotazioni di nomina App > ℹ️ **Note:** Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto. Vuoi che il tuo widget di prenotazione corrisponda esattamente alla marca del tuo negozio? Hoppy Appointments consente di aggiungere il proprio CSS in cima alle impostazioni di design integrate, in modo da poter definire font, colori, spaziature, pulsanti e altro ancora. Questa guida ti accompagna attraverso l'aggiunta e l'applicazione di CSS personalizzato al widget di prenotazione. --- # **⚠️ Prima di iniziare** Prima di utilizzare CSS personalizzato, assicurarsi di avere: * The **Hoppy Appointments** app installata sulla tua Shopify negozio * Almeno un servizio attivo * familiarità di base con selettori CSS e dichiarazioni 💡 Per la maggior parte dei cambiamenti di progettazione — colori, font, loghi e stili di pulsante — utilizzare il built-in **Design** Prima le impostazioni. CSS personalizzato è meglio quando è necessario modificare le opzioni integrate non coprire. Per una panoramica completa delle opzioni di progettazione integrate, vedere **Prenotazioni di nomina — Design & Styling Opzioni**. --- # **🛠️ Passo 1 — Aprire l'Editor CSS personalizzato** CSS personalizzato può essere gestito in due luoghi. ## **Global CSS (applica a tutti i servizi per impostazione predefinita)** 1. Aprire **Hoppy Appointments** app 2. Fare clic **Impostazioni impostazioni** nel menu app 3. Fare clic **Design** 4. Scroll down to the **CSS personalizzato** scheda in fondo alla pagina ## **Per-service CSS (override CSS globale per un servizio)** 1. Aprire **Hoppy Appointments** app 2. Vai a **Servizi** 3. Fare clic sul servizio desiderato 4. Fare clic su **Design** scheda 5. Assicurarsi che **Non seguire le impostazioni del tema predefinito** dovrebbe essere controllato 6. Scroll down to the **CSS personalizzato** carta --- # **🛠️ Passo 2 — Scegliere CSS globale o Service-Level** Quando si modifica CSS su un servizio **Design** scheda, vedrete un gioco: **Non seguire le impostazioni del tema predefinito** * **Fuori** → il servizio utilizza il CSS globale da **Impostazioni → Design** * **Su** → il servizio utilizza il proprio CSS dal livello di servizio **Design** scheda Questo consente di mantenere uno stile coerente in tutti i servizi, o dare servizi specifici un aspetto unico. --- # **🛠️ Passo 3 — Scrivi il tuo CSS** L'editor CSS inizia con un modello predefinito che include i selettori dei widget più comuni. È possibile sostituire o estendere il modello con le proprie regole. ## **Classi di fasciatura principali** Selezionatore Cosa mira `.futureblink-appointment` L'intero widget di prenotazione `.futureblink-appointment .dialog` La finestra di dialogo principale di prenotazione (desktop) `.futureblink-appointment.mobile .dialog` La finestra di dialogo principale di prenotazione (mobile) `.futureblink-appointment .userInfoSection` Il pannello dei dettagli del servizio ## **Selettori comuni è possibile** Selezionatore Cosa mira `.futureblink-appointment .confirm-btn` Conferma / Prenota pulsante `.futureblink-appointment .continue-btn` Continua a pulsante `.futureblink-appointment .back-btn` Pulsante posteriore `.futureblink-appointment .time-slot.selected` slot di tempo selezionato `.futureblink-appointment .highlighted_date.react-calendar__tile--active` Data del calendario selezionata `.futureblink-appointment .schedule-form` Modulo prenotazione clienti `.futureblink-appointment .meeting-booked` Successo / pagina di conferma ## **Esempio** .futureblink-appointing .confirm-btn { sfondo-colore: #2563eb; colore: #ffffffff; confine-radio: 8px; # .futureblink-appointment.mobile .confirm-btn { sfondo-colore: #1d4ed8; # ℹ️ Tu lo sai **non** bisogno di aggiungere `!important` alle vostre dichiarazioni. Hoppy Appointments Appends automaticamente `!important` quando il CSS viene iniettato nel widget, che aiuta le regole a superare gli stili di default. --- # **🛠️ Passo 4 — Applicare il CSS** Dopo aver inserito il CSS, fare clic su **Applicare** pulsante sotto l'editor. * **Applicare** → consente il CSS personalizzato e lo inietta nel widget di prenotazione * **Ripristino** → disabilita il CSS personalizzato e reindirizza l'editor al modello predefinito ⚠️ CSS personalizzato prende effetto solo dopo aver cliccato **Applicare**. incollare CSS nel campo da solo non cambia l'aspetto widget. --- # **💾 Passo 5 — Salva e anteprima** 1. Fare clic **Salva** nella barra superiore 2. Attendere il messaggio di conferma 3. Anteprima il widget di prenotazione sul tuo negozio o nel pannello di anteprima dell'amministratore Se hai modificato per servizio CSS, assicurati che il **Non seguire le impostazioni del tema predefinito** toggle è acceso, altrimenti il CSS globale sarà ancora utilizzato. --- # **💡 Consigli & Migliori Pratiche** * **Iniziare piccolo** — cambiare un elemento alla volta in modo da poter vedere cosa influisce ogni regola * **Utilizzare selettrici specifiche** — obiettivo `.futureblink-appointment .your-class` invece di grossi selettori che potrebbero influenzare altre parti del tuo negozio * **Prova su mobile** — utilizzare `.futureblink-appointment.mobile` prefisso per regolare il layout mobile separatamente * **Mantenere un backup** — copiare il CSS in un file di note prima di fare clic **Ripristino** * **Utilizzare prima le impostazioni di progettazione integrate** — colori, font e loghi sono più facili da gestire e non richiedono conoscenze CSS --- # **🐞 Risoluzione dei problemi** ## **Il mio CSS non mostra sul negozio** 1. Assicurarsi di aver cliccato **Applicare** nell'editor CSS personalizzato 2. Assicurarsi di aver cliccato **Salva** in cima alla pagina 3. Per CSS per servizio, assicurarsi **Non seguire le impostazioni del tema predefinito** è acceso 4. Controlla che i tuoi selettori corrispondano ai nomi delle classi dei widget effettivi 5. Cancella la tua cache del browser o prova in una finestra incognito ## **Il widget ritornato al look predefinito** Fare clic su **Ripristino** disabilita il CSS e ripristina il modello predefinito. Se si desidera ripristinare le regole personalizzate, incollarle di nuovo e fare clic **Applicare**. ## **Alcune regole non funzionano** L'auto `!important` iniezione funziona meglio con semplice `property: value;` dichiarazioni. CSS molto complesso — come `@media` query, `@keyframes`, o selettori nidi — non possono essere trasformati in modo affidabile. Mantenere le regole in modo semplice per i risultati più coerenti. --- # **📚 Articoli correlati** * **Prenotazioni di nomina — Design & Styling Opzioni** * **Come configurare le posizioni di riunione per le prenotazioni di appuntamenti** * **Come impostare i servizi di prenotazione di nomina**