B2BROKER
B2CORE
B2CORE IB
B2TRADER
B2CONNECT
B2TRANSLATE
B2BROKERPersonalización visual
Personaliza la apariencia de tu interfaz de usuario de B2CORE habilitando temas claros y oscuros, cargando logotipos y fondos, ajustando colores y añadiendo scripts personalizados para la identidad de marca y la funcionalidad
Usa las opciones de esta sección para personalizar la apariencia de tu interfaz de usuario de B2CORE de modo que refleje el estilo único de tu marca.
Puntos clave
Las opciones disponibles te permiten:
- Seleccionar si deseas habilitar el tema claro, el tema oscuro o ambos para tu interfaz de usuario de B2CORE, y elegir cuál debe establecerse como predeterminado.
- Cargar logotipos personalizados para ambos temas de tu interfaz de usuario de B2CORE.
- Ajustar los colores de diversos elementos de la interfaz de usuario para los temas claro y oscuro.
- Establecer y actualizar imágenes de fondo para las páginas de Iniciar sesión y Registrarse de la interfaz de usuario de B2CORE.
- Añadir scripts personalizados, por ejemplo, para la integración de chatbots y el seguimiento de análisis.
Recursos
En esta página, puedes cargar o modificar los logotipos mostrados en tu interfaz de usuario de B2CORE, así como imágenes de fondo para las páginas de Registrarse e Iniciar sesión, si es necesario.
Logotipo para el tema claro
El logotipo principal mostrado en la interfaz de usuario de B2CORE cuando el tema claro está habilitado.
El formato requerido: SVG con fondo transparente, tamaño de archivo de hasta 10 MB.
Logotipo corto para el tema claro
Una versión compacta del logotipo mostrada cuando el menú principal está contraído en el tema claro.
El formato requerido: SVG con fondo transparente, tamaño de archivo de hasta 10 MB.
Logotipo para el tema oscuro
El logotipo principal mostrado en la interfaz de usuario de B2CORE cuando el tema oscuro está habilitado.
El formato requerido: SVG con fondo transparente, tamaño de archivo de hasta 10 MB.
Logotipo corto para el tema oscuro
Una versión compacta del logotipo mostrada cuando el menú principal está contraído en el tema oscuro.
El formato requerido: SVG con fondo transparente, tamaño de archivo de hasta 10 MB.
Favicon (.ico)
El icono pequeño mostrado en la pestaña del navegador.
El formato requerido: ICO, tamaño de archivo de hasta 10 MB.
Favicon (.svg)
La versión vectorial del favicon para navegadores compatibles con SVG.
El formato requerido: SVG, tamaño de archivo de hasta 10 MB. Se utilizará como un icono escalable.
Icono táctil de Apple
El icono mostrado en dispositivos Apple cuando la página de la interfaz de usuario de B2CORE se añade a la pantalla de inicio.
El formato requerido: PNG, 180×180 píxeles, tamaño de archivo de hasta 10 MB.
Fondo del tema claro
La imagen de fondo aplicada a las páginas de Registrarse e Iniciar sesión cuando el tema claro está habilitado. Añadir una imagen de fondo es opcional.
El formato recomendado: SVG, JPG o PNG, tamaño de archivo de hasta 10 MB.
Fondo del tema oscuro
La imagen de fondo aplicada a las páginas de Registrarse e Iniciar sesión cuando el tema oscuro está habilitado. Añadir una imagen de fondo es opcional.
El formato recomendado: SVG, JPG o PNG, tamaño de archivo de hasta 10 MB.
Imágenes del panel de administración
En esta sección, puedes cargar las imágenes mostradas en el Back Office (el formato recomendado: JPG, PNG o SVG, tamaño de archivo de hasta 10 MB):
- Logotipo del menú — el logotipo mostrado en el menú principal del Back Office
- Logotipo de la página de inicio de sesión — el logotipo mostrado en la página de inicio de sesión del Back Office
- Fondo de la página de inicio de sesión — la imagen de fondo aplicada a la página de inicio de sesión del Back Office
Esquema de colores
En esta página, personaliza la configuración de colores para los temas claro y oscuro de tu interfaz de usuario de B2CORE.
En la sección Configuración de marca, puedes configurar rápidamente la identidad de tu marca especificando el Color de marca y habilitando la opción Fondos teñidos, que aplica un sutil matiz del color de marca a los fondos de la interfaz.
La configuración de colores para elementos individuales de la interfaz descritos a continuación está disponible en la sección Configuración avanzada de colores.
Tema claro habilitado
Selecciona la casilla de verificación para habilitar el tema claro para la interfaz de usuario de B2CORE.
Habilita la opción Predeterminado para establecer el tema claro como predeterminado si ambos temas están habilitados.
Tema oscuro habilitado
Selecciona la casilla de verificación para habilitar el tema oscuro para la interfaz de usuario de B2CORE.
Habilita la opción Predeterminado para establecer el tema oscuro como predeterminado si ambos temas están habilitados.
Si no se selecciona ninguna de las casillas de los temas, tu interfaz de usuario de B2CORE utilizará los temas claro y oscuro predefinidos del diseño B2BDemo, y se ignorarán todas las configuraciones de colores personalizadas que se indican a continuación.
Si se seleccionan ambas casillas de los temas, ambos temas estarán disponibles para los clientes en la interfaz de usuario de B2CORE, junto con las configuraciones de colores personalizadas aplicadas.
La configuración avanzada de colores está organizada en las secciones Tokens semánticos V1 (Claro / Oscuro) y Tokens semánticos V2 (Claro / Oscuro), lo que te permite personalizar cada token de color por separado para los temas claro y oscuro. Para restablecer los tokens de color a los valores derivados de tu color de marca, haz clic en el botón Restablecer colores desde la marca.
Solo se admiten códigos de color hexadecimales de 6 u 8 caracteres.
La sección Tokens semánticos V1 (Claro / Oscuro) incluye los siguientes grupos de tokens:
- Acento —
accent,accentHover,accent40,accent10,demo - Estado —
positive,positive20,medium,medium20,negative,negative20 - Superficie —
background,background96,card,field,disabled,overlay,tooltip,divider - Texto —
textMain,textSecondary,textSecondary40,textContrast
La sección Tokens semánticos V2 (Claro / Oscuro) incluye los siguientes grupos de tokens:
- Acento —
brand,brandSubtle,brandMuted,alternative,alternativeSubtle,alternativeMuted,positive,positiveSubtle,positiveMuted,medium,mediumSubtle,mediumMuted,negative,negativeSubtle,negativeMuted,neutral,overlay,overlaySubtle,overlayMuted - Carácter —
onSurface,onSurfaceSecondary,onSurfaceInverse,onBrand,onAlternative,onPositive,onMedium,onNegative,onNeutral,onOverlay,onSurfaceBrand,onSurfaceAlternative,onSurfacePositive,onSurfaceMedium,onSurfaceNegative,onSurfaceOverlay - Superficie —
surfaceLow,surface,surfaceHigh,surfaceHighest,surfaceInverse,backdrop - Contorno —
outline,outlineStrong - Estado —
stateHovered,statePressed,stateHoveredInverse,statePressedInverse,stateDarken,stateDarkenStrong
Variables adicionales del tema claro/oscuro (json)
Usa este campo para especificar un objeto JSON con variables adicionales, como las que definen cómo se comporta una imagen de fondo en el tema correspondiente:
{
"optional-external-bg-position": "0 0",
"optional-external-bg-size": "cover",
"optional-external-bg-repeat": "no-repeat",
"optional-external-bg-attachment": "fixed"
}"optional-external-bg-position": "0 0"
Posiciona la imagen de fondo en la esquina superior izquierda.
"optional-external-bg-size": "cover"
Escala la imagen de fondo para cubrir toda la página.
"optional-external-bg-repeat": "no-repeat"
Evita que la imagen de fondo se repita (en mosaico) en cualquier dirección.
"optional-external-bg-attachment": "fixed"
Mantiene la imagen de fondo fija cuando se desplaza la página. No se moverá con el contenido.
Campos
En esta página, puedes especificar campos de personalización adicionales.
Nombre del proyecto
El nombre de tu proyecto mostrado en la interfaz de usuario de B2CORE.
Scripts (js-script)
Añade aquí tus scripts de JavaScript (JS). Estos scripts se ejecutarán automáticamente cuando los clientes abran la página de Registrarse o Iniciar sesión.
Última actualización