Logo, colores y tema
Todo lo visual del panel se configura desde Configuración → Apariencia. No hay que tocar código, y los cambios valen para todas las personas que entran al sistema, no solo para ti.
No hace falta que nadie cierre sesión ni vacíe el caché del navegador: la próxima pantalla que abra cualquier persona —un cajero en medio de su turno incluido— ya sale con la marca y los colores nuevos. La pantalla de acceso también, incluso para quien llega por primera vez desde otro computador.
Poner tu marca
En el bloque Marca / Identidad:
- Nombre del dashboard: reemplaza el texto que aparece arriba del menú lateral. Si lo dejas vacío, el CMS usa el título de tu propia cuenta.
- Logo: se muestra sobre el nombre en el menú lateral. Recomendado: PNG o SVG con fondo transparente, horizontal, alto ~48 px.
- Fondo de la pantalla de acceso: la imagen detrás del formulario de inicio de sesión. JPG, PNG o WEBP, hasta 5 MB. Sin imagen, el fondo queda gris claro.
- Símbolo / ícono: el ícono que acompaña al nombre en el menú. Se elige de una lista, no se escribe.
- Favicon: el ícono de la pestaña del navegador, tanto del panel como del sitio público. Cuadrado, 32×32 px o más.
El logo y el fondo de acceso se suben desde la misma pantalla: no necesitas hospedar la imagen en otro lado ni pegar una dirección.
Elegir los colores
El bloque Colores del tema tiene seis colores. Cada uno se puede escoger con el selector o escribir su código (por ejemplo #83d4fb):
| Color | Dónde se ve |
|---|---|
| Color primario | Botones, insignias y acentos de todo el panel, y de todos los módulos. |
| Fondo del sidebar | El fondo del menú lateral, de arriba abajo: la placa de la marca, las secciones y sus submenús. |
| Color del texto del menú | El nombre de cada sección y su ícono, en las que no están abiertas. |
| Fondo de ítem activo | El resaltado de la sección en la que estás parado. |
| Color de ítem activo | El texto de esa sección. |
| Borde / ícono activo | La barra de la izquierda y el ícono de esa sección. |
Los submenús usan estos mismos colores. Cuando abres una sección que tiene subsecciones —por ejemplo Configuración—, la barra del grupo y el punto de la subsección abierta toman el Borde / ícono activo, y la subsección resaltada usa el Fondo y el Color de ítem activo. No hay que configurarlos aparte: el menú y sus submenús siempre se ven como una sola cosa.
Si no quieres elegir color por color, las Paletas predefinidas dejan los cinco listos de una vez (Violeta, Azul océano, Verde esmeralda, Rojo coral, Naranja vivo y Sidebar oscuro).
El Color del texto del menú viene en automático: si eliges un fondo oscuro, el texto se aclara solo, y sobre uno claro se oscurece. También se aclaran la placa de la marca y el fondo de los submenús. Sólo elige un color si quieres uno distinto del que sale solo.
Para volver atrás, el enlace Automático al lado del campo lo deja como estaba.
El botón principal de Caja, la pestaña activa de La comunidad, la marca de lo seleccionado en el constructor de formularios, la barra de una votación: todos toman el Color primario. Antes varios módulos tenían el suyo escrito a mano, así que un panel verde mostraba pantallas azules o moradas — y no se notaba hasta instalarlo en un cliente, porque en desarrollo el tema es el de fábrica.
Dos superficies conservan su propio color a propósito: el lienzo del editor visual, donde el morado marca lo que está seleccionado, y el portal del residente, que tiene identidad propia frente a los vecinos.
Revisa que el Color de ítem activo contraste con el Fondo de ítem activo. Si eliges un fondo oscuro y un texto oscuro, la sección en la que estás parado queda ilegible. La vista previa te lo muestra antes de guardar.
Ver antes de guardar
A la derecha, Vista previa dibuja un menú de mentira —con una sección abierta y su submenú— más botones e insignias de ejemplo. Se actualiza mientras mueves los colores, así que puedes probar sin ensuciar el panel de verdad.
Nada de lo que ves ahí queda guardado hasta que presionas Guardar cambios.
Aplicar los cambios
Al guardar, el menú lateral, el logo y el ícono de la pestaña cambian al instante en tu pantalla. Las demás personas los ven en su próxima carga de página.
Si tienes un sitio público publicado, los colores y el favicon también salen ahí; usa Purgar caché si alguna página pública se quedó con la versión anterior.
Volver a como estaba
Restaurar por defecto devuelve los seis colores a los originales del framework —el texto del menú vuelve a automático— y quita la marca: el nombre, el logo, el símbolo y el favicon personalizados. El fondo de la pantalla de acceso no se toca.
¿Qué sigue?
- Encabezado y pie de páginas públicas — para el sitio público, no el CMS.
- Plantillas de correo — que los emails combinen con tu marca.