CSS personalizado
Cambia el aspecto de tu chat con tus propias reglas CSS: colores, formas, tamaños, tipografías… Se aplican en vivo a todos los usuarios.
Dónde está y quién puede usarlo. Ajustes → Apariencia → «CSS personalizado (avanzado)». Solo Owner y Manager pueden guardarlo, y la función está incluida en los planes Pro y Business.
Qué es y cómo funciona
- Lo que escribes se guarda en los ajustes del chat y se carga después de los colores de la pestaña Apariencia, así que tiene prioridad sobre ellos.
- Al pulsar «Guardar y aplicar CSS» se aplica al instante a todos los que estén en el chat; quien entre después lo recibe al cargar.
- Es CSS normal: no necesitas escribir etiquetas
<style>, solo las reglas. - Solo afecta a la pantalla del chat. No cambia el panel de administración a pantalla completa (
/admin). - Para volver al aspecto original: vacía el cuadro y pulsa «Guardar y aplicar CSS».
Variables de color y tamaño
La forma más segura y simple de personalizar es redefinir las variables del chat dentro de :root. Todo el diseño las usa, así que un solo cambio se refleja en muchas partes.
:root{
--accent:#ff4d6d;
--bubble-bg-mine:#7a1f3a;
}| Variable | Qué controla | Valor por defecto |
|---|---|---|
--bg, --bg-2 | Fondo general de la página | #0a0c1a / #0d0f22 |
--surface, --surface-2, --surface-3 | Paneles, cabeceras, menús y tarjetas (tres niveles de superficie) | #171a30 / #1f2340 / #2a2f52 |
--border | Líneas y bordes | #2b2f4d |
--text, --text-muted, --text-faint | Texto principal, secundario y tenue | #f1f2f8 / #9a9fc0 / #6b7099 |
--accent, --accent-strong, --accent-ink | Color de acento (botones, enlaces, selección), su versión más clara y el color del texto sobre el acento | #5B6EF5 / #7686FF / #0b0c1e |
--online, --danger | Verde de «conectado» y rojo de peligro (avisos, botones de borrar…) | #3ed598 / #ef5d60 |
--bubble-bg, --bubble-bg-mine | Fondo de las burbujas de mensaje: de los demás y las tuyas | #3d4160 / #3a4a86 |
--rank-owner, --rank-manager, --rank-moderator, --rank-member, --rank-guest, --rank-offline | Color de las etiquetas y puntos de rango (--rank-offline: usuarios desconectados en la lista) | #F4FF3D / #FF9224 / #FFFFFF / #3B82F6 / #23D46B / #FF7D82 |
--radius-sm, --radius-md, --radius-lg | Redondeo de esquinas | 6px / 10px / 16px |
--message-font-size, --nickname-font-size | Tamaño del texto de los mensajes y de los nicks | 14px |
--userlist-font-size | Tamaño de letra de los nicks en la barra de usuarios | 13px |
--font-body, --font-display, --font-mono | Tipografía de texto, de títulos y monoespaciada | Inter / Barlow Semi Condensed / IBM Plex Mono |
--shadow-lg | Sombra de ventanas y menús | 0 20px 50px rgba(0,0,0,.55) |
Los colores de fondo, superficie, burbuja, acento, tipografía y rangos también se pueden cambiar sin código en la misma pestaña Apariencia. El CSS es para ir más allá de eso.
Qué partes puedes cambiar
Estas son las piezas principales de la pantalla del chat y el selector con el que las alcanzas:
| Selector | Qué es |
|---|---|
#app | Contenedor de todo el chat |
#message-list | Lista de mensajes (la zona con scroll) |
.msg | Cada mensaje completo (avatar + burbuja) |
.msg-bubble | La burbuja de un mensaje |
.msg-bubble.mine | La burbuja de tus propios mensajes |
.msg-head, .msg-nick, .msg-time | Cabecera del mensaje, nick de quien escribe y hora |
.rank-tag | Etiqueta de rango junto al nick |
.msg-system | Avisos del sistema y de moderación |
.avatar | Avatares |
#sidebar-right | Barra lateral de usuarios conectados |
#user-list, .user-row | Lista de usuarios y cada fila |
#composer-bar | Zona donde escribes |
#composer-input | El campo de texto |
#btn-send | Botón de enviar |
#pinned-banner | Aviso del mensaje fijado |
#typing-indicator | «Está escribiendo…» |
.btn, .btn-accent | Botones en general y botones de color de acento |
Una nota sobre los selectores. El chat se actualiza con nuevas versiones y los nombres internos pueden cambiar con el tiempo. Las variables de la sección anterior son lo más estable; si tras una actualización algún selector deja de hacer efecto, revisa tu CSS.
Para descubrir el selector de cualquier otro elemento, abre el chat en tu navegador, haz clic derecho sobre él → Inspeccionar, y mira su class o id.
Ejemplos listos para copiar
1. Cambiar el color de acento y las burbujas
:root{
--accent:#ff4d6d;
--accent-strong:#ff7a90;
--bubble-bg:#262a4a;
--bubble-bg-mine:#7a1f3a;
}2. Burbujas más redondeadas
.msg-bubble{ border-radius:20px; }3. Mensajes y nicks más grandes
:root{
--message-font-size:17px;
--nickname-font-size:16px;
}4. Colores propios para las etiquetas de Owner y Manager
:root{ --rank-owner:#ffd400; --rank-manager:#ff7a00; }5. Nicks más grandes en la barra de usuarios
:root{ --userlist-font-size:15px; }6. Botón de enviar con tu estilo
#btn-send{ border-radius:999px; letter-spacing:.5px; }7. Aviso del sistema más discreto
.msg-system{ opacity:.65; font-size:12px; }8. Otra tipografía
Si usas una fuente web (por ejemplo de Google Fonts), el @import debe ir en la primera línea del cuadro:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
:root{ --font-body:'Poppins',sans-serif; }Consejos y límites
- Empieza por las variables y prueba cambios pequeños, de uno en uno.
- Mantén accesibles los controles. Si ocultas con
display:nonepartes como el botón de ajustes o el de enviar, los usuarios (y tú) no podrán usarlas. No ocultes#settings-drawerni los botones de la cabecera: si el CSS te deja sin acceso a Ajustes, no podrás editarlo desde la pantalla del chat. - Fondos de imagen: el fondo se puede poner desde Apariencia sin código; el CSS tiene prioridad sobre él.
- Móvil: el chat es adaptable. Si cambias anchos o márgenes, comprueba también en el teléfono. Puedes limitar un cambio a pantallas pequeñas con
@media (max-width:700px){ … }. - Para el aspecto del chat insertado en otra web no hace falta nada más: el mismo CSS se aplica dentro del iframe.
- Escribes CSS, no JavaScript: el cuadro es solo para reglas de estilo.
Custom CSS
Change how your chat looks with your own CSS rules: colours, shapes, sizes, fonts… Changes apply live to every user.
Where it is and who can use it. Settings → Appearance → “Custom CSS (advanced)”. Only Owners and Managers can save it, and the feature is included in the Pro and Business plans.
What it is and how it works
- What you write is stored in the chat settings and loaded after the colours from the Appearance tab, so it takes priority over them.
- Click “Save and apply CSS” and it is applied instantly for everyone in the chat; people who join later get it when the page loads.
- It is plain CSS: you don’t need
<style>tags, just the rules. - It only affects the chat screen. It does not change the full-screen admin panel (
/admin). - To go back to the original look: empty the box and click “Save and apply CSS”.
Colour and size variables
The safest, simplest way to customise is to redefine the chat’s variables inside :root. The whole design uses them, so one change shows up in many places.
:root{
--accent:#ff4d6d;
--bubble-bg-mine:#7a1f3a;
}| Variable | What it controls | Default |
|---|---|---|
--bg, --bg-2 | Overall page background | #0a0c1a / #0d0f22 |
--surface, --surface-2, --surface-3 | Panels, headers, menus and cards (three levels) | #171a30 / #1f2340 / #2a2f52 |
--border | Lines and borders | #2b2f4d |
--text, --text-muted, --text-faint | Main, secondary and faint text | #f1f2f8 / #9a9fc0 / #6b7099 |
--accent, --accent-strong, --accent-ink | Accent colour (buttons, links, selection), its lighter version, and the text colour used on top of the accent | #5B6EF5 / #7686FF / #0b0c1e |
--online, --danger | “Online” green and danger red (alerts, delete buttons…) | #3ed598 / #ef5d60 |
--bubble-bg, --bubble-bg-mine | Message bubble background: other people’s and your own | #3d4160 / #3a4a86 |
--rank-owner, --rank-manager, --rank-moderator, --rank-member, --rank-guest, --rank-offline | Colour of rank labels and dots (--rank-offline: offline users in the list) | #F4FF3D / #FF9224 / #FFFFFF / #3B82F6 / #23D46B / #FF7D82 |
--radius-sm, --radius-md, --radius-lg | Corner rounding | 6px / 10px / 16px |
--message-font-size, --nickname-font-size | Size of message text and nicknames | 14px |
--userlist-font-size | Font size of nicknames in the users sidebar | 13px |
--font-body, --font-display, --font-mono | Text, heading and monospace fonts | Inter / Barlow Semi Condensed / IBM Plex Mono |
--shadow-lg | Shadow of windows and menus | 0 20px 50px rgba(0,0,0,.55) |
Background, surface, bubble, accent, font and rank colours can also be changed without code in the same Appearance tab. CSS is for going further than that.
Parts you can style
These are the main pieces of the chat screen and the selector to reach each one:
| Selector | What it is |
|---|---|
#app | Container of the whole chat |
#message-list | Message list (the scrolling area) |
.msg | A whole message (avatar + bubble) |
.msg-bubble | A message bubble |
.msg-bubble.mine | The bubble of your own messages |
.msg-head, .msg-nick, .msg-time | Message header, the author’s nickname and the time |
.rank-tag | Rank label next to the nickname |
.msg-system | System and moderation notices |
.avatar | Avatars |
#sidebar-right | Online users sidebar |
#user-list, .user-row | The user list and each row |
#composer-bar | The area where you type |
#composer-input | The text field |
#btn-send | Send button |
#pinned-banner | Pinned message banner |
#typing-indicator | “Is typing…” |
.btn, .btn-accent | Buttons in general and accent-coloured buttons |
A note on selectors. The chat is updated with new versions and internal names can change over time. The variables above are the most stable option; if a selector stops working after an update, review your CSS.
To find the selector of any other element, open the chat in your browser, right-click it → Inspect, and look at its class or id.
Ready-to-copy examples
1. Change the accent colour and bubbles
:root{
--accent:#ff4d6d;
--accent-strong:#ff7a90;
--bubble-bg:#262a4a;
--bubble-bg-mine:#7a1f3a;
}2. Rounder bubbles
.msg-bubble{ border-radius:20px; }3. Bigger messages and nicknames
:root{
--message-font-size:17px;
--nickname-font-size:16px;
}4. Your own colours for Owner and Manager labels
:root{ --rank-owner:#ffd400; --rank-manager:#ff7a00; }5. Bigger nicknames in the users sidebar
:root{ --userlist-font-size:15px; }6. A send button in your style
#btn-send{ border-radius:999px; letter-spacing:.5px; }7. Subtler system notices
.msg-system{ opacity:.65; font-size:12px; }8. A different font
If you use a web font (for example from Google Fonts), the @import must be on the first line of the box:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
:root{ --font-body:'Poppins',sans-serif; }Tips and limits
- Start with variables and try small changes, one at a time.
- Keep controls reachable. If you hide parts like the settings or send button with
display:none, users (and you) won’t be able to use them. Don’t hide#settings-draweror the header buttons: if your CSS locks you out of Settings, you won’t be able to edit it from the chat screen. - Background images: the background can be set from Appearance without code; your CSS takes priority over it.
- Mobile: the chat is responsive. If you change widths or margins, check on a phone too. You can limit a change to small screens with
@media (max-width:700px){ … }. - Chat embedded in another site: nothing extra is needed; the same CSS applies inside the iframe.
- You write CSS, not JavaScript: the box is for style rules only.