> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/kurse-und-community/community-gruppen-mit-eigenem-code-anpassen.md).

# Community-Gruppen mit eigenem Code anpassen

> Für die meisten Anpassungen reichen die normalen Gestaltungsoptionen. Eigener CSS- oder JavaScript-Code ist nur sinnvoll, wenn eine bestimmte Darstellung oder Interaktion in **einer einzelnen Community-Gruppe** damit gezielt ergänzt werden soll.

## Was du hiermit verändern kannst

Jede Community-Gruppe kann eine eigene Gestaltung und eigenes Verhalten erhalten. Die Änderung gilt nur für die Gruppe, die du gerade geöffnet hast. Andere Gruppen bleiben unverändert.

Du findest dafür zwei getrennte Eingabefelder:

| Feld                  | Wofür es gedacht ist                                                | Typisches Ergebnis                                                                                   |
| --------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **Custom CSS**        | Das Erscheinungsbild gezielt verändern                              | Abstände, Farben, Schriftgrößen oder einzelne Bereiche anders darstellen                             |
| **Custom JavaScript** | Eine zusätzliche Interaktion oder ein bestimmtes Verhalten ergänzen | Ein Element reagiert auf einen Klick oder ein Hinweis wird unter einer klaren Bedingung eingeblendet |

CSS verändert vor allem, **wie etwas aussieht**. JavaScript kann verändern, **wie sich etwas verhält**. Weil JavaScript stärker in die Bedienung eingreifen kann, solltest du es besonders vorsichtig einsetzen.

> **Wichtig:** Dieser Bereich ist für bereits geprüften Code gedacht. Für das Erstellen, Prüfen oder Reparieren von eigenem Code gibt es keine verbindliche Hilfestellung innerhalb der Plattform. Wenn du selbst noch nicht sicher mit CSS oder JavaScript arbeitest, lass die Änderung von einer technischen Fachperson vorbereiten.

## Bevor du beginnst

Lege die Änderung so klein wie möglich an. Notiere zuerst in einem Satz, was sich für deine Mitglieder sichtbar ändern soll, zum Beispiel: „Der Hinweis in dieser Gruppe soll im Dunkelmodus gut lesbar bleiben.“

Halte außerdem bereit:

* Zugang zu der Community-Gruppe, die du ändern möchtest
* eine Kopie des aktuell hinterlegten Codes außerhalb der Plattform
* den Code für genau eine klar abgegrenzte Änderung
* genügend Zeit, um die Vorschau aus Sicht eines Mitglieds zu testen

Ändere nicht gleichzeitig Gestaltung, Abläufe und mehrere Bereiche. Dadurch lässt sich später kaum noch erkennen, welche Änderung ein Problem verursacht.

## Zur richtigen Gruppe wechseln

1. Öffne im Plattformmenü **Memberships** und anschließend **Communities**.
2. Wähle **Groups**.
3. Suche die Community-Gruppe aus, die du anpassen möchtest, und öffne sie über **Login** beziehungsweise den Eintrag der Gruppe.
4. Klicke innerhalb der geöffneten Gruppe auf **Settings**.
5. Öffne den Bereich **Branding**.
6. Wähle dort **Advanced**.

Jetzt siehst du die beiden Bereiche **Custom JavaScript** und **Custom CSS**. Darüber befindet sich außerdem der Schalter **Live Mode** und die Schaltfläche **Test Preview**.

## Code kontrolliert einfügen und prüfen

Gehe für jede Änderung denselben Ablauf durch:

1. **Sicherung erstellen:** Kopiere den bisherigen Inhalt des betroffenen Feldes an einen sicheren Ort. So kannst du immer zum letzten funktionierenden Stand zurückkehren.
2. **Nur eine Änderung einfügen:** Füge deinen geprüften CSS- oder JavaScript-Abschnitt in das passende Feld ein. Verwende CSS nicht im JavaScript-Feld und umgekehrt.
3. **Vorschau starten:** Klicke auf **Test Preview**. Die Änderung ist damit zunächst nicht für alle Mitglieder freigegeben.
4. **Mitgliederansicht prüfen:** Kontrolliere, ob die gewünschte Stelle korrekt aussieht und bedienbar bleibt. Prüfe insbesondere die helle und dunkle Ansicht sowie eine schmale Bildschirmbreite.
5. **Live schalten:** Erst wenn die Vorschau stimmt, aktiviere **Live Mode**.
6. **Speichern:** Klicke auf **Save**, damit die Freigabe übernommen wird.

Die im Bildschirm angezeigte Reihenfolge ist bewusst sinnvoll: erst Vorschau, dann Freigabe. Aktiviere **Live Mode** nicht, bevor du das Ergebnis selbst geprüft hast.

## Was du konkret testen solltest

| Prüfung                                                | Warum sie wichtig ist                                                                   |
| ------------------------------------------------------ | --------------------------------------------------------------------------------------- |
| Die Änderung betrifft nur die gewünschte Gruppe        | Eigener Code ist gruppenbezogen und soll nicht unbeabsichtigt an anderer Stelle wirken. |
| Inhalte bleiben lesbar                                 | Eine Farbe oder ein Abstand kann in einer anderen Ansicht schlecht lesbar werden.       |
| Schaltflächen und Navigation funktionieren weiterhin   | Besonders bei JavaScript kann eine zusätzliche Interaktion vorhandene Bedienung stören. |
| Helle und dunkle Ansicht sehen stimmig aus             | Eine Anpassung kann in einer Ansicht gut, in der anderen aber unlesbar sein.            |
| Die Ansicht funktioniert auf einem schmalen Bildschirm | Mitglieder nutzen Community-Inhalte häufig nicht nur am großen Bildschirm.              |
| Der Code ist nach dem Speichern noch vorhanden         | So erkennst du sofort, ob die Änderung tatsächlich übernommen wurde.                    |

Für die dunkle Ansicht sollte eine technische Fachperson CSS-Regeln gezielt an die dafür vorgesehene Klasse \`.dark\` binden. Positionsabhängige Auswahlregeln wie „das zweite Element eines Bereichs“ sind dagegen anfällig: Schon eine kleine Änderung an der Seite kann dazu führen, dass die Regel auf das falsche Element wirkt.

## Wenn nach der Freigabe etwas nicht stimmt

Schalte zuerst **Live Mode** aus und speichere. Damit wird der hinterlegte eigene Code für die Gruppe nicht mehr aktiv ausgeführt. Prüfe anschließend noch einmal die Mitgliederansicht.

Für eine schnelle Fehlereingrenzung kannst du die betroffene Gruppenadresse einmal mit dem Parameter \`customCode=false\` aufrufen, zum Beispiel:

\`<https://deine-community-adresse/?customCode=false\\`>

Dadurch wird der eigene Code nur für diese geöffnete Sitzung nicht angewendet. Wenn die Gruppe dann wieder korrekt funktioniert, liegt die Ursache sehr wahrscheinlich im hinterlegten Code.

> **Hinweis:** Der Parameter ist eine Diagnosehilfe für deinen aktuellen Aufruf. Er ersetzt keine dauerhafte Korrektur. Entferne oder überarbeite den problematischen Abschnitt anschließend im Bereich **Advanced** und teste erneut in der Vorschau.

## Häufige Fehler und die passende Lösung

| Situation                                          | Wahrscheinliche Ursache                                         | So gehst du vor                                                                                                |
| -------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| Nach der Änderung wirkt die Gruppe unübersichtlich | Zu viele Gestaltungsregeln wurden auf einmal ergänzt            | Zum letzten gesicherten Stand zurückkehren und die Anpassung in kleinen Schritten neu testen                   |
| Ein Bereich ist im Dunkelmodus nicht lesbar        | Die Regel berücksichtigt nur eine Ansicht                       | Helle und dunkle Ansicht getrennt prüfen und die Gestaltung gezielt ergänzen lassen                            |
| Eine Schaltfläche reagiert nicht mehr              | JavaScript greift in vorhandene Bedienabläufe ein               | **Live Mode** ausschalten, mit \`customCode=false\` gegenprüfen und den letzten JavaScript-Abschnitt entfernen |
| Die Änderung erscheint nicht                       | Der Code wurde nicht gespeichert oder noch nicht freigegeben    | Feldinhalt prüfen, **Save** wählen und den Freigabestatus kontrollieren                                        |
| Eine Anpassung trifft die falsche Stelle           | Die Auswahl im CSS hängt nur von der Position eines Elements ab | Eindeutige, stabile Elemente verwenden lassen statt einer positionsabhängigen Regel                            |

## Praxisbeispiel: Hinweis in einer Gruppe besser lesbar machen

Du möchtest in einer einzelnen Community-Gruppe einen wichtigen Hinweis optisch klarer darstellen. Das betrifft nicht alle Gruppen, sondern nur diese eine.

1. Beschreibe das Ziel genau: Der Hinweis soll besser auffallen, aber alle Inhalte und Schaltflächen müssen unverändert bedienbar bleiben.
2. Lass einen kleinen CSS-Abschnitt nur für diesen Hinweis vorbereiten.
3. Öffne die betreffende Gruppe über **Memberships → Communities → Groups** und gehe zu **Settings → Branding → Advanced**.
4. Sichere den bisherigen Inhalt aus **Custom CSS**.
5. Füge nur den neuen Abschnitt in **Custom CSS** ein.
6. Öffne **Test Preview** und kontrolliere die Gruppe als Mitglied: Inhalt, Schaltflächen, helle Ansicht, dunkle Ansicht und schmale Bildschirmbreite.
7. Ist alles korrekt, aktiviere **Live Mode** und wähle **Save**.
8. Öffne die Gruppe anschließend noch einmal neu. Erst wenn der Hinweis korrekt aussieht und alle übrigen Elemente funktionieren, ist die Änderung abgeschlossen.

## Kurz-Check vor der Freigabe

* [ ] Ich bearbeite die richtige Community-Gruppe.
* [ ] Ich habe den bisherigen Feldinhalt gesichert.
* [ ] CSS und JavaScript liegen im jeweils passenden Feld.
* [ ] Ich habe nur eine klar abgegrenzte Änderung eingefügt.
* [ ] Ich habe **Test Preview** verwendet.
* [ ] Ich habe die Mitgliederansicht in heller und dunkler Darstellung geprüft.
* [ ] Ich habe die Bedienung auf einem schmalen Bildschirm geprüft.
* [ ] Ich aktiviere **Live Mode** erst nach erfolgreicher Prüfung.
* [ ] Ich habe nach **Save** noch einmal kontrolliert, ob alles korrekt funktioniert.