Personalización del aspecto
Onetbooking utiliza mecanismos técnicos para aislarse de los estilos de las páginas donde se inserta. Esto nos permite mantener la funcionalidad y aspecto que necesita para vender. Para personalizar el aspecto del widget y de la página de reservas debemos definir una serie de variables CSS a nivel global de la página.
Variables CSS
Si no conoces las variables CSS puedes consultar la documentación de MDN primero.
Es importante definir estas variables iguales en todas las páginas que lleven un widget y en la página de reservas, para aplicar de forma uniforme el tema que queramos.
La personalización de colores del motor se controla siempre desde el sitio web. La configuración por defecto del motor aplica un color corporativo que no está pensado para producción.
Niveles de personalización
Onetbooking está preparado para utilizar dos niveles de personalización diferentes según las necesidades concretas de cada página:
Nivel sencillo: Este nivel inicial nos permite configurar todo el motor definiendo una pequeña escala de colores autogenerada. Partiendo de un único color podemos personalizar rápidamente todo el motor a la web del hotel uniformemente.
Nivel avanzado: Este nivel más avanzado nos permite definir valores concretos quirúrgicamente. Requiere más conocimientos del funcionamiento interno del motor pero a cambio es totalmente flexible.
Recomendamos empezar personalizando en el nivel sencillo con la escala de colores. Si posteriormente alguno de los elementos no está lo suficientemente integrado con la página entonces se puede proceder al nivel avanzado para tocar específicamente ese componente.
Nivel sencillo
El nivel sencillo consiste en configurar una escala de exactamente 10 tonalidades del mismo color que van desde el más claro (con un valor de 50) hasta el más oscuro (con un valor de 900). Si has utilizado Tailwind alguna vez te sonará la escala; y sino te la explicamos a continuación.
Esta escala se puede autogenerar, aunque las matemáticas y los colores no es una ciencia exacta y puede que tengas que personalizar manualmente algunas tonalidades para evitar que se pierdan entre ellas. Por ejemplo si el hotel utiliza un color muy claro es posible que la parte baja de la escala sean todos colores prácticamente blancos y eso no va a dar un buen resultado ni permitir el contraste entre ellos.
Como punto de partida recomendamos utilizar un generador de colores. Partiendo del color del hotel, que probablemente coincida con la tonalidad 600 podemos generar una escala. A partir de ahí ajustamos manualmente los que necesitemos.
Una vez generada nuestra escala pasamos a definir las variables CSS que nos interesan. Incorpora estos estilos en alguno de los ficheros CSS globales de tu sitio web.
Sustituye tus colores
Recuerda sustituir tus colores, estos son de ejemplo.
html {
--ob-primary-50: #fdf2f7;
--ob-primary-100: #fce7f0;
--ob-primary-200: #fbcfe3;
--ob-primary-300: #f9a8cc;
--ob-primary-400: #f472ac;
--ob-primary-500: #ec4891;
--ob-primary-600: #db2777;
--ob-primary-700: #be1862;
--ob-primary-800: #9d1753;
--ob-primary-900: #831848;
--ob-primary-950: #500727;
}Nivel avanzado
La escala inicial 50-950 nos permite definir unos colores que se utilizan por defecto para otras variables más concretas. Cada una de estas variables más concretas se puede personalizar con los valores que queramos reemplazar.
Por ejemplo si queremos que el widget tenga un fondo transparente en lugar de blanco podemos configurar:
html {
--ob-widget-bg: transparent;
}Las variables que tenemos disponibles para personalizar son las siguientes, en estricto orden alfabético:
| Variable | Descripción |
|---|---|
--ob-breadcrumbs-active-bg | Color de fondo del paso activo en el proceso de reserva. |
--ob-breadcrumbs-active-fg | Color del texto del paso activo en el proceso de reserva. |
--ob-breadcrumbs-bg | Color de fondo de los pasos del proceso de reserva. |
--ob-breadcrumbs-fg | Color del texto de los pasos del proceso de reserva. |
--ob-button-bg | Color de fondo de los botones en los formularios. |
--ob-button-disabled-bg | Color de fondo de los botones deshabilitados en los formularios. |
--ob-button-disabled-fg | Color del texto de los botones deshabilitados en los formularios. |
--ob-button-fg | Color del texto de los botones en los formularios. |
--ob-button-hover-bg | Color de fondo de los botones en los formularios al pasar el ratón. |
--ob-error-highlight | Color del resaltado en la página de error 404. |
--ob-error-highlight-hover | Color del resaltado en la página de error 404 al pasar el ratón. |
--ob-input-focus | Color del resaltado de inputs, checkboxes, textareas y otros elementos de formulario cuando están activos. |
--ob-link | Color de los enlaces en el formulario de reserva. |
--ob-link-hover | Color de los enlaces en el formulario de reserva al pasar el ratón. |
--ob-page-highlight-text | Color del texto destacado de la página de disponibilidad. |
--ob-page-highlight-text-hover | Color del texto destacado de la página de disponibilidad al pasar el ratón. |
--ob-page-select-ring | Color del anillo de selección de la página de disponibilidad. |
--ob-sidebar-button-bg | Color de fondo de los botones de la barra lateral. |
--ob-sidebar-button-disabled-bg | Color de fondo de los botones de la barra lateral de la disponibilidad deshabilitados. |
--ob-sidebar-button-disabled-fg | Color del texto de los botones de la barra lateral de la disponibilidad deshabilitados. |
--ob-sidebar-button-fg | Color del texto de los botones de la barra lateral de la disponibilidad. |
--ob-sidebar-button-hover-bg | Color de fondo de los botones de la barra lateral de la disponibilidad al pasar el ratón. |
--ob-sidebar-card-bg | Color de fondo de las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-card-fg | Color del texto de las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-card-icons | Color de los iconos en las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-total | Color del total de la barra lateral de la disponibilidad. |
--ob-success-icon | Color de los iconos en la página de éxito. |
--ob-widget-bg | Color de fondo del widget. |
--ob-widget-button-bg | Color de fondo de los botones en el widget. |
--ob-widget-button-disabled-bg | Color de fondo de los botones en el widget deshabilitados. |
--ob-widget-button-hover-bg | Color de fondo de los botones en el widget al pasar el ratón. |
--ob-widget-calendar-bg | Color de fondo del calendario. |
--ob-widget-calendar-disabled-fg | Color del texto de los días deshabilitados. |
--ob-widget-calendar-fg | Color del texto del calendario. |
--ob-widget-calendar-range-bg | Color de fondo de los días entre el rango seleccionado. |
--ob-widget-calendar-range-fg | Color del texto de los días entre el rango seleccionado. |
--ob-widget-calendar-range-hover-bg | Color de fondo de los días entre el rango seleccionado al pasar el ratón. |
--ob-widget-calendar-selection-bg | Color de fondo de los días seleccionados. |
--ob-widget-calendar-selection-fg | Color del texto de los días seleccionados. |
--ob-widget-calendar-selection-hover-bg | Color de fondo de los días seleccionados al pasar el ratón. |
--ob-widget-fg | Color genérico del texto del widget. |
--ob-widget-guests-button-border | Color del borde del botón de cerrar la selección de habitaciones en el widget desktop. |
--ob-widget-guests-button-hover-bg | Color de fondo del botón de cerrar la selección de habitaciones en el widget desktop al pasar el ratón. |
--ob-widget-guests-button-text | Color del texto del botón de cerrar la selección de habitaciones en el widget desktop. |
--ob-widget-guests-numeric-bg | Color de fondo de los botones + y - del widget. |
--ob-widget-guests-numeric-fg | Color del texto de los botones + y - del widget. |
--ob-widget-input-bg | Color de fondo de los inputs. |
--ob-widget-input-border | Color del borde de los inputs. |
--ob-widget-input-border-focus | Color del borde de los inputs cuando están activos. |
--ob-widget-input-fg | Color del texto de los inputs. |
--ob-widget-input-height | Altura de los inputs. |
--ob-widget-input-icon | Color de los iconos de los inputs. |
--ob-widget-input-placeholder | Color del texto de los placeholders de los inputs. |