> ## 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). # 🎨 Benutzerdefiniertes CSS für die Announcement Bar festlegen > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Möchtest du die Optik deiner Announcement Bar vollständig kontrollieren? 🎨 Die integrierten Design-Einstellungen decken die meisten Anpassungswünsche ab, aber mit der Funktion **Custom CSS** (Benutzerdefiniertes CSS) kannst du das Styling über die Standardoptionen hinaus feinabstimmen. Das ist nützlich für Händler, die ihre Markenvorgaben exakt umsetzen, Abstände anpassen, Typografie individualisieren oder theme-spezifische Stil-Konflikte lösen möchten. --- # **⚠️ Bevor du beginnst** Bevor du Custom CSS verwendest: * Stelle sicher, dass deine Announcement Bar bereits erstellt wurde. * Du solltest Grundkenntnisse in CSS haben oder Zugriff auf einen Entwickler haben. * Beachte, dass Custom CSS die Standard-Design-Einstellungen überschreiben kann. ℹ️ Die meisten Händler benötigen Custom CSS nie. Verwende es nur, wenn die integrierten Design-Optionen das gewünschte Erscheinungsbild nicht ermöglichen. --- # **🛠️ Schritt 1 — Den Design-Tab öffnen** Öffne die **Hoppy Announcement Bar**-App und navigiere zur Announcement Bar, die du anpassen möchtest. Dann: ➡️ Klicke auf den Tab **Design** (Design). Scrolle nach unten, bis du den Bereich **Custom CSS** (Benutzerdefiniertes CSS) findest. --- # **🎨 Schritt 2 — Custom CSS aktivieren** Innerhalb des Bereichs **Custom CSS**: ➡️ Klicke auf **Apply** (Anwenden). Sobald es aktiviert ist, erscheint ein CSS-Editor mit einem vorkonfigurierten CSS-Gerüst. Dieses Gerüst enthält alle unterstützten Selektoren, sodass du verschiedene Elemente der Announcement Bar leichter ansprechen kannst, ohne die Klassennamen manuell ermitteln zu müssen. --- # **✍️ Schritt 3 — Dein Custom CSS hinzufügen** Der Editor bietet vorgefertigte Selektoren für die wichtigsten Elemente der Announcement Bar. ### **Verfügbare Selektoren** | Selektor | Beschreibung | | ----- | ----- | | `.futureblink-announcement-bar` | Gesamter Announcement-Bar-Container | | `.futureblink-announcement-bar .title` | Haupttitel-Text | | `.futureblink-announcement-bar .subheading` | Untertitel-Text | | `.futureblink-announcement-bar .cta-button` | Call-to-Action-Button | | `.futureblink-announcement-bar .close-btn` | Schließen-Symbol | | `.futureblink-announcement-bar .arrow` | Navigationspfeile | | `.futureblink-announcement-bar .button-prev` | Button für die vorherige Folie | | `.futureblink-announcement-bar .button-next` | Button für die nächste Folie | ### **Mobile Selektoren** Um gezielt mobile Geräte anzusprechen, verwende die `.mobile`-Variante. Beispiele: * `.futureblink-announcement-bar.mobile .title` * `.futureblink-announcement-bar.mobile .cta-button` * `.futureblink-announcement-bar.mobile .close-btn` --- ### **CSS-Beispiele** Um den Titel in Großbuchstaben mit zusätzlichem Abstand darzustellen: `.futureblink-announcement-bar .title {` `text-transform: uppercase;` `letter-spacing: 2px;` `}` Um den CTA-Button auf mobilen Geräten über die volle Breite darzustellen: `.futureblink-announcement-bar.mobile .cta-button {` `width: 100%;` `}` 💡 Du kannst innerhalb der bereitgestellten Selektoren alle gültigen CSS-Eigenschaften verwenden. --- # **👀 Schritt 4 — Deine Änderungen in der Vorschau ansehen** Nachdem du dein CSS eingegeben hast: ➡️ Klicke auf **Apply** (Anwenden). Die Live-Vorschau wird automatisch aktualisiert, damit du deine Änderungen sofort überprüfen kannst. Falls Anpassungen nötig sind: ➡️ Bearbeite das CSS direkt im Editor. ➡️ Prüfe die aktualisierte Vorschau. --- # **⚙️ Wie Custom CSS funktioniert** Die App wendet automatisch zusätzliche Verarbeitungsschritte an, um sicherzustellen, dass dein Styling korrekt funktioniert. ### **Automatische \!important-Einfügung** Alle CSS-Deklarationen erhalten im Shop-Frontend automatisch die Priorität `!important`, damit Theme-Styles deine Änderungen nicht überschreiben. ### **Automatische mobile Verarbeitung** Selektoren mit der `.mobile`-Variante werden beim Rendern im Shop-Frontend automatisch in mobile Media Queries eingebettet. ### **Überschreibungspriorität von Design-Einstellungen** Custom CSS hat in der Regel Vorrang vor den Standard-Design-Einstellungen, die an anderer Stelle in der App vorgenommen wurden. --- # **💾 Schritt 5 — Speichern und veröffentlichen** Sobald du mit dem Styling zufrieden bist: ➡️ Klicke auf **Save** (Speichern). ➡️ Klicke auf **Publish** (Veröffentlichen). ⚠️ Alleiniges Speichern aktualisiert nicht dein Shop-Frontend. Die Konfiguration muss außerdem veröffentlicht werden, bevor Kund:innen die Änderungen sehen können. --- # **🔄 Custom CSS zurücksetzen** Wenn du zu den Standard-Design-Einstellungen zurückkehren möchtest: ➡️ Öffne den Bereich **Custom CSS**. ➡️ Klicke auf **Reset** (Zurücksetzen). Dadurch wird dein Custom CSS entfernt und die Steuerung wieder den Standard-Design-Einstellungen übergeben. --- # **💡 Hilfreiche Tipps** ### **Starte klein** Nimm eine Änderung nach der anderen vor, damit leichter erkennbar ist, was jede CSS-Regel beeinflusst. ### **Verwende die Live-Vorschau** Überprüfe Änderungen immer in der Vorschau, bevor du sie veröffentlichst. ### **Teste mobile Layouts** Selbst wenn dein CSS auf dem Desktop korrekt aussieht, solltest du das Erscheinungsbild auch auf mobilen Geräten überprüfen. ### **Erstelle eine Sicherungskopie** Bei umfangreicheren CSS-Anpassungen empfiehlt es sich, eine Kopie deines Codes außerhalb der App aufzubewahren. --- # **❓ Fehlerbehebung** Wenn dein CSS nicht wie erwartet angewendet wird: ➡️ Vergewissere dich, dass **Apply** (Anwenden) aktiviert wurde. ➡️ Stelle sicher, dass die Announcement Bar **Saved** (gespeichert) und **Published** (veröffentlicht) wurde. ➡️ Prüfe genau, ob die Selektornamen mit den angegebenen Klassennamen übereinstimmen. ➡️ Teste im Inkognito-Fenster, um Browser-Cache-Probleme auszuschließen. Für komplexe Styling-Anforderungen empfiehlt sich die Zusammenarbeit mit einem Shopify-Entwickler oder deinem Theme-Support-Team. --- # **🎉 Endergebnis** ✅ Deine Announcement Bar verwendet ein vollständig angepasstes Styling. ✅ Theme-Konflikte werden durch die automatische CSS-Priorisierung minimiert. ✅ Mobile und Desktop-Layouts können unabhängig voneinander gestaltet werden. ✅ Die Announcement Bar kann präziser an die visuelle Identität deiner Marke angepasst werden. Custom CSS bietet maximale Flexibilität, wenn die Standard-Design-Einstellungen nicht ausreichen, und hilft dir dabei, ein raffinierteres und konsistenteres Shop-Frontend-Erlebnis zu schaffen. 🚀