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.

Configuració > 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:

W3schools HTML Tutorial

Codecademy HTML & CSS web design course

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:

  • 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;
}
Eliminar las columnas para 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; }
Eliminar 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 agregar una imagen de fondo al área principal del motor de reservas, use 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 en su lugar:

/* 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 !important;
background-color:#ffffff; 
}
.chooser, .property center {opacity: 1}

/* Add  Transparency */
.page-footer, .page-header.navbar {background: transparent; } /* Transparent Header & Footer */ 
.container1, .container2 {background-color: transparent;} /* Transparent Main Background */
Cambiar el botón de disponibilidad

'color' cambiará el color de la fuente para la palabra 'Buscar'; 'fondo' cambiará el color del botón

/* 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;
}

/* Change Availability Button color when clicking on it */
.btn-warning:active:hover {
background: blue;
}
El texto de "Disponibilidad" sobre el botón de búsqueda debe decir "Ver calendario de disponibilidad'

Necesitará añadir código a la sección "Pie de página personalizado para su reserva de hotel" en la página de personalización de Mybookings:

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>
Agregue texto personalizado debajo del botón "RESERVAR AHORA" (políticas, reglas, etc.)

Necesitará añadir código a la sección "Pie de página personalizado para su reserva de hotel" en la página de personalización de Mybookings:

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br/> YOUR CUSTOM TEXT';
NewEl.className += "text-right";
NewEl.style.fontSize = '12px';
NewEl.appendAfter( document.querySelector('.book_now'));
</script>
Cambiar la línea superior (Encabezado):
/* Change Header */
.page-header.navbar {
background-color: #000000;
}
Ocultar el nombre de la propeidad
/* 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;
}

¡Importante!

Si después de insertar este código y aplicar otra fuente a todas las etiquetas, no ve ningún ícono de flecha en el calendario (como en la captura de pantalla a continuación), quite la etiqueta <span> del código y guarde los cambios

Cambiar el color de la sección de promoción
/* Promo Code Color */
.show_promo_code a {color:#999;} 

/* Promo Code Hover Color */
.show_promo_code a:hover {color:#777;}
Cambiar el botón de Reservar Ahora
/* 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;
}
Eliminar 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;}
Eliminar la dirección y/o la sección del mapa:
/* Remove Address */ 
.map_info {display:none;} 

/* Remove Map */
#map_canvas {display:none;}  
Cambiar línea de pasos de reserva
/* 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 habitación
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
Eliminar las políticas de check-in/check-out
.checkin-checkout-terms-block{
display: none;
}
Quitar Máximo y 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 máxima 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 su sitio web:

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

 

Eliminar precios para ocupaciones adicionales
<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, verifique los ejemplos en la captura de pantalla a continuación:

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

2 - después de que el código fue aplicado. El botón del comprobador de tarifas es igual que el botón de búsqueda.

Agregue 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>
Ocultar widget 'reserva directamente con nosotros' en Mybookings
<style>
.acessa_float_left.acessa_float_description {
display: none;
}
</style>
Cambiar 'Adultos' a 'Adultos y niños + de 5 años'

Algunos hoteles venden alojamiento a niños a partir de una edad específica por el precio de un adulto. En este caso, el huésped debe reservar la cantidad correcta de adultos, incluidos los niños allí. El siguiente código ayudará a cambiar el nombre de la columna 'Adultos' a 'Adultos y niños mayores de 5 años'. Puede cambiar el texto o la edad a cualquier número.

Texto en Portugués

Agregue este código a la sección Metaetiquetas personalizadas:

<style>
.custom-adults.text-center:after{
  content: " e crianças + 5 anos";
}
.custom-children.text-center:after{
  content: " - 5 anos";
}
.col-sm-3.col-xs-3.custom-adults p:after{
 content: "  e crianças + 5 anos";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
 content: "  - 5 anos";
}
</style>

Agregue este código a la sección Etiquetas personalizadas (solo en la página de confirmación):

<style>
.book_child:after{
  content: " - 5 anos";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Texto en Inglés

Agregue este código a la sección Metaetiquetas personalizadas:

<style>
.custom-adults.text-center:after{
  content: " and children + 5 years old";
}
.custom-children.text-center:after{
  content: " - 5 years";
}
.col-sm-3.col-xs-3.custom-adults p:after{
 content: "  and children + 5 years old";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
 content: "  - 5 years";
}
</style>

Agregue este código a la sección Etiquetas personalizadas (solo en la página de confirmación):

<style>
.book_child:after{
  content: " - 5 years old";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Ocultar ciertos detalles de contacto (dirección, teléfono, correo electrónico) de los detalles de la propiedad en la página de reservas

Vaya a mybookings y desplácese hacia abajo a la sección de Información de la propiedad, los campos con detalles de contacto son básicamente una lista numérica en el lado de CSS.
En el siguiente ejemplo, 'Dirección' es el número de campo 1, 'Ciudad' es el número de campo 2 y así sucesivamente

Para ocultar un campo determinado, agregue el siguiente código, especificando el número de campo que desea ocultar después de la parte 'p: nth-child' entre paréntesis.
En el ejemplo debajo del 4to campo (Nombre de contacto) está oculto:

<style>
body > div.container2 > div > div.container.main-content > div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(4) {display:none; }
</style>
  • No olvides usar <style> antes de todo el código de personalización y agregar </ style> al final.
  • Prefieres agregar el código de apertura en la primera línea y el código de cierre al final de su personalización.
  • No es necesario que use múltiples <style> </ style>.
Change 'BOOK NOW' text inside button

Usted tendrá que añadir el código a la sección llamada "Pie de página personalizado de su página de reservas" en la página de personalización de Mybookings.

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>

Sugerencia: se puede cambiar el texto dentro de cualquier botón en la página de Mybookings usando el mismo código, reemplazando '.green.btn.disabled' con el nombre de diferentes clases.

Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk