Personalizar Mybookings - HTML y CSS MetaEtiquetas personalizadas

Seguir

Mybookings ofrece un número de opciones de personalización más complejas para aquellos que están familiarizados con HTML/CSS o empleando un diseñador web.

Configuraciones > Motor de Reservas > Personalizar mybookings

Usted puede utilizar las opciones para MetaEtiquetado en la sección "personalizar mybookings" para añadir javascript, CSS y otros para la sección HEAD (encabezado) de su sitio HTML de mybookings. Por favor, no inserte texto normal/simple aquí ya que se puede romper la página.

Cloudbeds no proporciona soporte para su sitio web pero si ofrece algunas widget muy fácil de copiar y pegar que usted puede utilizar.

Si usted desea aprender más acerca de HTML y CSS en general, aquí están un par de buenos lugares para empezar:

Tutorial W3schools para HTML

Codecademy HTML & CSS curso de diseño web

Ejemplos de Personalización:

A continuación hay algunos ejemplos de personalizaciones de CSS. Deberá cambiar valores en la codificación para modificar lo qué se muestra. El color se puede cambiar utilizando un código HTML hexadecimal, vinculandolo a continuación con una herramienta de color HTML:

http://www.w3schools.com/colors/colors_picker.asp

Cualquier código que se inserte debe estar entre <style> corchetes como en el siguiente ejemplo:

Ejemplo:

<style>

.show_promo_code a {color:#999;}

</style>

Por favor tenga en cuenta que:

  • Los ejemplos que se indican a continuación son para su referencia y pueden requerir algunos ajustes adicionales para funcionar correctamente.
  • Asegúrese de copiar y pegar la totalidad de los códigos enumerados a continuación.
  • Para obtener ayuda adicional con modificaciones de codificación, por favor pongase en contacto con su diseñador web.
Quitar la columna "Precio desde"
/* Remove "Price From" column */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
Quitar calendario de disponibilidad
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
Quitar ambos la columna de niños y adultos del motor de reservas
/* Remove Children Column */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remove Adult Column  */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }
Quitar la opción de niños
/* Remove Children Column */

.room_types .children, .kids_block, .roomtype .col_kids, .total_child, .nb_kids, .book_child {
visibility: hidden !important;
}
.choose_room .room_types .custom-children {
visibility: hidden !important;
}
.tarife.kids_tarife {
display: none !important;
}
Añadir una imagen de fondo

Para añadir una imagen de fondo a la parte superior de la reservación del motor utilice este código:

/* Add Background Image */ 
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Change URL here */
.container2 {background: url("http://background.url/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}

Para mostrar la imagen de fondo en la página completa, use este código:

/* Add Background Image */ 
.container2 {background: transparent; }  /* Transparent Header */ 
.page-footer {background: transparent; } /* Transparent Footer */ 

/* Background to the full page */ 
.page-boxed {
background: url("http://background.url/file.jpg") !important;
background-position: center center;
background-attachment: fixed !important;
background-repeat: no-repeat;
background-size: cover;
background-color:#ffffff; 
}
.chooser, .property center {opacity: 1}
Cambiar el botón de disponibilidad
/* Change Availability Button */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
background: #ED1C24;
}
Cambiar la línea superior (Encabezado):
/* Change Header */
.page-header.navbar {
background-color: #000000;
}
Ocultar el nombre de la propiedad
/* Hide Property Name */
h1 {   
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
Cambiar todas las fuentes
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
font-family:'Open Sans', "Arial", sans-serif !important;
}
/* Calendar Icon - Don't Change or Remove */
i.fa
{
font: normal normal normal 14px/1 FontAwesome !important;
}

/* Hotel Name Font */

.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Cambiar el color de la sección código promocional
/* Promo Code Color */
.show_promo_code a {color:#999;} 

/* Promo Code Hover Color */
.show_promo_code a:hover {color:#777;}
Cambiar el botón Book Now
/* Change the Book Now Button */
.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
color: #fff;
background: #ED1C24;
}
Quitar el ícono de la cara triste

La cara triste se muestra cuando no hay disponibilidad para la fecha seleccionada en el calendario

.smile {display:none;}
Quitar la dirección o la sección del mapa:
/* Remove Address */ 
.map_info {display:none;} 

/* Remove Map */
#map_canvas {display:none;}  
Cambiar la línea de pasos de reservas
/* Booking Steps - Active Step Color */
.page-breadcrumb li.active a {
background: #12234E;
}

/* Arrow Color */
.page-breadcrumb li.active a:after {
border-left: 30px solid #12234E;
}

/* Inactive Step Color */

.breadcrumb a:after { 
background: #e3e3e3;
}
Cambiar el encabezado del calendario de disponibilidad
.ui-widget-header, .ui-datepicker-title, .one_month .ui-datepicker-header, .half_year .ui-datepicker-header, .half_year_popup .ui-datepicker-header, .one_month .ui-datepicker-header{ 
color: #fff;
background: #cfeef8;
border: 1px solid #e0a240;
}
Cambiar el menú desplegable del selector de habitaciones
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
Quitar las políticas de Check-in/Check-out
.checkin-checkout-terms-block{
display: none;
}
Quitar el máximo y el precio para x columnas junto con los títulos de otras columnas (Habitaciones, Adultos, Niños)
.box_names .price_for_nights,
.box_names .custom-max-guests,
.box_names .roomtype .custom-adults,
.rate-check { display: none; }
Altura completa del iframe (para ajustarse al 100% del contenido):
<iframe src="https://hotels.cloudbeds.com/reservation/HvaCsE?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="yourFrame"></iframe>

Este código debe agregarse en la parte inferior de la página de su sitio web:

<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>

 

Quitar el precio por huésped adicional
<style>
#wizard-container > div.choose_room > div.available_rooms > div.col-md-9.padding-left-0.col-sm-12.col-xs-12 > div.room_types > div > div.detailed > div.room_more > div > div {visibility: hidden !important;}
</style>
Cambiar el color del botón del "Comprobador de tarifas" para que coincida con el botón de
búsqueda
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Por favor, observe los ejemplos de las siguientes capturas de pantalla:

1 - Antes de añadir el código.

2 - Despues de aplicar el código. El comprobador de tarifas es igual al botón de búsqueda.

Añada su propia flecha al "Comprobador de tarifas"
<style>
.rate-check-arrow.arrow-left {
background-image: url(path to your image left) !important;
}
.rate-check-arrow.arrow-left {
background-image: url(path to your image right) !important;
}
</style>
Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk