¿Cómo cambiar el diseño del calendario de reservas? – Centro de Ayuda del Sistema de Reservas TuriTop

Tiny graphic designer drawing with big pen on computer screen.jpg

¿En dónde puedo encontrarlo? Panel de control >>> Diseño

Dentro de la pestaña Diseño, puedes personalizar el estilo de tu widget de reservas para que encaje a la perfección con la identidad visual de tu marca y transmita una imagen coherente.

Podrás encontrar tanto plantillas prediseñadas listas para usar, como la opción de añadir código CSS personalizado si buscas un acabado a medida:

Previsualización en tiempo real: Haz clic en "Actualizar vista previa" para comprobar cómo quedan los cambios de código antes de aplicarlos.
Guardar y aplicar: Una vez que el resultado sea el deseado, pulsa «Publicar» para guardar los ajustes definitivamente.
Historial de versiones: Dispones también de un apartado donde consultar y restaurar cualquiera de las versiones guardadas con anterioridad.

personalizar-diseño.png

Diseños disponibles

El primer paso consiste en seleccionar la plantilla base que mejor se adapte a tus necesidades:

Diseños preestablecidos

TuriTop te ofrece una serie de diseños preestablecidos para facilitarte la implementación rápida de tu calendario de reservas ofreciendo un diseño moderno y atractivo.

Es posible modificar el estilo de estas plantillas de diseño, pero será necesario que redactes código CSS que anule o modifique las propiedades actuales.

Aqua

Elegant Dark

Minimal Light

Skyline Light

Green Gradient

Aqua wave

Green Forest

Gold Horizon

Mint Sand

Ocean Spirit

Pink Sunset

Purple Dream

Diseño bookingbox-v3

El diseño bookingbox-v3 te permite mostrar un calendario de reservas más grande con esquinas redondeadas, disponible tanto en light mode como en dark mode.

Bookingbox-v3 (Light Mode)

Bookingbox-v3 (Dark Mode)

Personalización para la versión 3 (bookingbox-v3)

Si quieres personalizar tu caja de reserva para el bookingbox-v3 (modo claro u oscuro), puedes copiar y pegar el siguiente código en la caja de Diseño y cambiar los valores para que coincidan con los colores de tu página web. Hay infinitas posibilidades para ajustarlo.

:root {

    --turitop-color: #26b4e1 !important;
    --turitop-fontfamily: "Helvetica" ,sans-serif !important;
    --turitop-background-color: #000000 !important;
    --turitop-font-color-v3: #4d4d4d !important;
    --turitop-selectedday-background: #02703c !important;
    --turitop-available-color: #5fbe7d !important;
    --turitop-NotAvailable-color:#6c6c6c !important;
    --turitop-TooLate-event-color: #7F059D !important;
    --turitop-TooLate-background: #DDBBE5 !important;
    --turitop-CurrentDay-background: #DDBBE5 !important;
    --turitop-CurrentDayBorder-color-style: 1px dashed grey !important;

}

Recomendamos colocar cualquier código adicional o nuevo al final del código nativo. Esto ayuda a prevenir posibles problemas y facilita su localización para futuras modificaciones.

Widget sin fondo y con más espaciado

Si buscas un widget minimalista, pega el siguiente código CSS en la pestaña Diseño:

:root{
--turitop-available-color:transparent;
}

/*Border color days*/
.eventsCalendar-daysList li.dayWithEvents a,.event-label{
 border: 1px solid var(--turitop-color);
 border-radius: 5px;
 color: var(--turitop-color);

}
.eventsCalendar-daysList li {
 padding: 5px!important;
}
.eventsCalendar-daysList li.dayWithEvents a:hover,.event-label:hover,.eventsCalendar-day a,li.current.disabled a,.event-label-closed{
 background:transparent!important;
}
.event-label.event-label-selected,.event-label-selected:hover,.eventsCalendar-daysList li.dayWithEvents a:hover{
 color:#fff;
 border: 1px solid var(--turitop-color);
 background-color:var(--turitop-selectedday-background)!important;
}
.eventsCalendar-daysList li.dayClosed a,li.current.disabled a,.event-label-closed{
 color: #aaa!important;
}
li.current.disabled{
 border: unset;
}
/*Border space days*/
.eventsCalendar-daysList li a{
 width:35px;
 display: inline-block;
}
.event-label,.event-label-closed{
 height: 40px;
 line-height: 2em;
}

Se verá de este modo:

¿Quieres saber cómo configurar la funcionalidad "Llamar para consultar disponibilidad"? Haz clic aquí.

Diseño bookingbox-v2 (Obsoleto)

El diseño bookingbox-v2 ofrece un calendario más compacto con esquinas cuadradas.

Personalización para la versión 2 (bookingbox-v2)

Si estás utilizando el bookingbox-v2, también puedes utilizar el siguiente código para adaptar el calendario a los colores de tu página web. Copia y pega el código en el cuadro y, a continuación, cambia los valores necesarios:

/***Days without events**/.eventsCalendar-daysList li.dayEmpty a {background-color: #CC7070; color: #424242;}
/***Closed Days**/.eventsCalendar-daysList li.dayClosed a {background-color: #CC7070; color: #424242;}
/***Past Days**/.eventsCalendar-daysList li.dayPast.dayEmpty a {background-color: #CC7070; color: #424242;}