Was möchtest du wissen?

Live Edit öffnen

1. Öffne Administration → Design.
2. Wähle „Live Edit öffnen“.
3. Schalte bei Bedarf zwischen Chat, Login sowie Desktop, Tablet und Mobil um.
4. Klicke das Element an, das du bearbeiten möchtest.
5. Ändere Farbe, Hintergrund, Schrift, Rahmen, Rundung oder Abstände.
6. Prüfe die Änderung direkt in der echten Vorschau.
7. Speichere erst, wenn das Ergebnis passt.

Wichtig

• Nicht jede Änderung muss für alle Gerätegrößen gleich sein. Für Tablet und Mobil können eigene Werte gesetzt werden.
• Message Plate, Onlineliste, Navigation, Player und Transparenzen reagieren in der Live-Vorschau.
• „Live“ bedeutet Vorschau: dauerhaft übernommen wird das Design erst durch Speichern.
• Eigenes CSS ist nur noch für Sonderfälle gedacht.

1. Öffne Administration → Design & CSS.
2. Lade ein passendes Hintergrundbild hoch oder wähle eine Hintergrundfarbe.
3. Stelle die SYSTEMFARBE so ein, dass neutrale Texte gut erkennbar sind.
4. Passe die Deckkraft der Chatflächen an.
5. Speichere und teste sowohl helle als auch dunkle Bildbereiche.
6. Prüfe zusätzlich Mobilansicht, Onlineliste, Begrüßung, Uhrzeiten und Buttons.

Bei sehr niedriger Deckkraft aktiviert ET-HOST einen automatischen Kontrastschutz. Nickname-Farben werden dabei nicht pauschal überschrieben.

Ein 100 % transparenter Chat bedeutet technisch: Chatfenster-Deckkraft 0 %.

• Das Hintergrundbild bleibt vollständig sichtbar.
• Chatname und Begrüßung erhalten zusätzlichen Lesbarkeitsschutz.
• Verwendet ein Benutzer noch die normale Standard-Schriftfarbe, kann ET-HOST im exakt transparenten Zustand die SYSTEMFARBE zur Darstellung verwenden.
• Eigene bewusst gewählte Nachrichtenfarben bleiben maßgeblich.
• Nickname-Farben der Rollen bleiben erhalten.

Teste nach jeder Designänderung mit Strg+F5, damit altes CSS nicht im Browsercache bleibt.

Message Plate aktivieren

1. Öffne den Designbereich bzw. Live Edit.
2. Aktiviere „Message Plate“.
3. Wähle Hintergrundfarbe, Rahmenfarbe und Rundung.
4. Stelle für die Nachrichtenschrift Einfarbig oder Farbverlauf ein.

Bei Farbverlauf

Der Verlauf wird ausschließlich auf die Schrift angewendet. Die Message Plate bleibt als eigene Fläche hinter dem Text sichtbar. Das gilt sowohl für bereits geladene als auch für neu eintreffende Nachrichten.

• Prüfe bei hellen Hintergründen den Kontrast.
• Nutze die Handy-Vorschau zusätzlich, weil dort weniger Platz zur Verfügung steht.

1. Administration öffnen und Styleeditor wählen.
2. Oben Farben, Chat & Layout, Loginseite, Gruppenfarben, Hugo oder Experten auswählen.
3. Weitere Unterbereiche über das Auswahlfeld „Design anpassen“ öffnen.
4. Einstellungen in der Live-Vorschau prüfen und „Design speichern“ wählen.
5. Bei ausbleibender Änderung den Chat neu laden.

Die gespeicherte Gestaltung gilt nur für den jeweiligen Chat.

Betreiber

Unter Styleeditor → Einfach → Standardschriftfarbe im Chat die gewünschte Farbe wählen und Design speichern.

Benutzer

Die eigene Schriftfarbe wird unten über Aa eingestellt. Persönliche Farben können von der Betreiberfarbe abweichen.

Erwähnte @Nicknames übernehmen die jeweilige Nachrichtenfarbe.

Bei dunklen Hintergründen auf guten Kontrast achten; nicht jede Bildfläche hat denselben Kontrast.

1. Styleeditor → Einfach öffnen.
2. „Nickname im Antwortfeld“ suchen.
3. Für einen hellen Antwortbalken eine dunkle Farbe auswählen.
4. Design speichern und Antworten im Chat testen.

Diese Einstellung betrifft den Antwortbalken, nicht die Nickname-Gruppenfarben.

Unter Styleeditor stehen mehrere Vorlagen zur Auswahl. Eine Vorlage kann Farben und Hintergrundgestaltung ändern.

Vor dem Speichern die Vorschau für Desktop, Tablet und Smartphone kontrollieren.

Logo und Hintergrundbilder werden im gesonderten Bereich „Bilder, Logo und Design zurücksetzen“ verwaltet.

Ein Zurücksetzen nur nach Prüfung der Auswirkungen bestätigen.

1. Sichere zunächst den aktuellen Stand oder kopiere dein bisheriges CSS in eine Textdatei.
2. Füge nur eine kleine Regel hinzu.
3. Speichere und lade mit Strg+F5 neu.
4. Prüfe Desktop und Smartphone.
5. Verwende !important nur dann, wenn eine Core-Regel sonst bewusst Vorrang hat.
6. Externe url(...) und @import-Konstruktionen sind aus Sicherheits-/Datenschutzgründen nicht für beliebige Inhalte vorgesehen.
7. Der ET-HOST-Pflichtfooter darf nicht ausgeblendet werden.

Wenn nach einer CSS-Regel Bedienelemente verschwinden, entferne zuerst genau die letzte Änderung.

1. Öffne Administration → Chat-Icons & Links.
2. Vergib eine klare Bezeichnung wie Homepage, Forum oder Wunschbox.
3. Wähle ein Icon oder trage eine unterstützte Iconangabe ein.
4. Hinterlege eine gültige externe URL.
5. Lege fest, ob sie in einem neuen Fenster geöffnet wird.
6. Aktiviere den Link und bestimme die Sortierung.
7. Speichere und prüfe Desktop sowie das mobile „Mehr“-Menü.

Auf Desktop werden Linknamen vollständig ausgeschrieben; bei sehr vielen Elementen kann die Navigation horizontal scrollen, statt Texte mit „…“ abzuschneiden.

1. Öffne Administration → Chat-Icons & Links.
2. Suche in der Font-Awesome-Schnellhilfe das gewünschte Symbol.
3. Trage ausschließlich den Code ein, zum Beispiel fa:f015 für Homepage oder fa:f0e0 für E-Mail.
4. Direkt rechts neben dem Eingabefeld erscheint eine Live-Vorschau. Dort muss das Symbol sichtbar sein – nicht der Text fa:f015.
5. Trage Bezeichnung und Zieladresse ein.
6. Aktiviere den Link und speichere.
7. Öffne den Chat neu. Im Navigationsbutton wird jetzt nur das Symbol zusammen mit der Bezeichnung angezeigt.
8. Auf Smartphones kann der Link bei wenig Platz unter „Mehr“ erscheinen; dort wird dasselbe Icon verwendet.

Wichtig: Ein altes Link-Emoji wie 🔗 gehört nicht vor den Code. Bereits gespeicherte Mischwerte wie „🔗 fa:f015“ werden von ET-HOST automatisch erkannt und beim Reparaturlauf auf „fa:f015“ bereinigt. Die Font-Awesome-Free-Solid-Schrift wird lokal vom ET-HOST-Server geladen; ein externes Kit oder CDN ist nicht erforderlich.

1. Öffne Administration → SEO & Browser.
2. Pflege nur Angaben, die den Chat tatsächlich beschreiben.
3. Verwende einen verständlichen Seitentitel und eine kurze Beschreibung.
4. Speichere.
5. Prüfe anschließend den Browsertitel und die öffentliche Loginseite.

Vermeide Keyword-Stuffing oder irreführende Beschreibungen.