Cómo personalizar mybookings - Metaetiquetas de HTML y CSS

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

Si desea agregar fondos o imágenes personalizadas, le recomendamos consultar la sección de preguntas frecuentes de este artículo: Descripción y preguntas frecuentes del motor de reservas mybookings.

Esta función requiere la suscripción al plan Plus de Cloudbeds, o bien, uno equivalente o superior a este.

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.
  • Los ejemplos que se presentan a continuación son de referencia y es posible que requieran algunas modificaciones para funcionar correctamente.
  • 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. Ingrese el código a la categoría de diseño de Mybookings que usa: el diseño de lista o de galería.

3. Copie y pegue el código de personalización en la casilla indicada (puede ser la primera casilla, la casilla de Metaetiquetas personalizadas o la de 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 para el diseño de lista

Cómo cambiar el color y el fondo de los elementos y botones

Si desea utilizar fondos o imágenes personalizadas, consulte la sección de preguntas frecuentes de este artículo: Descripción y preguntas frecuentes del motor de reservas mybookings.

Hay una función de personalización automatizada que lo ayudará a cambiar fácilmente lo siguiente:

  • Color de fondo
  • Color del encabezado
  • Flechas de navegación
  • Botón de búsqueda
  • Color del botón

Para más información, consulte el artículo Cómo usar la selección de colores de Mybookings.

Cómo cambiar el color del botón correspondiente a las habitaciones
.roomtype .bootstrap-select.rooms_select .btn {
 background-color: #727B5F!important;
}
Cómo ocultar / eliminar elementos
Cómo eliminar la columna que indica la cantidad máxima de personas
.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}
Cómo eliminar las columnas de niños y adultos
/* Eliminar la columna de niños */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Eliminar la columna de adultos  */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }
Cómo eliminar la columna «precio por x noche(s)»
.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}
Cómo eliminar la opción de agregar niños
/* Eliminar la columna de niños */

.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 «Desde» para los precios
/* Eliminar la columna «Desde» */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
Cómo eliminar la lista desplegable que muestra la tarifa en línea y el 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 tarifa base tachada (para los paquetes)
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
Cómo eliminar la información sobre los paquetes promocionales

Este código puede ser útil para propiedades que tienen muchos intervalos en la promoción y en las que el huésped es quien aplica el código promocional.

.promo_info
{
display: none !important;
}.package_warning .alert-danger {
 font-size: 0;
}
.package_warning .alert-danger:after{
 content: "INGRESE SU TEXTO AQUI";
 font-size: 12px;
 line-height: 1;
}
Slack | kb_requests | Cloudbeds | 39 new items
Slack | kb_requests | Cloudbeds | 39 new items
Cómo ocultar selector para el número de niños para categorías de habitación específicas

00000 representa el número de identificación de su habitación en myfrontdesk. Podrá ver este número en la barra de su navegador al ingresar a la configuración de dicha categoría de habitación o también puede solicitarlo 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 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 en el primer recuadro disponible para Metaetiquetas 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 cambiar la palabra «Adultos» por «Huéspedes» en la sección llamada «Seleccionar acomodaciones»
  • Copie y pegue el código en la casilla «Metaetiquetas 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: "Huéspedes";
  font-size: 12px;
}
Cómo cambiar la palabra «Adultos» en la sección llamada «Seleccionar acomodaciones»
  • Copie y pegue el código en la la primera casilla.
  • La palabra o frase que use para reemplazar el texto original se publicará en todos los idiomas.
  • Esto aplicará si usted tiene habitaciones individuales.
<style>
.adults.custom-adults {
  font-size: 0!important;
}
.adults.custom-adults:after {
  content: "CUALQUIER TEXTO";
  font-size: 12px;
}
</style>
Cómo reemplazar «Adultos» y «Niños» 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 en la primera casilla de para 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>

Copie y pegue este código a la casilla llamada «Metaetiquetas personalizadas (sólo para la 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 [PT]

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

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

<style>
.book_child:after{
  content: " - 5 anos";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Cómo reemplazar el texto «Mueva el mouse sobre el precio…» con otro texto

Copie y pegue este código en la sección «Metaetiquetas 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: 'SU TEXTO AQUÍ';}
Cómo cambiar «Habitaciones» (o «Camas») por «Apartamentos» (o cualquier otro tipo de alojamiento)

Copie y pegue el código en la primera sección para Metaetiquetas 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: "Apartamentos";
 font-size: 12px;
 line-height: 1;
}
Para el cuerpo de la tabla (encima del seleccionador del # de habitaciones o camas)

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

.type_of_room {
 visibility:hidden;
}
.type_of_room:after{
 content: "Apartamentos";
 visibility:visible;
}
.custom-select-rooms .type_of_room {
   margin-left: -25px;
}
Cómo cambiar «Tipo de habitación» por «Tipo 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: "Tipo de apartamento";
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

Coloque este código en la primera sección para Metaetiquetas personalizadas en la página «Configuración de mybookings». Copie el código para todos los idiomas.

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

Puede cambiar el ancho modificando el número de píxeles 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;
}
Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk