Aktuelle Ergänzungen
Hintergrundbild abdunkeln
Unter Admin → Design → Hintergrund gibt es den Regler „Bild abdunkeln“. Er legt einen schwarzen Schleier über das Bild/GIF, ohne die Originaldatei zu verändern. So bleibt Schrift besser lesbar.
Login-Seite gestalten
Unter Admin → Einstellungen → Banner & Fill → Login-Seite lassen sich Login-Banner sowie Seiten-, Kasten-, Schrift-, Eingabefeld-, Rahmen- und Buttonfarben per Colorpicker anpassen. Das gilt für Login, Registrierung und Gastzugang.
RadioTrallaCity
Anleitung für den neuen Chat
Adminbereich • Design • Header • Player • Nutzerfunktionen
Dieses Nachschlagewerk zeigt, wo die wichtigsten Einstellungen liegen und was sie verändern. Es ist bewusst praktisch geschrieben: erst Bereich suchen, dann Einstellung ändern.
#1. Schnellübersicht: Wo finde ich was?
| Einstellung | Was sie macht |
|---|---|
| Admin → Einstellungen | Chatname, Begrüßung, Banner, Rollenfarben, Avatare, Registrierung/Gastzugang, Flüstern, Webcam-Meldung, Betreten-Meldung, Schriftgrößen, Uhrzeit/Datum, OnAir-Anzeige, Text-Fills. |
| Admin → Design | Komplette Optik: Chat-Hintergrund/GIF, Rahmen, Rahmenbild, Lichtlauf, Transparenz, Flächen, Online-Liste, Player, Titelanzeige, obere Bildplätze, Kindertisch. |
| Admin → Header-Buttons | Neue Buttons oben: Text/Bild/GIF, URL, Reihenfolge, Größe sowie gemeinsamer Stil mit Hintergrund/Gradient, Rahmen, Schriftfarbe und Rundung. |
| Admin → Chat-Buttons | Welche Funktionsbuttons im Chat sichtbar sind, Reihenfolge und Zusatzbuttons. |
| Admin → Benutzer | Benutzer/Modis anlegen und Rollen sowie Icons vor/hinter Namen verwalten. |
| Admin → Smilies | Rubriken, Shared-Emoji-Kürzel und eigene Smilies. |
| Admin → Laufbilder / GIFs | Automatische Laufbilder in zwei Gruppen mit Startzeiten, Abständen, Größe und Geschwindigkeit. |
| Admin → Player & Sondermeldungen | Player-Grundeinstellungen und besondere Admin-Nachrichten. |
| Admin → Chatverlauf / IP-Sperren / Räume | Moderation, Verlauf, Sperren und Raumverwaltung. |
| Admin → Wilde Spielereien | Zusätzliche visuelle Effekte und eigene Effekt-Skripte. |
#2. Admin → Einstellungen
#Allgemein
| Einstellung | Was sie macht |
|---|---|
| Chatname | Name des Chats oben. |
| Begrüßung | Begrüßungstext im Chat. |
| Chat-Banner | Bild/GIF statt oder zusätzlich zur normalen Chatüberschrift; kann hochgeladen und wieder entfernt werden. |
#Rollenfarben und Avatare
| Einstellung | Was sie macht |
|---|---|
| Admin-Farbe | Farbe des Adminnamens im Chat und in der Online-Liste. |
| Modi-Farbe | Farbe für Moderatoren. |
| Gast-Farbe | Farbe für Gäste. |
| OnAir-Farbe | Farbe für OnAir-Namen; OnAir-Nachrichtentext kann ebenfalls hervorgehoben werden. |
| OnAir-Avatar | Eigenes Bild/GIF für den aktuell sendenden Modi. |
| Standard-Avatar | Avatar für User, die kein eigenes Bild hochgeladen haben. |
Aktuelle OnAir-Anzeige: Bei einem echten Modi steht oben „ON AIR“. Beim Auto-DJ steht „AUTO DJ“. Der jeweilige Name bleibt darunter.
#Zugang, Flüstern und Meldungen
| Einstellung | Was sie macht |
|---|---|
| Registrierung erlauben | Schaltet die normale Registrierung an oder aus. |
| Gastzugang erlauben | Erlaubt oder sperrt Gastzugang. |
| Admin liest alle Flüsternachrichten | Admin-Option für Flüstern. |
| Flüster-Hintergrundfarbe | Farbe hinter privaten Nachrichten. |
| Flüster-Deckkraft | Wie stark der Flüster-Hintergrund sichtbar ist. |
| Webcam-Starttext | Text, der beim Start einer Cam im Chat erscheint; {name} wird durch den Usernamen ersetzt. |
| Betreten-Meldung | Text beim Betreten des Chats; auch hier kann {name} genutzt werden. |
#Schriftgrößen, Uhrzeit und besondere Texte
| Einstellung | Was sie macht |
|---|---|
| Chat-Nachrichten | Schriftgröße der normalen Nachrichten. |
| Benutzernamen | Schriftgröße der Namen im Chat. |
| Uhrzeit | Größe der Zeitangabe. |
| Online-Liste | Schriftgröße rechts. |
| Raumliste | Schriftgröße der Räume. |
| Überschriften | Größe der Bereichsüberschriften. |
| Chatname oben | Größe des Chatnamens. |
| Eingabefeld | Schriftgröße beim Schreiben. |
| Uhrzeit anzeigen | Zeit ein-/ausblenden. |
| Datum anzeigen | Datum zusätzlich zur Uhrzeit. |
| Uhrzeit-Farbe | Farbe von Uhrzeit/Datum. |
| Admin-Nachrichten Schriftfarbe | Farbe besonderer Admin-Nachrichten. |
#Player & OnAir-Anzeige
| Einstellung | Was sie macht |
|---|---|
| OnAir-Anzeige ein/aus | Schaltet die Anzeige des aktuellen Modis ein oder aus. |
| Hintergrundfarbe | Grundfarbe der OnAir-Anzeige. |
| Sendeplan-/Aktuelle-Sendung-URL | Quelle, aus der der aktuelle Modi ermittelt wird. |
| Standardbild-URL | Fallback-Bild, z. B. für Auto-DJ. |
#Text-Fills
Für den Chatnamen und für Usertexte stehen animierte Fill-Bilder zur Verfügung. Im Admin können Fill-Bilder hochgeladen und benannt werden. Die Nutzer wählen ihren gewünschten Fill später über das Zahnrad im Chat.
#3. Admin → Design
Hier steckt fast die komplette Optik des Chats. Designs können gespeichert, aktiviert, bearbeitet, gelöscht und als Vorlagen behalten werden. Außerdem gibt es RTC-Presets wie Herbst, Weihnachten, Halloween, Geburtstag usw.
#Grundfläche und Hintergrund
| Einstellung | Was sie macht |
|---|---|
| CSS-Hintergrund | Normale Farbe, transparent oder CSS-Gradient. Beispiel: linear-gradient(180deg, #000 0%, #7a250f 50%, #000 100%). |
| Verlauf von / bis | Einfacher Farbverlauf ohne eigenen CSS-Code. |
| Hintergrundbild hochladen | JPG, GIF, PNG oder WebP als Chat-Hintergrund. |
| Bilddarstellung | Fläche füllen, ganzes Bild oder Originalgröße. |
| Bildposition | Mitte, oben, unten, links oder rechts. |
| Wiederholen | Steuert, ob ein Hintergrundbild gekachelt wird. |
| Flächen-Deckkraft | Wie durchsichtig die inneren Chatflächen sind. |
#Rahmen und Lichtlauf
| Einstellung | Was sie macht |
|---|---|
| Rahmen-Art | Normaler Rahmen, Gradient oder Bildrahmen. |
| Rahmenbreite | Dicke des Rahmens in Pixel. |
| Rundung | Abgerundete Ecken. |
| Rahmenfarbe / Gradient | Farbe oder Verlauf des Rahmens. |
| Rahmenbild hochladen | GIF/PNG/WebP als animierter oder statischer Rahmen. |
| Lichtfarbe | Farbe des Lichtkegels, der am Außenrahmen entlanglaufen kann. |
| Länge | Länge des Lichtkegels. |
| Geschwindigkeit | Wie schnell das Licht um den Rahmen läuft. |
| Leuchten | Stärke des Glow-Effekts. |
| Richtung | Im oder gegen den Uhrzeigersinn. |
#Online-Liste und Teilflächen
| Einstellung | Was sie macht |
|---|---|
| Online-Hintergrund | Farbe/Gradient oder Bild hinter „Online“ und den einzelnen Namen. |
| Bildgröße / Position | Anpassung des Bildes in der Online-Liste. |
| Deckkraft | Transparenz des Online-Hintergrundes. |
| Kopfleiste | CSS-Hintergrund der oberen Leiste. |
| Nachrichtenfläche | CSS-Hintergrund hinter den Nachrichten. |
| Online-/Seitenbereich | Hintergrund der rechten Fläche. |
| Eingabefeld | Hintergrund des Schreibfelds. |
| Buttons | Grundstil für normale Chat-Funktionsbuttons. |
| Rahmenlinien | Globale Linienfarbe für Flächen/Buttons. |
#Player, Titelanzeige und obere Plätze
Wichtig: Der Radio-Player selbst bleibt technisch separat. Die Titelanzeige oben wurde bewusst davon getrennt, damit der Player nicht wieder durch zusätzliche Styles kaputtgeht.
| Einstellung | Was sie macht |
|---|---|
| Player anzeigen | Radio-Player im Chat ein-/ausblenden. |
| Player-/Stream-URL | Streamquelle des Players. |
| Titelanzeige Breite | Breite des Titelkastens oben. Da der Titel scrollt, kann die Anzeige relativ kurz sein. |
| Titelanzeige Höhe | Höhe des Titelkastens. |
| Titelanzeige-Stil | Titel scrollt. Der Kasten nutzt Border/Rundung/Vertiefung passend zum Header-Stil. |
| Obere Bildplätze | Zusätzliche Bild-/GIF-Plätze oben mit eigener Ziel-URL, Breite und Höhe. |
| Kindertisch | Externe Shoutbox/Kindertisch rechts einblenden; Breite kann zwischen Chat und Online-Liste verteilt werden. |
#4. Admin → Header-Buttons
Die neuen Buttons oben sind zentral verwaltbar. Du kannst Textbuttons, Bildbuttons und GIF-Buttons mischen.
#Gemeinsamer Button-Stil
| Einstellung | Was sie macht |
|---|---|
| Gemeinsamen Stil verwenden | Ein Schalter, damit alle Header-Buttons dieselbe Grundoptik erhalten. |
| Hintergrund / Gradient | Colorpicker plus Textfeld. Das Feld akzeptiert z. B. #7a250f, transparent oder linear-gradient(...). |
| Rahmen-Code | Kompletter CSS-Rahmen, z. B. 1px solid rgba(255,255,255,.25). |
| Schriftfarbe | Textfarbe der Buttons. |
| Ecken | Rundung in Pixel. |
| Schriftgröße | Größe der Button-Beschriftung. |
| Schriftstärke | 100 bis 900. |
| Vertiefung | Der eingelassene Look wird über einen inneren Schatten erzeugt; Titelanzeige und Textbuttons können dadurch optisch zusammenpassen. |
#Jeder einzelne Header-Button
| Einstellung | Was sie macht |
|---|---|
| An | Button ein-/ausblenden. |
| Neues Fenster | URL in neuem Tab/Fenster öffnen. |
| Beschriftung | Text auf dem Button. |
| Reihenfolge | Position oben: kleinere Zahl weiter vorne. |
| URL | Ziel des Buttons; kann leer bleiben. |
| Bild/GIF URL oder Upload | Statt reinem Text kann ein Bild/GIF verwendet werden. |
| Breite / Höhe | Eigene Button-Größe. |
| Eigener Hintergrund / Gradient | Überschreibt bei Bedarf den gemeinsamen Hintergrund. |
| Eigene Schriftfarbe | Überschreibt bei Bedarf die gemeinsame Textfarbe. |
| Zurücksetzen | Setzt den einzelnen Slot zurück. |
#5. Admin → Chat-Buttons
Hier verwaltest du die Funktionsleiste über dem Eingabefeld. Vorhandene Funktionen können umbenannt, mit Symbol versehen und sortiert werden. Zusätzlich lassen sich eigene URL-Buttons erstellen.
- Einstellungen/Zahnrad
- Smilies
- Würfeln
- Zeichnen
- Webcam
- Weitere vorhandene oder selbst angelegte Zusatzbuttons
#6. Was Nutzer selbst einstellen können
Über das Zahnrad „Meine Einstellungen“ kann jeder Nutzer seine persönlichen Anzeigeoptionen ändern, ohne das globale Chatdesign zu verändern.
| Einstellung | Was sie macht |
|---|---|
| Nachrichtentext | Normale Schriftfarbe oder ein vom Admin bereitgestellter Filltext. |
| Name am Avatar | Eigene Namensfarbe oder Gradient. |
| Avatar | Eigenes Avatarbild/GIF hochladen oder entfernen. |
| Automatisch scrollen | An oder Aus. Standard ist An; die Auswahl wird für den Nutzer gespeichert. |
#7. Webcam
Die Webcam läuft direkt im Chat. Mehrere Cams werden oben nebeneinander angezeigt; pro Raum sind bis zu 9 Kameras vorgesehen.
| Einstellung | Was sie macht |
|---|---|
| Kamera auswählen | Standardkamera oder anderes gefundenes Gerät. |
| Webcam starten | Startet die eigene Kamera und meldet dies im Chat. |
| Kamera aus/an | Bild vorübergehend deaktivieren. |
| Mikro aus/an | Mikrofon umschalten. |
| Stoppen | Beendet die eigene Webcam. |
| Cam-Größe | Geöffnete Cam klein, mittel oder groß anzeigen. |
| Online-Liste | Bei aktiver Cam erscheint ein Kamera-Symbol am Namen; darüber kann eine fremde Cam geöffnet/geschlossen werden. |
#8. Smilies, Würfeln und Zeichnen
#Smilies
| Einstellung | Was sie macht |
|---|---|
| Rubriken | Smilies in Kategorien organisieren. |
| Shared-Emoji-Kürzel | Kurzbefehle für vorhandene Shared-Emojis. |
| Eigene Smilies | Bild hochladen, Namen/Rubrik/Reihenfolge festlegen. |
#Würfeln
Nutzer wählen die Anzahl der Würfel; das Ergebnis wird über die Chatfunktion erzeugt.
#Zeichnen
Im Zeichenfenster können Farbe und Pinsel genutzt, die Fläche geleert und die fertige Zeichnung in den Chat gesendet werden.
#9. Laufbilder / GIFs und wilde Effekte
#Laufbilder / GIFs
| Einstellung | Was sie macht |
|---|---|
| 2 Gruppen | Zwei getrennte Laufbild-Gruppen können geplant werden. |
| Fahrzeit | Wie lange ein Bild über die Fläche läuft. |
| Abstand | Pause zwischen den Bildern. |
| Breite / Höhe | Größe der Laufbilder. |
| Start-Minuten | Zu welchen Minuten eine Gruppe startet. |
| Upload | GIF/Bild für den jeweiligen Slot. |
#Wilde Spielereien
Zusätzliche Effekte können nach Bereich, Name und Reihenfolge verwaltet werden. Für eigene Effekte gibt es ein Scriptfenster mit Laufzeit. Diese Funktion nur mit vertrautem Code verwenden.
#10. Benutzer, Rollen und Moderation
#Benutzerverwaltung
| Einstellung | Was sie macht |
|---|---|
| Benutzer/Modi anlegen | Benutzername, Passwort und Rolle festlegen. |
| Rolle | Steuert Rechte und Rollenfarbe. |
| Icon vor dem Namen | Kleines Bild/Icon direkt vor dem Namen. |
| Icon hinter dem Namen | Kleines Bild/Icon direkt hinter dem Namen. |
#Chatverlauf
Im Admin kann der Nachrichtenverlauf vollständig eingesehen werden. Der Admin-Verlauf kann dort geleert werden.
#IP-Adressen & Sperren
| Einstellung | Was sie macht |
|---|---|
| IP sperren | IP-Adresse mit optionalem Grund sperren. |
| Aktive Sperren | Vorhandene Sperren anzeigen und verwalten. |
| Zuletzt gesehene IPs | Hilft bei Moderation und Zuordnung von Nutzern. |
#Räume
Neue Räume können mit Name, Beschreibung und Sortierung angelegt werden.
#11. Player & Sondermeldungen
Im Bereich „Player & Sondermeldungen“ gibt es zusätzliche Grundeinstellungen für den Player und die Möglichkeit, besondere Admin-Nachrichten an einen ausgewählten Raum zu senden. Die Darstellung kann dabei separat gewählt werden.
#12. Häufige Aufgaben – kurz erklärt
#Alle Header-Buttons gleich aussehen lassen
- Admin → Header-Buttons öffnen.
- „Gemeinsamen Stil für alle Buttons verwenden“ aktivieren.
- Hintergrund mit Colorpicker wählen oder transparent/linear-gradient(...) eingeben.
- Rahmen-Code, Schriftfarbe, Rundung und Schriftgröße festlegen.
- Bei den einzelnen Buttons eigene Hintergrund-/Schriftfelder leer lassen.
#Neues saisonales Chatdesign bauen
- Admin → Design → Neues Design.
- Hintergrundfarbe/Gradient oder GIF hochladen.
- Rahmenbild bzw. Außenrahmen wählen.
- Optional Lichtkegel aktivieren und Geschwindigkeit einstellen.
- Teilflächen und Deckkraft anpassen.
- „Speichern & im Chat anzeigen“ anklicken.
#Titelanzeige kürzer/länger machen
- Admin → Design öffnen.
- „Titelanzeige Breite“ verschieben.
- Die Anzeige darf relativ kurz sein, weil der Titel automatisch scrollt.
#Auto-Scroll für einen Nutzer ausstellen
- Im Chat Zahnrad öffnen.
- Unter „Automatisch scrollen“ auf „Aus“ klicken.
- Die Wahl wird für diesen Nutzer gespeichert.
#13. Wichtig bei späteren Änderungen
- Vor Änderungen am neuen Chat immer die aktuellsten Dateien verwenden. Sonst kann eine ältere Version neuere Funktionen überschreiben.
- Beim Player möglichst nur den Player-Bereich ändern. Titelanzeige, Header-Buttons und Player sind bewusst getrennt, damit Styles den Streamplayer nicht stören.
- Bei ZIP-Austausch reicht in der Regel: nur die tatsächlich geänderten Dateien ersetzen.
- Vor größeren Design- oder Funktionsänderungen eine Sicherung des aktuellen Chatordners machen.
- Bei CSS-Feldern auf gültige Werte achten: transparent, Hex/RGB oder gültige Gradient-Syntax.
#14. Mini-Lexikon
| Einstellung | Was sie macht |
|---|---|
| transparent | Kein sichtbarer Hintergrund. |
| linear-gradient(...) | CSS-Farbverlauf. |
| Border | Rahmen um einen Kasten/Button. |
| Radius | Abrundung der Ecken. |
| Inset / Vertiefung | Innerer Schatten; lässt einen Bereich eingelassen wirken. |
| Filltext | Schrift, die mit einem Bild oder GIF gefüllt wird. |
| OnAir | Gerade live sendender Moderator. |
| Auto DJ | Automatische Musikwiedergabe ohne live sendenden Modi. |