Communities – Benutzerdefiniertes CSS/JS zu Gruppen hinzufügen

Füge benutzerdefiniertes CSS und JavaScript zu deinen Community-Gruppen hinzu, um Branding, Layout und interaktive Funktionen individuell anzupassen. Dieser Artikel zeigt dir, wo du eigenes CSS oder JavaScript hinzufügen kannst.

Hinweis: ProfitBoost bietet keine Unterstützung, Empfehlungen oder Hilfestellung für benutzerdefinierten Code (einschließlich Erstellung, Fehlerbehebung oder Wartung).

INHALTSVERZEICHNIS

Was bedeutet das Hinzufügen von benutzerdefiniertem CSS/JS zu Gruppen?
Vorteile von benutzerdefiniertem CSS/JS
So fügst du benutzerdefiniertes CSS/JS hinzu
Häufig gestellte Fragen
Verwandte Artikel

Was bedeutet das Hinzufügen von benutzerdefiniertem CSS/JS zu Gruppen?

Durch das Hinzufügen von benutzerdefiniertem CSS und JavaScript auf Gruppenebene kannst du das Aussehen und Verhalten einer bestimmten Gruppe ändern, ohne andere Bereiche der Communities zu beeinflussen.

Du kannst den Code direkt einfügen, sicher testen und anschließend für Mitglieder veröffentlichen.

Vorteile von benutzerdefiniertem CSS/JS

Präzises Branding: Passe Schriftarten, Abstände und Komponenten an deine Markenrichtlinien an.
Gezielte Änderungen: CSS und JS können auf eine einzelne Gruppe beschränkt werden, ohne andere Gruppen zu beeinflussen.
Kontrollierte Veröffentlichung: Nutze die Testvorschau vor der Aktivierung des Live-Modus.
Bessere Benutzererfahrung: Verbessere Navigation oder Mikrointeraktionen mit kleinen JavaScript-Snippets.
Flexible mobile Darstellung: Passe responsive Regeln für Smartphones und Tablets an.

So fügst du benutzerdefiniertes CSS/JS zu Gruppen hinzu

Melde dich in deinem Sub-Account an.
Gehe zu Memberships > Communities > Groups.
Melde dich bei der Gruppe an, die du anpassen möchtest.
Klicke auf Settings.
Öffne den Reiter Branding.
Scrolle nach unten zu Advanced Options und erweitere diesen Bereich.
Scrolle zu den Feldern Custom CSS und Custom JavaScript.
Füge deinen Code ein.
Klicke auf Test Preview, um die Änderungen zu überprüfen.
Wenn alles korrekt aussieht, aktiviere Live Mode.
Falls Anpassungen nötig sind, ändere den Code und teste erneut.
Klicke auf Save, um die Änderungen zu speichern.

Häufig gestellte Fragen

F: Kann ich benutzerdefinierten Code schnell deaktivieren, um Fehler zu beheben?

Ja. Deaktiviere einfach den Live Mode.

F: Was sollte ich tun, wenn nach dem Hinzufügen von benutzerdefiniertem Code Probleme auftreten?

Wenn in einer Community Probleme auftreten, in der benutzerdefiniertes HTML, CSS oder JavaScript verwendet wird, solltest du zunächst prüfen, ob der Fehler durch den benutzerdefinierten Code verursacht wird.

Füge dazu customCode=false an das Ende der Community-URL in der Adresszeile deines Browsers an und drücke Enter.

Beispiel:

https://deine-community-url.com?customCode=false

Dadurch wird der benutzerdefinierte Code für die aktuelle Sitzung deaktiviert.

Wenn das Problem anschließend verschwindet, liegt die Ursache wahrscheinlich im benutzerdefinierten Code und dieser sollte überprüft oder angepasst werden.

F: Wie kann ich unterschiedliche Styles für den Dark Mode und Light Mode verwenden?

Um gezielt Styles für den Dark Mode anzuwenden, verwende die CSS-Klasse:

.dark

Diese Klasse wird automatisch auf das Root-Element angewendet, wenn der Nachtmodus aktiv ist.

Vermeide möglichst allgemeine Selektoren wie:

div:nth-of-type(2)

es sei denn, du bist sicher, dass dadurch keine anderen Bereiche der Seite beeinflusst werden.

Teste und überprüfe immer sowohl den Light Mode als auch den Dark Mode, um eine konsistente Darstellung sicherzustellen.