InicioDocMybooking Reservation Engine | Custom Properties

Mybooking Reservation Engine | Custom Properties

En la versión 1.0.0 de Mybooking Reservation Engine, el plugin que sirve de conexión con el panel de gestión de reservas, se refactorizó todo el código, se añadieron nuevas funcionalidades y se introdujo un mecanismo para ajustar los estilos de presentación: las Custom Properties.

Qué son las Custom Properties

Las Custom Properties, en adelante variables CSS o variables, se utilizan para guardar valores globales que pueden controlar el aspecto de varios elementos simultáneamente. Por ejemplo, la variable --mb-border-color controla el color del borde de varios elementos como las tarjetas de los resultados de búsqueda o de los campos de formularios entre otros. Con este mecanismo, podemos modificar el aspecto del plugin de Mybooking para que se adapte al diseño de nuestro sitio web.

↗ Más información sobre Custom Properties

Variables vs Configuración

Debido a que la lista de variables implementadas es muy extenso, trasladarlas todas a un panel de configuración visual resulta complejo y obligaría a tener un apartado de configuración demasiado grande. Por esta razón, en futuras actualizaciones del plugin iremos implementando las variables más utilizadas para que sean modificables vía interfaz, pero manteniendo el resto de ellas accesibles únicamente mediante CSS.

Cómo usar las variables CSS en Mybooking

Para aplicar nuevos valores a las variables incluidas en el código de nuestro plugin existen dos métodos: el CSS Personalizado y el child theme.

Cuando queremos implementar pequeños ajustes o modificar unos pocos elementos o propiedades de estos, podemos hacerlo directamente el el CSS personalizado que encontraremos en Apariencia -> Personalizar -> CSS personalizado en el Dashboard de nuestro WordPress. El inconveniente de este método es que dependen del tema activo en el momento de aplicarlas, y se perderán cuando activemos un tema diferente, si no las guardamos antes del cambio. Aún así, es una manera rápida y eficaz de realizar cambios en el diseño.

Para aplicar nuevos valores a las variables del plugin en el CSS personalizado, seguiremos este esquema:

:root {
	--custom-property-one: new-value;
	--custom-property-two: new-value;
}

Si deseamos aplicar cambios permanentes o modificar muchos elementos del plugin de Mybooking, el método recomendado es crear un tema hijo (child theme) y aplicar los nuevos valores el la hoja de estilo de dicho tema hijo. De esta forma tendremos mayor control sobre los cambios aplicados y podremos mantenerlas en lugar seguro ante futuros cambios en nuestro sitio web.

↗ Saber más sobre child themes para WordPress

Listado de variables

Puedes acceder a las variables de Mybooking Reservation Engine en el código fuente en el fichero assets/styles/mybooking-engine.css

↗ Ver en GitHub

A continuación se detallan todas las variables presentes en el plugin ordenadas por categorías, incluyendo su nombre, su valor por defecto y una descripción.

Paleta de colores

Paleta de colores genéricos. Se aplica globalmente.

NombreValor Descripción
--mb-accent-color#2193F2Color global
--mb-info-colorvar(–mb-accent-color)Color de resaltado. Hereda el valor de --mb-accent-color
--mb-success-color#3DD992Color para elementos positivos (mensajes de éxito o similares)
--mb-danger-color#E6546EColor para elementos negativos (mensajes de error o similares)
--mb-warning-color#FFB74DColor para alertas (mensajes de aviso o similares)
--mb-light-color#DDDDDDColor de resaltado suave
--mb-light-color#EEEEEEColor de resaltado tenue
--mb-border-color#BBBBBBColor para los bordes
--mb-background-color#EEEEEEColor de fondo tenue
--mb-dark-background-color#424242Color de fondo oscuro
--mb-negative-text-color#FFFFFFColor de texto para fondos oscuros

Redondeo del borde

Permite definir el redondeo de las esquinas de algunos elementos. Se aplica globalmente.

NombreValorDescripción
--mb-border-radius0Controla el redondeo en pixels de los bordes en botones, contenedores, campos de formulario, etc.

Formularios

Permite definir algunos atributos de los campos de formulario para la pagina de completar la reserva y el formulario de contacto.

NombreValorDescripción
--mb-form-field-height3remDefine la altura de los campos de formulario. Equivale a 48px.
--mb-form-field-border-colorvar(–mb-border-color)Define el color del borde de los campos. Hereda el valor de --mb-border-color
--mb-form-field-backgroundwhiteDefine el color de fondo de los campos.

Selector de fechas

Permite definir los atributos generales del selector de fechas de la reserva.

NombreValorDescripción
-mb-selector-label-colorcurrentcolorDefine el color de los nombre de los campos. El valor currentcolor hereda el valor general del texto definido en el tema activo.
--mb-selector-backgroundtransparentDefine el color de fondo del contenedor del selector de fechas. Hereda el valor de --mb-form-field-border-color para igualarlos.
--mb-selector-border-colorvar(–mb-form-field-border-color)Define el color del borde de los campos. Hereda el valor de --mb-form-field-border-color
--mb-selector-field-heightvar(–mb-form-field-height)Define la altura de los campos del selector de fechas. Hereda el valor de --mb-form-field-height
--mb-selector-promo-bordervar(–mb-form-field-border-color)Define el color del borde del campo del código de promoción cuando está activo. Hereda el valor de --mb-form-field-border-color
--mb-selector-promo-bgwhiteDefine el color de fondo del campo del código de promoción cuando está activo.
--mb-selector-promo-opacity1Define la opacidad del campo del código de promoción cuando está activo. Valores en decimales: 0.5 = 50%.

Resultados de la búsqueda

Definen los estilos de los diferentes elementos y vistas que genera el shortcode para la página Escoger vehículo.

NombreValorDescripción
--mb-product-separation0.7remControla la separación entre las tarjetas de productos en la vista de cuadrícula o lista.
--mb-product-backgroundtransparentDefine el color de fondo del contenedor de las tarjetas verticales de producto.
--mb-product-border-colorvar(–mb-border-color)Define el color del borde de las tarjetas verticales de producto. Hereda el valor de --mb-border-color
--mb-product-image-height260pxDefine la altura de contenedor de la imagen de la tarjeta vertical del producto.
--mb-product-image-width-img100%Define el ancho total de la imagen del producto en las tarjetas verticales.
--mb-product-header-height75pxDefine la altura del contenedor del precio del producto en las tarjetas verticales.
--mb-product-body-height120pxDefine la altura del contenedor de la descripción del producto en las tarjetas verticales.
--mb-product-footer-height76pxDefine la altura del contenedor del botón de reservar el producto en las tarjetas verticales.
--mb-product-btn-height50pxDefine la altura del botón de reservar el producto.
--mb-product-list-left-width40%Controla el ancho del contenedor izquierdo en las tarjetas horizontales.
--mb-product-list-right-width60%Controla el ancho del contenedor derecho en las tarjetas horizontales.
--mb-product-list-image-height375pxDefine la altura de la imagen en las tarjetas horizontales.

Arriba