> ## 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). # 🎨 So legen Sie benutzerdefiniertes CSS für die App für Terminbuchungen fest > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Möchten Sie, dass Ihr Buchungs-Widget genau dem Branding Ihres Shops entspricht? Hoppy Appointments Sie können Ihr eigenes CSS auf den integrierten Designeinstellungen hinzufügen, so dass Sie Schriftarten, Farben, Abstände, Schaltflächen und mehr fein abstimmen können. Dieser Leitfaden führt Sie durch das Hinzufügen und Anwenden von benutzerdefiniertem CSS auf das Buchungs-Widget. --- # **⚠️ Bevor Sie beginnen** Bevor Sie benutzerdefiniertes CSS verwenden, stellen Sie sicher, dass Sie: * Die **Hoppy Appointments** App installiert auf Ihrem Shopify Lager * Mindestens ein aktiver Dienst * Grundkenntnisse mit CSS-Selektoren und Deklarationen 💡 Für die meisten Designänderungen - Farben, Schriftarten, Logos und Button-Styles - verwenden Sie das integrierte **Design** Einstellungen zuerst. Custom CSS ist am besten, wenn Sie Änderungen benötigen, die die integrierten Optionen nicht abdecken. Für einen vollständigen Überblick über die eingebauten Designoptionen, siehe **Terminbuchungen - Design & Styling-Optionen**. --- # **🛠️ Schritt 1 - Öffnen Sie den Custom CSS Editor** Custom CSS kann an zwei Stellen verwaltet werden. ## **Globales CSS (gilt standardmäßig für alle Dienste)** 1. Offen **Hoppy Appointments** App. 2. Klicken **Einstellungen** im App Menü 3. Klicken **Design** 4. Scrollen Sie nach unten zum **Custom CSS** Karte am Ende der Seite ## **Per-Service CSS (überschreibt globales CSS für einen Service)** 1. Offen **Hoppy Appointments** App. 2. Gehen Sie zu **Dienstleistungen** 3. Klicken Sie auf den Service, den Sie stylen möchten 4. Klicken Sie **Design** Spitze 5. Stellen Sie sicher, dass **Folgen Sie nicht den Standard-Themeneinstellungen** sollte kontrolliert werden 6. Scrollen Sie nach unten zum **Custom CSS** Karte --- # **🛠️ Schritt 2 - Wählen Sie globales oder Service Level CSS** Beim Bearbeiten von CSS auf einem Dienst **Design** Tab, du wirst einen Toggle sehen: **Folgen Sie nicht den Standard-Themeneinstellungen** * **Ausgeschaltet** → der Dienst verwendet das globale CSS von **Settings → Design** * **am** → der Dienst verwendet sein eigenes CSS von der Service-Ebene **Design** Spitze Auf diese Weise können Sie einen einheitlichen Stil für alle Dienste beibehalten oder bestimmten Diensten ein einzigartiges Aussehen verleihen. --- # **🛠️ Schritt 3 - Schreiben Sie Ihr CSS** Der CSS-Editor beginnt mit einer Standardvorlage, die die gängigsten Widget-Selektoren enthält. Sie können die Vorlage durch Ihre eigenen Regeln ersetzen oder erweitern. ## **Hauptumschlagklassen** Auswahl Was es zielt `.futureblink-appointment` Das gesamte Booking Widget `.futureblink-appointment .dialog` Der Hauptbuchungsdialog (Desktop) `.futureblink-appointment.mobile .dialog` Der Hauptbuchungsdialog (mobil) `.futureblink-appointment .userInfoSection` Das Service Details Panel ## **Gemeinsame Selektoren, die Sie stylen können** Auswahl Was es zielt `.futureblink-appointment .confirm-btn` Button Bestätigen / Buchen `.futureblink-appointment .continue-btn` Weiter Button `.futureblink-appointment .back-btn` Zurück-Taste `.futureblink-appointment .time-slot.selected` Ausgewähltes Zeitfenster `.futureblink-appointment .highlighted_date.react-calendar__tile--active` Ausgewähltes Kalenderdatum `.futureblink-appointment .schedule-form` Kundenbuchungsformular `.futureblink-appointment .meeting-booked` Erfolgs-/Bestätigungsseite ## **Beispiel** .futureblink-appointment .confirm-btn Hintergrundfarbe: #2563eb; Farbe: #ffffff; Grenzradius: 8px; } .futureblink-appointment.mobile .confirm-btn Hintergrundfarbe: #1d4ed8; } ℹ️ Sie tun dies **nicht** muss hinzugefügt werden `!important` zu Ihren Erklärungen. Hoppy Appointments automatische Anhänge `!important` wenn das CSS in das Widget injiziert wird, was Ihren Regeln hilft, die Standardstile außer Kraft zu setzen. --- # **🛠️ Schritt 4 — Anwenden des CSS** Nach Eingabe Ihres CSS klicken Sie auf **Beantragen** Button unter dem Editor. * **Beantragen** → ermöglicht das benutzerdefinierte CSS und fügt es in das Buchungs-Widget ein * **Zurücksetzen** → Deaktiviert das benutzerdefinierte CSS und setzt den Editor auf die Standardvorlage zurück ⚠️ Custom CSS wird erst nach dem Klick wirksam **Beantragen**Das Einfügen von CSS in das Feld allein ändert nicht das Aussehen des Widgets. --- # **💾 Schritt 5 — Speichern und Vorschauen** 1. Klicken **Sparen** im oberen Balken 2. Warten Sie auf die Bestätigungsnachricht 3. Vorschau des Buchungs-Widgets auf Ihrer Storefront oder im Admin-Vorschaufeld Wenn Sie per Service CSS bearbeitet haben, stellen Sie sicher, dass **Folgen Sie nicht den Standard-Themeneinstellungen** toggle ist eingeschaltet, sonst wird das globale CSS weiterhin verwendet. --- # **💡 Tipps & Best Practices** * **Start klein** Ändern Sie ein Element nach dem anderen, damit Sie sehen können, was jede Regel beeinflusst * **Verwenden Sie spezifische Selektoren** — Ziel `.futureblink-appointment .your-class` anstelle von breiten Selektoren, die andere Teile Ihres Shops beeinflussen könnten * **Test auf Mobilgeräten** - Verwenden Sie die `.futureblink-appointment.mobile` Präfix, um das mobile Layout separat anzupassen * **Halten Sie ein Backup** - Kopieren Sie Ihr funktionierendes CSS in eine Notizendatei, bevor Sie darauf klicken **Zurücksetzen** * **Verwenden Sie zuerst die eingebauten Designeinstellungen** - Farben, Schriftarten und Logos sind dort einfacher zu verwalten und erfordern kein CSS-Wissen --- # **🐞 Fehlerbehebung** ## **Mein CSS wird nicht auf der Storefront angezeigt** 1. Stellen Sie sicher, dass Sie geklickt haben **Beantragen** im Custom CSS Editor 2. Stellen Sie sicher, dass Sie geklickt haben **Sparen** oben auf der Seite 3. Für CSS per Service stellen Sie sicher **Folgen Sie nicht den Standard-Themeneinstellungen** eingeschaltet 4. Überprüfen Sie, ob Ihre Selektoren mit den tatsächlichen Widget-Klassennamen übereinstimmen 5. Löschen Sie Ihren Browser-Cache oder testen Sie in einem Inkognito-Fenster ## **Das Widget kehrte zum Standard-Look zurück** Klicken **Zurücksetzen** Deaktiviert das CSS und stellt die Standardvorlage wieder her. Wenn Sie Ihre benutzerdefinierten Regeln zurückhaben möchten, fügen Sie sie erneut ein und klicken Sie auf **Beantragen**. ## **Einige Regeln funktionieren nicht** Das Auto `!important` Injektion funktioniert am besten mit einfachen `property: value;` Erklärungen. Sehr komplexes CSS - wie `@media` Abfragen, `@keyframes`, oder verschachtelte Selektoren - kann nicht zuverlässig transformiert werden. Halten Sie Ihre Regeln einfach für die konsistentesten Ergebnisse. --- # **📚 Verwandte Artikel** * **Terminbuchungen - Design & Styling-Optionen** * **So konfigurieren Sie Besprechungsorte für Terminbuchungen** * **Wie man Terminbuchungsdienste einrichtet**