Cómo personalizar Mybookings - HTML y CSS MetaEtiquetas personalizadas

Seguir
image

Mybookings ofrece una serie de opciones de personalización para quienes se encuentran familiarizados con HTML y CSS o que contratan a un diseñador de portales de Internet.

Resulta fácil anunciar la marca existente de su portal de Internet o crear un estilo único al personalizar:

  • El encabezado y pie de página
  • El fondo
  • La paleta de colores
  • Las fuentes
  • El texto y los enlaces a otras páginas [también conocidos como «hipervínculos»]
  • Los elementos que se ven de manera predeterminada

Esta función requiere la suscripción al plan Plus o superior de Cloudbeds.

Importante:

  • Este artículo se publica como recurso de información adicional para quienes están familiarizados con HTML y CSS. Es posible que el código quede desactualizado y requiera de futuros cambios. Nuestro equipo de soporte estará contento de brindarle asistencia al emplear LOS CÓDIGOS INCLUIDOS en este artículo. POR FAVOR RECUERDE: Cloudbeds no ofrece asistencia en el desarrollo o diseño de los portales de Internet de hoteles ni en la personalización de códigos no incluidos en este artículo.
  • Los siguientes códigos fueron diseñados para la versión de PC de mybookings y PUEDE QUE NO FUNCIONEN EN LA VERSIÓN MÓVIL.

Empecemos

1. Desde myfrontdesk, diríjase a Configuración → Personalizar mybookings.

2. Copie y pegue el código de personalización en la casilla indicada (cómo Meta Tags personalizadas o Encabezamiento personalizado de su página de reservas).

Los códigos CSS deben escribirse entre brackets [o divisores] de <style> y </style>, como en el siguiente ejemplo:

<style>

.show_promo_code a {color:#999;}

</style>

Códigos de personalización

Cabe recordar que los siguientes ejemplos son a modo de referencia y pueden requerir modificaciones para funcionar debidamente.

Para mayor información sobre añadir o personalizar imágenes y pantallas de fondo, diríjase a la sección de preguntas frecuentes de este artículo: Motor de reservas Mybookings, generalidades y preguntas frecuentes.

Cómo cambiar el estilo del texto (fuente, color y tamaño)
Cómo 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 no se ve el ícono de flecha luego de insertar el código y de usar otra fuente en todas las etiquetas [o tags] (tal como se ve en la captura de pantalla), elimine el tag ˂span˃ del código y guarde los cambios.

Cómo cambiar la fuente y el color del nombre del hotel
/* Hotel Name Font */

.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Cómo cambiar el aspecto del botón BUSCAR

'color' - cambia el color de la fuente de la palabra 'Buscar'

'background' [fondo] - cambia el color del botón

/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
Cómo cambiar la fuente de los botones 'Reservar ahora' y 'Seleccionar habitaciones'

'color' - cambia el color de la fuente de las palabras 'Reservar ahora' y 'Seleccionar habitaciones'

'background' - cambia el color del botón

.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
background:#da1176!important;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
}
Cómo cambiar el tamaño y estilo del texto cuando no quedan habitaciones disponibles

Copie y pegue el siguiente código en la casilla «Pie de página personalizado de su página de reservas» y copíelo a los idiomas requeridos:

.message_container 
{font-size: 16px;
color: #ff5722; 
font-weight: normal; /*font weight - normal, bold, light, etc...*/  
font-style: normal; /*font style - normal, italic*/}
Cómo cambiar el estilo de la fuente de la información de la propiedad
/*Header*/
.caption {
font-family: "Georgia";
}

/*Info inside section*/
.map_info {
font-family: "Courier New";
}
Cómo cambiar la fuente al seleccionar fechas (de check-in y check-out)
/*change font (Calendar title)*/


/*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
Cómo cambiar la fuente y el color del precio de la habitación seleccionada
.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}   
Cómo cambiar el color y el fondo de elementos y botones

Para mayor información sobre añadir o personalizar imágenes y pantallas de fondo, diríjase a la sección de preguntas frecuentes de este artículo: Motor de reservas Mybookings, generalidades y preguntas más frecuentes.

Cómo agregar una imagen de fondo

Para agregar una imagen de fondo a la sección principal del motor de reservas, copie y pegue el siguiente código:

Por favor recuerde que necesitará el URL [dirección en Internet] de la imagen de fondo y que deberá terminar en .jpg.

Para usar una imagen guardada en su PC, deberá cargarla a un portal de Internet de alojamiento de imágenes o a Google Drive y usar el URL que indique allí. El siguiente enlace es un ejemplo: https://www.codecademy.com/articles/host-images-on-dropbox

Cómo agregar la imagen de fondo sin cambiar el encabezado
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Change URL here */
.container2 {background: url("http://addbackgroundurlhere.com/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}
Cómo agregar la imagen de fondo y eliminar el encabezado

Si desea que la imagen de fondo cubra toda la página, use este código:

/* Background to the full page */ 
.page-boxed {
background: url("http://addbackgroundurlhere.com/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 */
Cómo cambiar el color de fondo del portal mybookings
.container1, .container2 {
    background-color: #fda2b4;
}
Cómo cambiar el color del encabezado
.page-header.navbar {
    background-color: #6bbeb6;
}
Cómo cambiar la barra de BUSCAR

.check_availability_group .btn {
background-color: #727B5F!important;
}

Cómo cambiar el color de fondo de la sección de código de promoción
.rooms_book {
    background: #091b48;}
Cómo cambiar el color de la barra de búsqueda de códigos promocionales en Mybookings

Use el siguiente código para cambiar el color de la barra de búsqueda de códigos promocionales en Mybookings (cambie el color #).

#promo_code_input {
background-color: #efc0ff;
}
Cómo cambiar el color de los botones RESERVAR AHORA y SELECCIONAR HABITACIONES

Si desea cambiar el estilo del botón RESERVAR AHORA y permite a sus huéspedes reservar categorías individuales de habitación (hay un botón junto al de categoría de habitación que lee «SELECCIONAR HABITACIONES»), el siguiente código cambiará ambos botones.

Color - cambia el color de la fuente.

Fondo - cambia el color del botón.

.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
    color: #fff;
    background: #ac59b1;}
Cómo cambiar el color del botón «Habitaciones»

.roomtype .bootstrap-select.rooms_select .btn {
background-color: #727B5F!important;
}

Cómo cambiar la flecha de «Seleccionar habitación» y «Fecha de salida»
/*Change active section color*/
.page-breadcrumb li.active>span {
    background: #f13e64;
}

/*Change inactive section color*/
.page-breadcrumb li.active>span:after {
    border-left: 30px solid #f13e64;
}

/*Change small arrow in the middle color on CHOOSE A ROOM step*/
.page-breadcrumb li>span {
       background: #fbe3e3;
}

/*Change small arrow in the middle color on CHECKOUT step*/
.page-breadcrumb li>span:after {
       border-left: 30px solid #fbe3e3;
Cómo cambiar los colores de selección de fechas (de check-in y check-out)

Fondo - cambia el color de fondo

Color - cambia el color de la fuente

/*Changes highlighted dates - checkin and checkout*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout, 
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;  
color: #ecfd02;
}

/*Changes dates style between checkin and checkout*/
.ui-datepicker .ui-state-range .ui-state-default {
    background: #49bbee;
	 color: #4b694c;
}
Cómo cambiar el fondo de fechas disponibles en datepicker [selector de fechas]
/*Changes background of available dates*/
.legend.av {
    background: #ffcc00;
}
.half_year .ui-datepicker td, .half_year_popup .ui-datepicker td, .one_month .ui-datepicker td {
  background-color: #ffcc00;
}
Cómo esconder o eliminar elementos
Cómo eliminar el cambio de divisas

Use el siguiente código para eliminar el botón de divisas.

.last.dropdown {display:
none!important;
}
Cómo eliminar el cambio de idioma y divisas

Use el siguiente código para eliminar el cambio de idioma y de divisas.

#lang_currency_switchers { display:
none;
Cómo eliminar la columna de Capacidad del motor de reservas
.custom-max-guests, .max_people {
display:none;
visibility: hidden !important;
} 
Cómo eliminar las columnas 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; }
Cómo 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;
}
Cómo eliminar la columna de «Precio desde»
/* Remove "Price From" column */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
Cómo eliminar el calendario de disponibilidad
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
Cómo eliminar la dirección y el contacto de la propiedad
/* Remove Address */ 
.map_info {display:none;} 
Cómo eliminar el menú desplegable de «Tasa en línea» y «Precio por huésped adicional»
#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;}
Cómo eliminar la línea de tachado de mejor valor (de los paquetes promocionales)
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
Cómo eliminar el mapa

Para más información sobre las opciones del mapa, véase: Cómo cambiar el mapa de mybookings por Google Maps.

/* Remove Map */ 
#map_canvas {display:none;}  
Cómo eliminar las políticas de check-in y check-out
.checkin-checkout-terms-block{
display: none;
}
Cómo eliminar los términos de cancelación
.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}
Cómo eliminar la sección «Información de la propiedad»

Para eliminar la sección «Información de la propiedad», inserte el siguiente código HTML en la casilla «Meta Tags Personalizadas».

.portlet.property_info>.portlet-title {
   display: none;
}.portlet.property_info>.portlet-body {
   display: none;
}
Cómo eliminar la sección «¿Tienes un código promocional?»

Para eliminar la sección «¿Tienes un código promocional?», ingrese el siguiente código HTML en la casilla «Meta Tags Personalizadas»:

.show_promo_code{
display: none;
}
Cómo eliminar ciertos elementos de contacto (nombre, dirección, número de teléfono y correo electrónico)

Diríjase a mybookings y busque la sección Información de la Propiedad. Las casillas con información de contacto son básicamente una lista numérica de CSS.
En el siguiente ejemplo, «Dirección» es la casilla número 1, «Ciudad» es la casilla número 2 y así en más.

Para eliminar casillas específicas, copie y pegue el siguiente código y especifique la cantidad de casillas que desea eliminar luego de la sección 'p:nth-child' en los brackets.
En el siguiente ejemplo, se ha eliminado la cuarta casilla (Nombre de contacto).

<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>
Cómo eliminar la selección de cantidad de niños para ciertas categorías de habitación

En el siguiente código, «00000» es la identificación del cuarto en myfrontdesk. Puede encontrarla empleando la consola de desarrollo [dev console] de su navegador o solicitándola a nuestro Equipo de Soporte.

[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}
Cómo eliminar el cargo adicional por persona en la sección «Su Reserva»

Ingrese el código a la sección «Sólo confirmación».

Es una opción recomendada para propiedades que sólo tienen dormitorios compartidos.

.reserve_total .row.total_adults, .reserve_total .row.total_child {
 display: none;
}
Cómo eliminar la opción «Aplican restricciones»
<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>
Cómo cambiar el texto predeterminado por texto personalizado

En esta sección se encuentran los códigos que reemplazan el texto predeterminado de mybookings por texto personalizado. No es necesario agregar el texto que lee en las plantillas de este artículo, sino que puede ingresar el texto que prefiera.

Por favor recuerde que el texto ingresado se verá:

- En todos los idiomas de mybookings (que estén disponibles), siempre que el código se ingrese a la sección «Meta Tags Personalizadas».
- Sólo en el idioma seleccionado si el código se ingresó a la sección «Encabezado y pie de página personalizado para la página de reservas de su hotel».

Cómo reemplazar el texto «Disponibilidad» (encima del botón de búsqueda) con «Ver Calendario de Disponibilidad»

Copie y pegue este código a «Pie de página personalizado de su página de reservas» y duplíquelo a los demás idiomas.

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>
Cómo cambiar el texto del botón «Seleccionar alojamiento»
button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "text";
}
Cómo cambiar el texto del botón «RESERVAR AHORA»

Copie y pegue este código a «Pie de página personalizado de su página de reservas» y duplíquelo a los demás idiomas.

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>
Cómo cambiar «Adultos» por «Huéspedes»
  • Copie y pegue el código en la casilla «Meta Tags Personalizadas».
  • La palabra o frase que use para reemplazar el texto original se publicará en todos los idiomas.
.custom-adults.text-center {
  font-size: 0!important;
}
.custom-adults.text-center:after {
  content: "Guests";
  font-size: 12px;
}
Cómo reemplazar «Adultos» y «Menores» con «Adultos y niños mayores de cinco años» y «Niños menores de cinco años»

Ciertos hoteles ofrecen alojamientos para niños desde cierta edad por el precio estándar. En este caso, el huésped debe reservar habitaciones o camas para todos los adultos, incluyendo niños mayores a la edad indicada. El código permite cambiar la columna de «Adultos» a «Adultos y niños mayores de cinco años». Se puede cambiar el texto o la edad a cualquier otro número.

El texto en INGLÉS [EN]

Copie y pegue este código a la casilla Meta Tags 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>

Copie y pegue este código a la casilla Metaetiquetas personalizadas (sólo página de confirmación):

<style>
.book_child:after{
  content: " - 5 years old";
}
.book_child.kids_column:after {
    content: "";
}
</style>
El texto en PORTUGUÉS

Copie y pegue este código a la casilla Meta Tags 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>

Copie y pegue este código a la casilla Metaetiquetas personalizadas (sólo página de confirmación):

<style>
.book_child:after{
  content: " - 5 anos";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Cómo cambiar «¿Tienes un código de descuento?» por otro texto

Copie y pegue este código en la sección «Meta Tags Personalizadas» (será igual en todos los idiomas):

.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}
Cómo reemplazar el texto «Mueva el ratón sobre el precio…» con otro texto

Copie y pegue este código en la sección «Meta Tags Personalizadas (será igual en todos los idiomas):

.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px;  content: 'YOUR TEXT HERE';}
 
Cómo cambiar el texto «Seleccione una habitación» por texto personalizado

Ingrese el siguiente código en la sección «Pie de página personalizado de su página de reservas».
La palabra o frase que use sustituirá el texto original y se verá en todos los idiomas.

<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSERT TEXT';
</script>

Cómo cambiar «Habitaciones» (o «Camas») por «Apartamentos» (o cualquier otro tipo de acomodación)

Copie y pegue el código en la sección «Meta Tags Personalizadas».

La palabra o frase que emplee se leerá en todos los idiomas.

Para el encabezado de la tabla

.choose_room .roomtype .custom-select-rooms.text-center {
 font-size: 0;
}
.choose_room .roomtype .custom-select-rooms.text-center:after{
 content: "Accommodation";
 font-size: 12px;
 line-height: 1;
}

Para el cuerpo de la tabla (encima del seleccionador #de habitaciones o camas)

El término que use se leerá tanto en «camas» (dormitorios) como en «habitaciones» (habitaciones privadas).

.type_of_room {
 visibility:hidden;
}
.type_of_room:after{
 content: "Accommodation";
 visibility:visible;
}
.custom-select-rooms .type_of_room {
   margin-top: -27px;
}

Cómo cambiar «Categoría de habitación» por «Categoría de apartamento» (o cualquier otro alojamiento)

La palabra o frase que seleccione se leerá en todos los idiomas.

.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}
Cómo cambiar el tamaño de las fotos o de los elementos
Cómo aumentar el tamaño de las fotos agregadas
@media screen and (min-width: 992px) {
.about .col-md-4 {
  min-width: auto;
  width: 40%;
}
.about .col-md-8 {
  width: 60%;
}
.about .img {
  width: 100%;
  height: auto;
  padding-top: 50%;
}
.room_services .img div {
  top: 0;
  position: absolute;
}
}
Cómo aumentar el tamaño de las fotos del hotel

Copie y pegue este código en la casilla «Encabezamiento personalizado» de la sección «Personalizar mybookings», y cópielo para los demás idiomas:

.available_rooms .roomtype .first_container {padding-left: 0;}
.available_rooms .room_image {  top: 0;  padding: 0;}
.available_rooms .col-md-9 div.image_container {  width: 100%;  height: auto;  margin: 0;  padding-bottom: 70%;  position: relative;}
.image_container div, .image_container a{  position: absolute;}
.room_image img.bigger {  margin: 0;  position: absolute;  right: 0;  bottom: 0;}
Cómo aumentar el tamaño del botón de selección de «Huéspedes»

Se puede modificar el ancho del botón cambiando el número de px en el elemento [.choose_room .roomtype .adults.custom-adults button.btn { max-width: 80px; ]

.choose_room .room_types .custom-children {
 display: none;
}
.choose_room .roomtype .adults.custom-adults {
 width: 20%;
}
.available_rooms .roomtype .adults .adults_select {
 width: 100% !important;
}
.choose_room .roomtype .adults.custom-adults button.btn {
 max-width: 80px;
}

Código alternativo (con bordes):

.room {
     padding-bottom: 25px;
   padding-top: 25px;
}

.image_container>a {
     height: 150%;
   width: 150%;
   margin-top: -40px;
}

.padding-right-0 {
   padding-left: 40px;
}

.room_image img.bigger {
   margin: 82px 0 0 122px;
}
Seleccionador de fechas y calendario de disponibilidad
Cómo cambiar el color del fondo y del borde del calendario mensual 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;}
Cómo cambiar los colores del seleccionador de fechas (de check-in y check-out)

Fondo: cambia el color del fondo.

Color: cambia el color de la fuente.

/*Changes highlighted dates - checkin and checkout*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout, 
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;  
color: #ecfd02;
}

/*Changes dates style between checkin and checkout*/
.ui-state-default {
background: #f2f7cc;
color: #4b694c;
}
Cómo cambiar el color del triángulo de restricción en el calendario de disponibilidad

Vamos a usar el color negro como ejemplo. Cambie el número #000000 al color que desee.

.pink {position: relative; }

.pink:after {content: ""; position: absolute; border: 4px solid #000000; top: 0; right: 0; border-left: 4px solid transparent; border-bottom: 4px solid transparent;}
Cómo mostrar el calendario de disponibilidad luego de que el usuario acceda a mybookings

Copie y pegue el siguiente código a la casilla «Pie de página personalizado de su página de reservas».

<script type="text/javascript">
window.addEventListener("load", function(event) {
  setTimeout(function() {
      document.querySelector('.show_avail_calendar a').click();
  }, 1000);
}, false);
</script>
Comparador de tarifas
Cómo cambiar el color del botón «Comparar tarifas» para que sea igual al botón de búsqueda
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Por favor repase los ejemplos en las siguientes capturas de pantalla:

1. Antes de copiar y pegar el código.

2. Luego de copiar y pegar el código. El botón de comparar tarifas es ahora igual al botón de búsqueda.

Cómo agregar una flecha al Comparador 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>
Cómo esconder el Comparador de tarifas
<style>
.rate-check {display:none !important;}
</style>
Cómo esconder el widget «Reserve directamente con nosotros» de Mybookings
.acessa_float_left.acessa_float_description {
display: none;
}
Cómo cambiar el nombre del Comparador de tarifas
.rate-check-arrow-text {font-size: 0;  padding-right: 0;}
.rate-check-arrow-text::after {content: "Price Comparison";  font-size: 11px;  line-height: 1.25;}
Cómo cambiar el nombre de «Tarifa directa»
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name {
  font-size: 0;
}
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name:before {
  content:"Desired text here";
  font-size: 14px;
}
Cómo esconder los canales del Comparador de tarifas

Si desea esconder solo una palabra:

#channel-Airbnb {display: none;} 

Si desea esconder dos palabras:

#channel-Hotel\ Bonanza {display: none;} 

Si desea esconder Booking.com:

#channel-Booking\2e com {display: none;}

Si desea esconder Airbnb (API):

#channel-Airbnb\20 \28 API\29{display: none;}
Cómo cambiar el texto «Más información» del Comparador de tarifas
button.rate-check-button.rate-check-learn-more {font-size: 0;}

/*change text content below*/
button.rate-check-button.rate-check-learn-more::after {content: "Text go here";  font-size: 15px;}
Cómo cambiar el texto del Comparador de tarifas al pinchar en «Más información»

Copie y pegue el siguiente código a la casilla «Pie de página personalizado de su página de reservas» y cópielo a los demás idiomas:

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, false);
</script>
Cómo cambiar el texto «Los precios pueden no incluir impuestos»
.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px;  content: 'YOUR TEXT HERE';}
Facebook
Widget
Cómo cambiar la imagen del widget del encabezado

¡El siguiente código se debe copiar y pegar a su página web! No lo use en las casillas de «Personalizar mybookings»:

/*change text*/
.acessa_float_left.acessa_float_description {font-size:0;}
.acessa_float_left.acessa_float_description:after {content: "text here";  font-size:14px;}

/*Background color and text color*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac;  color:#000;}
iframe

Para más información sobre el uso de un iframe en mybookings, véase: Cómo usar un iframe en mybookings.

Altura del iframe (para incluir todo el contenido)

Por favor recuerde que la sección del código que incluye un enlace a su portal de mybookings debe actualizarse cada vez que copie o use un código de este artículo.

Copie y pegue este código a su portal de Internet:

<iframe src="https://hotels.cloudbeds.com/reservation/HvaCsE?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="yourFrame"></iframe>

 

Copie y pegue este código al pie de página de su portal de Internet:

<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>
Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk