Cómo personalizar mybookings - Metaetiquetas de HTML y CSS

Seguir

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 sitios web.

Resulta fácil anunciar la marca existente de su sitio 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

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 ordenador (computador) 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 use: 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

Si anteriormente estaba utilizando el diseño de galería, asegúrese de desactivar el diseño de galería para así poder utilizar el diseño de lista.

1. Haga clic en «Configuración» (el ícono de engranaje).
2. Ingrese a «Configuración de mybookings».
3. Desmarque la casilla «Usar el diseño de galería».
4. Haga clic en «Guardar».

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

Si desea utilizar fondos o imágenes personalizadas, véase la sección de preguntas frecuentes en: Descripción y preguntas frecuentes del motor de reservas mybookings.

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

  • El color de fondo
  • El color del encabezado
  • Las flechas de navegación
  • El botón de búsqueda
  • El color del botón

Para más información, véase: 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 o eliminar elementos
Cómo eliminar la columna de 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 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 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 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 el selector del número de niños en 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 «Adultos» por «Huéspedes» en la sección «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,.col-sm-3.col-xs-3.custom-adults {
  font-size: 0!important;
}.custom-adults.text-center:after,.col-sm-3.col-xs-3.custom-adults:before{
  
content: "Guests"; 
  font-size: 12px;
}

 

Cómo cambiar «Adultos» en la sección «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.
  • Aplica si tiene Habitaciones personalizadas individuales.
.custom-adults.text-center,.col-sm-3.col-xs-3.custom-adults {
  font-size: 0!important;
}.custom-adults.text-center:after,.col-sm-3.col-xs-3.custom-adults:before{
  
content: "Huéspedes"; 
  font-size: 12px;
}

 

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 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 en 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: " y niños + 5 años";
}
.custom-children.text-center:after{
  content: " - 5 años";
}
.col-sm-3.col-xs-3.custom-adults p:after{
 content: "  y niños + 5 anos";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
 content: "  - 5 años";
}
</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 años";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Cómo reemplazar el texto «Mueva el mouse sobre el precio…» por 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 de 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 texto «Precio 1 noche(s)» por cualquier otro texto

Pegue el siguiente código en la sección Metaetiquetas personalizadas.

div.price_for_nights.text-center > span {
font-size: 0;
}

div.price_for_nights.text-center > span::after {
content: "Por día";
font-size: 12px;
}

div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1) {
font-size: 0;
}

div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1):after {
content: "Por día";
font-size: 12px;
}
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Cómo cambiar «Check-In» y «Check-out» por texto personalizado
Cómo cambiar el texto «Llegada»
#rooms-search-form > div:nth-child(3) > div > label {
font-size: 0;
}

#rooms-search-form > div:nth-child(3) > div > label:after {
content: "Hola";
font-size: 14px;
}
Cómo cambiar el texto «Salida»
#rooms-search-form > div:nth-child(4) > div > label {
font-size: 0;
}

#rooms-search-form > div:nth-child(4) > div > label:after {
content: "Adiós";
font-size: 14px;
}
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Cómo cambiar el tamaño de las fotos o de los elementos
Cómo aumentar el tamaño de las fotos agregadas

Agregue este código a la primera sección de Metaetiquetas personalizadas en el menú desplegable 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;
}
Tecnología de Zendesk