Cambia el diseño de tu sistema de reservas

Diseña el widget de tu sistema de reservas como quieras. Cambia el fondo, los colores, los botones, las fuentes, etc. Puedes cambiarlo agregando código CSS o si lo deseas ponte en contacto con nuestro equipo de soporte para cualquier pregunta o duda puedas tener a través del botón MÁS de tu panel de control de TuriTop.

Para modificar el diseño, tienes que ir a tu panel de TuriTop, pestaña ''Diseño''.

nav-bar-diseño

En la imagen que se muestra a continuación, puedes introducir el código que desees, ya sea relacionado con el estilo de visualización del widget, o bien para  modificar secciones por defecto que tú no necesitas mostrar u otras que quieras añadir, etc.

Consejo: Recomendamos siempre añadir cualquier código adicional, al final del código nativo para que sea más fácil localizarlo en caso de modificaciones. 

El Widget por defecto se ve así:


Si no te gustan los colores por defecto, o el widget no se complementa con los colores de tu web, tienes infinidades de maneras de modificarlo en tu software de reservas.

En el siguiente ejemplo tienes el código usado para cambiarlo a tonos naranjas.

Ten en cuenta: que puedes copiar y pegar este código y cambiar los valores de background (fondo de pantalla) y de color (color de la fuente) por los que más te gusten

Aquí está el código utilizado para que puedas copiar y pegarlo en tu sistema de reservas TuriTop:

/*** COLOR FONDO DE PANTALLA***/
html, body, div.booking-box {background:#ffffff; }


/***COLOR TEXTO TITULO DEL SERVICIO***/
div.booking-box-header h1 {color: #4F5155;}


/***CALENDARIO***/


/***TITULO DEL MES***/
.eventsCalendar-currentTitle .monthTitle {background-color:#F58500; color: #FFF; }



/****DÍAS***/


   /***DIA ACTUAL***/
.eventsCalendar-daysList li.current a {background-color: #fff; color: #666; }

   /***DIAS ABIERTOS***/
.eventsCalendar-daysList li.dayWithEvents a {background-color: #5cb85c; color: #FFF;}

   /***DÍAS CERRADOS***/
.eventsCalendar-day a {background-color: #CC7070; color: #424242;}

   /***DIA SELECCIONADO***/
.eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a, .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a:hover {background-color: #F58500; color: #FFF;}


/**** HORAS ***/


   /**** HORAS DISPONIBLES ***/
.event-label , label.event-label:hover {background: #5cb85c; color: #FFF;}

   /**** HORAS CERRADAS  ***/
.event-label-closed {background: #fbc6bf; color: #ee1c00; }

   /**** HORA SELECCIONADA  ***/
.event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;}

/****  Horas disponibles pero cerradas por released ***/

.too-late, .too-late a, .too-late .event
{ background: #DDBBE5 !important; color: #7F059D !important; }

/**** Horas pasadas ***/
label.event-label-closed.event_started {
    background: lightgray !important;
    color: gray !important;
    text-decoration: line-through
}


/***BOTONES***/


/***BOTONES DE COMPRA***/
.product-buy-now, .buy-now, .buy-now-2 {background: #F58500; color: #fff;}

/***HOVER BOTONES DE COMPRA***/
.product-buy-now:hover, .buy-now:hover, .buy-now-2:hover {background: #d47505; color: #fff;}

 

Aquí te mostramos otros ejemplos:

Ver Ejemplo 1
Ver Ejemplo 2
Ver Ejemplo 3
Ver Ejemplo 4

 

Si necesitas ayuda, también te puedes ponerte en contacto con nosotros a través de la opción MÁS de tu Panel de Control de TuriTop y te enseñaremos cómo hacerlo.

Actualización: Color horas pasadas y color horas cerradas por horarios

Colores sistema de reservas TuriTop

Ahora ya puedes configurar un color de hora diferente según los siguientes estados 

  • Horas disponibles (color verde)
  • Horas cerradas (color rojo)
  • Horas que están cerradas por horarios (released) sin reservas (color violeta)
  • Horas pasadas (color gris)

Para ello debes de copiar y pegar el siguiente código en la pestaña Diseño de tu panel de control de TuriTop:

   /**** HORAS DISPONIBLES ***/
.event-label , label.event-label:hover {background: #5cb85c; color: #FFF;}

   /**** HORAS CERRADAS  ***/
.event-label-closed {background: #fbc6bf; color: #ee1c00; }

   /**** HORA SELECCIONADA  ***/
.event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;}

/****  Horas disponibles pero cerradas por released ***/

.too-late, .too-late a, .too-late .event
{ background: #DDBBE5 !important; color: #7F059D !important; }

/**** Horas pasadas ***/
label.event-label-closed.event_started {
    background: lightgray !important;
    color: gray !important;
    text-decoration: line-through
}

El código debes copiar y pegarlo en el siguiente espacio. Si ya tienes algún código metido, introdúcelo justo al final y pulsa en el botón ''PUBLICAR''.

Ten en cuenta: que puedes cambiar el color que hemos establecido cambiando simplemente los valores que pone en background (fondo) y en color (color de texto).

 

Si además quieres mostrar una leyenda que explique el significado de cada color en tu Calendario de Reservas puedes copiar y pegar el siguiente código en ''Servicios'' >>> ''Ajustes por defecto'' >>> ''Servicio HTML personalizado''. 

<center>
<label class="event-label" title="Disponible"><span title="Disponible">DISPONIBLE</span></label>

<label class="event-label-closed too-late" title="Llamar para consultar disponibilidad"><span title="Llamar para consultar disponibilidad">LLAMAR PARA RESERVAR</span></label>

<label class="event-label-closed" title="No disponible"><span title="No disponible">OCUPADO</span></label>
</center>

El lugar donde debes pegar el código es en el siguiente lugar:

 Si tienes alguna duda por favor no dudes en contactar con nuestro equipo de soporte pulsando el botón Más de tu Panel de Control de TuriTop.

¡Ya estás list@ para modificar el diseño del widget en tu sistema de reservas!