Saltar al contenido principal

¿Cómo personalizar el Ticketshop o Booking widget de Regiondo con CSS personalizado?

Kay Endörfer
  • Actualización
Nota
El Calendar widget no puede ser personalizado a través de CSS Regiondo ya que está cargado como un <div>.
El proveedor puede personalizarlo dentro de su código fuente personal dentro de la etiqueta <style>.

 

1. Personalizar a través del Shop editor

Regiondo Ticketshop o Bookking Widget es fácilmente personalizable a través del Shop editor.

Es posible que desee llevar la personalización un poco más lejos cambiando el color de los elementos específicos, usando diferentes fuentes, ocultando elementos o insertando iconos. Esto puede lograrse utilizando CSS personalizado.

 

2. Personalizar con CSS personalizado

Nota
Se requiere conocimiento básico de CSS. Le sugerimos contratar a un experto si no está cómodo procediendo con la siguiente guía. Regiondo no ofrece asistencia técnica con la personalización CSS, y no puede garantizar que un CSS personalizado sea compatible con todas las futuras mejoras de características y apariencias. Por lo tanto, tenga cuidado de probar la compatibilidad de su CSS personalizado con versiones Regiondo.

Podemos, pero no tenemos obligación de eliminar el contenido que determinamos a nuestra sola discreción son ilegales, ofensivo, amenazante, calumnioso, difamatorio, obsceno o de otro modo censurable o viola la propiedad intelectual de cualquier parte.
 
Vaya a la tienda Configuración > Sitio web de integración > Código CSS individual
 
 
En esta página puede ver:

Seleccione Idioma - seleccione caja, que le permite seleccionar una de sus tiendas, donde se aplicará CSS personalizado. Por defecto "Global" valor significa que CSS saldrá para todas las tiendas.

Código CSS -  área de texto, donde puede proporcionar código CSS para sobrescribir reglas CSS predeterminadas, sobrescribir la configuración de CSS del Shop Editor, o para hacer cambios adicionales a elementos específicos dentro del iframe de Regiondo.
 
Nota
El campo CSS Code tiene resaltado de sintaxis CSS embebido, lo que puede ser muy útil para identificar posibles problemas o errores en el código CSS. Cualquier etiqueta HTML no está permitida y será eliminada antes de la salida dentro de Ticketshop/Widget. Si carga imágenes o contenido adicional, debe ser servido a través de https://
 
Por ejemplo, si desea reemplazar la familia de fuentes primaria y ajustar el tamaño de la fuente en ticketshop y widget globalmente, Seleccione "Global" de la caja de selección, e simplemente incluya su fuente y especifique su nombre de fuente como se muestra a continuación:
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body,
button,
.product-shop,
.product-shop select {
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
}
 
Resultado:
 
 
Aquí estamos usando "Open Sans" fuente del directorio de fuentes de Google (https://fonts. oogle.com/), donde puedes encontrar el que mejor se adapte a sssssssu diseño de web. O puede utilizar @font-face para especificar su propia fuente. La fuente en sí misma puede ser alojada en su sitio subiéndola a su espacio web o puede estar alojada en cualquier otro lugar. La URL debe ser correcta en la ruta del archivo de la declaración @font-face:
 
@font-face {
    font-family:'Custom Font';
    src:url(https://www.your-website. om/fonts/Custom-Font.otf);
    font-weight:400;
}
body,
botón,
. roduct-shop,
.product-shop select {
    font-family:'Custom Font', Helvetica, Arial, sans-serif;
}
O si su objetivo es el rendimiento de velocidad de carga del sitio web, es posible que desee utilizar la pila de fuentes por defecto. Añadiendo Helvetica aquí primero en esta pila para que los dispositivos iOS la usen a través de la fuente Arial, de la siguiente manera:
 
cuerpo,
botón,
.product-shop,
. roduct-shop select {
    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
Seleccionar Global o cambiar a una de sus tiendas le permite especificar fácilmente diferentes fuentes por cada tienda.
 

3. Cómo localizar CSS que desea cambiar

Para localizar el CSS que quieres cambiar, puedes usar el elemento "Inspect/Inspectar". Si tiene un navegador de software como Chrome, Firefox, Safari u Opera, El elemento de inspección está disponible en el menú contextual y aparecerá un panel en su navegador que le mostrará el marcado de la izquierda y los estilos de la derecha. Tenga en cuenta que esta herramienta sólo está disponible en Safari si habilita las herramientas para desarrolladores. Los usuarios de IE deben tener la versión 11 o superior.
 
 
El inspector le ayudará a identificar el selector o estilo original que contiene las propiedades que desea cambiar. Una vez que haya identificado el CSS que desea cambiar, cópialo en el área CSS personalizada y ajustalo como desee.

Por ejemplo, queremos ocultar un elemento en Booking widget. Haga clic derecho en un elemento, seleccione "Inspeccionar", localízalo en el código HTML de la página, y buscar selectores existentes para este elemento (o podemos crear nuevo):
 
 
Copie ".booking-content .tab-info" selector al área CSS personalizada, y configure su propiedad de visualización a ninguno:
 
.booking-content .tab-info { display:none; }
 
Resultado:
 
Esto ocultará el elemento "tab-info" en las pestañas de Ticket y Regalo del widget. Si queremos ocultarlo sólo para la pestaña Ticket, entonces necesitamos sobrescribir su propiedad de visualización para la pestaña de regalo, ya que ambos tienen el mismo nombre de clase:
 
.booking-content .tab-info { display:none; }
.booking-content .gift-container .tab-info { display:block; }
Una vez que guardamos los cambios, con la propiedad de visualización establecida en "block" para . gift-container .tab-info, se ocultará sólo para la pestaña Ticket y se mostrará en la pestaña de regalo. Este es un ejemplo sencillo de cómo se puede personalizar el widget sobrescribiendo sus reglas CSS anteriores.

 

4. Probando Cambios

Puede editar y previsualizar estilos específicos en la barra lateral del Inspector del navegador haciendo clic en el valor de la propiedad, haga clic o haga doble clic en el espacio en blanco al final de la última propiedad para añadir una nueva. Esto también ayuda a tomar el selector de estilo correcto.

Una vez que guarde los cambios en la página CSS personalizada tendrá efecto inmediatamente, y se reflejará en el widget de su tienda de entradas y reservas. Tenga cuidado de cambiar las reglas CSS para las etiquetas globales y evitar esos casos cuando el texto de color blanco puede aparecer en el fondo blanco.

5. Ejemplos avanzados

Aquí están los ejemplos avanzados "CSS personalizado" para demostrar cómo podemos cambiar la apariencia del Ticketshop/Widget.
 

5.1 ¿Cómo cambiar el fondo del Widget de la reserva y los colores de los bordes?

 

Copia y pega este fragmento de código CSS en el campo de tarea de texto del código CSS personalizado:
.product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }
Nota
Como puedes ver hemos usado regla !important CSS, para sobrescribir la declaración asignada en línea en el elemento .product-shop. La regla !important se utiliza para reemplazar el CSS previamente asignado, o las declaraciones en línea establecidas dentro del atributo de estilo de las etiquetas HTML.
 
Resultado:
 
 
Estos cambios afectarán tanto al Widget como a la Tienda de entradas. Si desea declarar clases sólo para widget o sólo para la tienda de ticketshop puede separarlas por elementos únicos de los padres, que están presentes en Widget pero no en el código de la tienda de entradas. Por ejemplo:
 
<!-- Reglas CSS sólo para Widget de reserva: -->
#widget-wrapper . roduct-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

<!-- Reglas CSS sólo para Tienda de Ticketes: -->
#page-wrapper . roduct-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

 

5.2 ¿Cómo cambiar los colores de las pestañas del Booking Widget?

.tabs .tab { background:#336699; }
.tabs .tab h2 { color:#fff; }
.tabs .tab.active { background:transparent; }
.tabs .tab.active h2 { color:#336699; }
 
Resultado:
 

 

5.3 ¿Cómo cambiar el botón Añadir al carrito?

 

.product-shop .add-to-cart .button {
    background:none; border:2px solid #336699; color:#336699;
}
.product-shop .add-to-cart .button:hover {
    background:#336699; color:#fff;
}
Si agrega estilos a elementos como enlaces o botones, no olvide agregar reglas para el estado: hover, cuando el usuario pasa el ratón por encima de los enlaces o botones.

Resultado:

 

5.4 ¿Cómo añadir imagen de fondo a la página de la tienda de tickets?

#shell,
.whitelabel > body,
.wl-background-main,
.wl-background-around { background:none; }

html.whitelabel { background:#fff url(images/bg.jpg) no-repeat center top fixed; background-size:cover; }
Primero aquí eliminamos todos los fondos para establecer un solo fondo a la etiqueta html. Después de eso agregamos regla donde ponemos la url de la imagen y la establecemos para cubrir toda la página centrada, alineada arriba, y fijada.

Para aumentar la velocidad de carga de la página puede utilizar imágenes diferentes para diferentes resoluciones, de la siguiente manera:
 
@media screen and (max-width:1024px) {
    html.whitelabel { background-image:url(images/bg-1024.jpg); }
}
@media screen and (max-width:640px) {
    html.whitelabel { background-image:url(images/bg-640.jpg); }
 } } }

 

5.5 ¿Cómo cambiar los títulos de pasos del Widget de la reserva?

 

.a-title-option:after { content:'Select an Option:'; }
.a-title-date:after { content:'Select a Date:'; }
.a-title-time:after { content:'Select a Time:'; }

.a-label. -title-option:after { content:'Selected Option:'; }
.a-label.a-title-date:after { content:'Selected Date:'; }
.a-label.a-title-time:after { content:'Selected Time:'; }
Puede especificar un texto diferente para el título del paso que aún no se ha continuado, y para el título del paso después de que el usuario seleccione los valores, como se muestra arriba.

 

5.6 ¿Cómo cambiar los pasos del widget de reserva "editar" icono?

.booking-content .a-edit:before { background:url(data:image/png;base64,iVBORw0KGgoAAAAANSUhEUgAAAABAAAQCAYAAAf8/9hAAAAAyUlEQVQ4T6XTMU5CQRCA4Y/GhsOgiRUJBbHWRhoOYUc4AS0NBafQitpY2csxOA9meRNsjzh7UOn2c1m/39nsjMD/4xBT36ILd6xK5k+goADmjbgA35SUhMkPMIzVoj9U0q6BCWcQJ49YoL9NcEl
Aquí usamos base64 para la imagen para cargarla en línea. Esto puede ayudar a reducir solicitudes http adicionales por página, pero no se recomienda usar con imágenes más grandes, ya que las imágenes base64 no son almacenadas en caché por el navegador.

Resultado:

 

5.7 ¿Cómo cambiar los estilos de los desplegables seleccionados?

seleccionar { padding:2px; color:#336699; fondo:#fff; border:1px solid #336699; }
 
Resultado:
 
Esto se aplicará globalmente a todos los campos seleccionados, incluyendo los campos de compra. Si desea especificar este estilo sólo para la reserva de widget, o sólo para las secciones de verificación, puede utilizar selectores padres como ". tienda roducta seleccionar", ".sc-content select" etc.
 

5.8 ¿Cuál es el código para cambiar la frase en el widget de reserva que pide al cliente que elija una fecha y actividad?

 

.tab-info {
 visibility: hidden;
}


. ab-info:after {
Content: 'Ingresar texto aquí';
visibilidad: visible;
display: block;
position: absolute;
top: 45px;
}

 

5.9 ¿Cómo cambiar el color de fondo del mensaje de valoración/revisión?

No puede cambiar el color de fondo del mensaje de valoración/valoración en el editor de la tienda. Pero puedes cambiarlo en CSS personalizado con un código simple.

 .form-box { 
            background-color: #002f53 !important; 
}
Puede copiar el código y pegarlo en CSS personalizado. Cambiar el código de color de fondo. Necesitas guardar tu nueva configuración.
 

 

Echa un vistazo a los siguientes recursos para obtener más ayuda:

Artículos relacionados