Cómo ajustar el código de tu Widget Editor – Regiondo

Desde el editor de widgets puedes configurar el color de los botones, la fuente y el contenido visible. Para aprovechar todas las opciones de personalización, añade tu propio código CSS al widget. En este artículo te explicamos cómo se construye el código CSS y te mostramos los ajustes más habituales para la vista de catálogo y la vista de producto.

Consejo: Puedes probar tu código CSS en muchas páginas web. Una de ellas es: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

1. Cómo trabajar con CSS

1.1. Estructura básica

Todo código CSS empieza con <template id="product-catalog-widget-styles">.
Esta etiqueta indica que el código es para el widget de productos y catálogo.
Además, conecta el código CSS con el código HTML.e.

<template id="product-catalog-widget-styles">
  <style>
  </style>
</template>

1.2. Escribir una regla CSS

Debajo del primer <style>, introduce el término del elemento que quieres editar.
Pon un punto . delante del término y una llave de apertura { detrás.
En la línea siguiente, introduce la propiedad que quieres cambiar, p. ej., color, seguida de dos puntos :.
Introduce un código de color hexadecimal o el nombre de un color (p. ej., green).
Añade un punto y coma ; después del color.
Cierra la regla con una llave de cierre }.
Añade más reglas CSS si es necesario.
Cierra el bloque de estilo con </style>.
Cierra la plantilla con </template>.
Debajo de la plantilla, añade el código HTML del editor de widgets de Regiondo.

Importante: Todo lo que aparece en negrita debe introducirse para que el código funcione. Todo lo que aparece en cursiva se puede cambiar.

<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #008000;
}
</style>
</template>

2. Añadir el código CSS al código del widget

Para que la personalización CSS funcione, tienes que añadir un fragmento al código HTML del editor de widgets.

Crea el código HTML en el editor de widgets.
Después de <product-catalog-widget, añade styles-template-id="product-catalog-widget-styles".

Ejemplo de código HTML del editor de widgets:

<product-catalog-widget widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget>
<script>...</script>

Resultado:

<product-catalog-widget styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget>
<script>...</script>

Código completo con la plantilla CSS y el código del widget:

<template id="product-catalog-widget-styles">
  <style>...</style>
</template>

<product-catalog-widget styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget>
<script>...</script>

3. Ajustes CSS habituales

Los códigos CSS de esta sección cubren las solicitudes de personalización más comunes. Algunos códigos modifican la vista de catálogo y otros la vista de producto.

Catalog view and Product view side by side, showing the price, title and booking areas

3.1. Encabezado Reserva en la vista de producto

Este código cambia el color del encabezado Reserva en la vista de producto.
También cambia el color de la información del precio.
El código utiliza el color #0275A4 (azul). Puedes sustituirlo por cualquier código de color hexadecimal.

.regiondo-booking-header {
color: #0275A4;
}

3.2. Título de la oferta en la vista de producto

El término regiondo-product-header corresponde al encabezado situado encima de la imagen de la oferta en la vista de producto.
Para cambiar su color, sustituye el código de color hexadecimal.

.regiondo-product-header {
color: #0275A4;
}

3.3. Fondo del widget

Puedes cambiar el color de fondo, pero debería ser siempre transparente.
Con un fondo transparente, los widgets se integran mejor en tu página web.

.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}

3.4. Ocultar el logotipo de Regiondo en la vista de catálogo

Este código oculta el logotipo de Regiondo en la vista de catálogo.

.Re-c-MuiButton-label svg {
display:none ;
}

Nota: Si este código no funciona debido a una clase dinámica, ponte en contacto con support@regiondo.com para obtener ayuda.

3.5. Encabezados Descripción, Más información y Lugar en la vista de producto

Este código modifica la vista de producto del widget.
Puedes ajustar el color de fondo del widget de reserva. Si es posible, debería seguir siendo transparente.
Puedes cambiar el color de la fuente de los encabezados Descripción, Más información y Lugar.
Puedes cambiar el color por cualquier código de color hexadecimal.

.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}

Ejemplo: En la captura de pantalla, el código de color hexadecimal #0275A4 (azul) se ha cambiado por #008000 (verde).

3.6. Títulos de las ofertas en la vista de catálogo

Este código cambia el color de los encabezados de las ofertas en la vista de catálogo.
Para cambiar el color, sustituye el código de color hexadecimal.

.regiondo-list-product-header{
color: #0275A4;
}