Estilo

Utiliza la sección de Estilo para personalizar el aspecto de tu plataforma Beekeeper de modo que se ajuste a la apariencia y branding de tu empresa. Esto incluye la actualización del logotipo, el favicon y los colores para las plataformas web y móvil.

Cómo acceder a Estilo

Los administradores globales pueden acceder a la sección Estilo de dos maneras.

En la pantalla de inicio de la web, haz clic en el icono del engranaje (⚙️) situado en la esquina superior derecha y selecciona 'Ajustar Colores'
Desde el Dashboard, haz clic en el icono para dirigirte al Dashboard, el velocímetro, en la barra de búsqueda superior y ve a Configuración > Estilo.

¿Cómo personalizar tu plataforma?

Logotipo

Carga tu logotipo para que aparezca en la barra de navegación superior tanto en la web como en el móvil.

Tipos de archivo permitidos: .jpeg, .png
Tamaño máximo: 110KB.
Altura recomendada: Mínimo 100px

📌 Utiliza a vista previa de la derecha para comprobar cómo quedará tu logotipo. Si es necesario, ajusta el color de la barra de navegación superior, que sirve como fondo detrás del logotipo.

Favicon

Los favicons se muestran en las pestañas y marcadores del navegador.

Tipo de archivo: .ico
Tamaño máximo: 10KB
Dimensiones recomendadas: 16 x 16 píxeles
Utiliza un generador de favicon, como favicon.cc para crear el formato correcto a partir de una imagen.

✅ Disponemos de una vista previa para que puedas comprobar cómo quedará tu favicon antes de guardarlo.

Colores

Puedes ajustar el esquema de colores de la plataforma para que coincida con tu marca. Si aún no tienes los códigos hexadecimales de tu marca, ponte en contacto con tu equipo de marketing.

Lo que puedes personalizar:

Color de resaltado: se utiliza para botones, enlaces, iconos y otros elementos interactivos.
Color de la barra de navegación superior: se muestra en la cabecera de la aplicación (también actúa como fondo para el logotipo).
Color de la barra de marca: establece el color de la barra de marca situada debajo de la barra de navegación superior.
Color de fondo (solo para la versión web)- recomendado: #FAFAFA; no afecta a la vista móvil.
Opcional: Desactivar el degradado para las barras de navegación y de marca (por defecto el degradado está activado).

Sugerencias y buenas prácticas:

🔁 Utiliza el mismo color para la barra de navegación superior y la barra de marca para para conseguir un aspecto coherente y limpio

✅ Utiliza la vista previa incorporada para ver cómo quedan tus selecciones de color en las vistas de web y móvil

⚠️ Presta atención al contraste: El color de la barra de navegación superior sirve de fondo para tu logotipo. Asegúrate de que el logotipo se ve claramente sobre él

👁️ El comprobador de contraste te avisará si alguno de los colores seleccionados no cumple con las normas de accesibilidad o visibilidad

Guarda los cambios

Una vez que hayas terminado, haz clic en Guardar, en la parte superior derecha. Refresca la aplicación web para ver las actualizaciones aplicadas.

Notas adicionales

Las opciones de estilo solo están disponibles para los administradores globales
Utiliza la vista previa integrada para probar la visibilidad y el diseño antes de finalizar
Internet Explorer ya no es compatible
Para obtener los mejores resultados, asegúrate de que todos los elementos visuales tienen suficiente contraste y se ven bien tanto en web como en el móvil.

Ve el aspecto que puede tener la plataforma con la configuración recomendada:

Vista móvil + vista web: Inicio