Personalización del aspecto
Onetbooking utiliza mecanismos para aislarse de los estilos de las páginas. 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 hará siempre a nivel de sitio web, no hay configuraciones del motor que se puedan preparar.
Niveles de personalización
El tema 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 siempre se llevan bien 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 UI Colors. Partiendo del color del hotel, que será siempre 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, éstos 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 necesitemos según para lo que se apliquen.
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 orden alfabético:
| Variable | Valor por defecto | Descripción |
|---|---|---|
--ob-page-highlight-text-hover | --ob-primary-800 | Color del texto destacado de la página de disponibilidad al pasar el ratón. |
--ob-page-highlight-text | --ob-primary-600 | Color del texto destacado de la página de disponibilidad. |
--ob-page-select-ring | --ob-primary-600 | Color del anillo de selección de la página de disponibilidad. |
--ob-sidebar-button-bg | --ob-primary-600 | Color de fondo de los botones de la barra lateral. |
--ob-sidebar-button-disabled-bg | --ob-primary-300 | Color de fondo de los botones de la barra lateral de la disponibilidad deshabilitados. |
--ob-sidebar-button-disabled-fg | --ob-primary-100 | Color del texto de los botones de la barra lateral de la disponibilidad deshabilitados. |
--ob-sidebar-button-fg | --ob-primary-100 | Color del texto de los botones de la barra lateral de la disponibilidad. |
--ob-sidebar-button-hover-bg | --ob-primary-700 | Color de fondo de los botones de la barra lateral de la disponibilidad al pasar el ratón. |
--ob-sidebar-card-bg | --ob-primary-600 | Color de fondo de las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-card-fg | white | Color del texto de las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-card-icons | --ob-primary-600 | Color de los iconos en las tarjetas de la barra lateral de la disponibilidad. |
--ob-sidebar-total | --ob-primary-600 | Color del total de la barra lateral de la disponibilidad. |
--ob-widget-bg | white | Color de fondo del widget. |
--ob-widget-calendar-bg | white | Color de fondo del calendario. |
--ob-widget-calendar-disabled-fg | #d1d5db | Color del texto de los días deshabilitados. |
--ob-widget-calendar-fg | #111827 | Color del texto del calendario. |
--ob-widget-calendar-range-bg | #e5e7eb | Color de fondo de los días entre el rango seleccionado. |
--ob-widget-calendar-range-fg | #111827 | Color del texto de los días entre el rango seleccionado. |
--ob-widget-calendar-range-hover-bg | #d1d5db | Color de fondo de los días entre el rango seleccionado al pasar el ratón. |
--ob-widget-calendar-selection-bg | --ob-primary-600 | Color de fondo de los días seleccionados. |
--ob-widget-calendar-selection-fg | white | Color del texto de los días seleccionados. |
--ob-widget-calendar-selection-hover-bg | --ob-primary-700 | Color de fondo de los días seleccionados al pasar el ratón. |
--ob-widget-fg | #333 | Color genérico del texto del widget. |
--ob-widget-guests-button-border | --ob-primary-600 | Color del borde del botón de cerrar la selección de habitaciones en el widget desktop. |
--ob-widget-guests-button-hover-bg | --ob-primary-50 | 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 | --ob-primary-600 | Color del texto del botón de cerrar la selección de habitaciones en el widget desktop. |
--ob-widget-guests-numeric-bg | --ob-primary-100 | Color de fondo de los botones + y - del widget. |
--ob-widget-guests-numeric-fg | --ob-primary-400 | Color del texto de los botones + y - del widget. |
--ob-widget-input-bg | white | Color de fondo de los inputs. |
--ob-widget-input-border-focus | #374151 | Color del borde de los inputs cuando están enfocados. |
--ob-widget-input-border | #9ca3af | Color del borde de los inputs. |
--ob-widget-input-fg | #4b5563 | Color del texto de los inputs. |
--ob-widget-input-height | 4rem | Altura de los inputs. |
--ob-widget-input-icon | #9ca3af | Color de los iconos de los inputs. |
--ob-widget-input-placeholder | #9ca3af | Color del texto de los placeholders de los inputs. |