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.

Redondeo del borde

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

Formularios

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

Selector de fechas

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

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.