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 páginas web.

Resulta fácil dar a conocer su marca en su página web 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

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 en 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 la página web 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 CON LA VERSIÓN MÓVIL.

¿Dónde empezar?

1. Desde myfrontdesk, diríjase a Configuración → Motor de reservas → 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

Por favor, recuerde: 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: Introducción y Preguntas Frecuentes del Motor de Reservas de Mybookings.

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!

En caso de no ver 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 el pantallazo) - 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 cuartos'

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

'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 cuartos 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 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 registro y salida)
/*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 del cuarto seleccionado
.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: Introducción y Preguntas Frecuentes del Motor de Reservas de Mybookings.

Cómo añadir 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.

Si desea usar una imagen guardada en su PC, deberá cargarla a una página web 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 cambiar 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 el botón de BUSCAR

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

Cómo cambiar el color de los botones RESERVAR AHORA y SELECCIONAR CUARTOS

Si desea cambiar el estilo del botón RESERVAR AHORA y permite a sus huéspedes reservar tipos individuales de habitación (hay un botón junto al de tipo de cuarto que lee «SELECCIONE CUARTOS»), 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 «Cuartos»

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

Cómo cambiar la flecha de «Escoja un cuarto» 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 entrada y salida)

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 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 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
/* Remove Map */ 
#map_canvas {display:none;}  
Cómo eliminar las políticas de registro y salida
.checkin-checkout-terms-block{
display: none;
}
Cómo eliminar las políticas de cancelación
.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}
Cómo eliminar 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 ciertos tipos de cuartos

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 comunales.

.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 reemplazar el texto predeterminado con 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 acomodaciones»
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 acomodaciones 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 reemplazar «Cuartos» 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 cuartos)

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

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

Cómo reemplazar «Tipo de cuarto» por «Tipo de apartamento» (o cualquier otra tipo de acomodación)

La palabra o frase que emplee 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
<style>
@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;
}
}
</style>
Cómo aumentar el tamaño de las fotos del hotel

Por favor copie y pegue este código a 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 registro y salida)

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 del 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) {document.querySelector('.show_avail_calendar a').click(); }, 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 los siguientes pantallazos:

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 eliminar los canales del Comparador de tarifas

Si desea eliminar solo una palabra:

#channel-Airbnb {display: none;} 

Si desea eliminar dos palabras:

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

Si desea eliminar Booking.com:

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

Si desea eliminar 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
Altura del iframe (para incluir todo el contenido)

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