Customização Mybookings - HTML e CSS Meta tags

Seguir
image

O mybookings oferece várias opções de personalização para quem está familiarizado ou não com HTML / CSS.

Você pode facilmente combinar com o estilo do seu website ou criar seu estilo exclusivo personalizando:

  • cabeçalho e rodapé
  • imagem de fundo
  • esquema de cores,
  • fontes,
  • adicionar texto e hiperlinks,
  • ocultar informações

Se você estiver planejando adicionar fundos/imagens, leia mais informações na seção de perguntas frequentes do tutorial: Motor de reservas mybookings - Visão Geral e Perguntas Frequentes

Essa funcionalidade está disponível para o plano Plus da Cloudbeds ou superior/equivalente.

Importante:

  • Este tutorial é fornecido como uma fonte de informações extra para as pessoas que já conhecem HTML e CSS. O código pode se tornar desatualizado e exigir alguma alteração. A nossa Equipe de Suporte pode auxiliá-lo APENAS no uso dos códigos que constam neste tutorial.
  • Os exemplos fornecidos abaixo são para referência e podem exigir alguma modificação para funcionarem corretamente.
  • A Cloudbeds não oferece assistência para o webdesign/desenvolvimento do site do seu hotel e nem para outra customização não contida neste tutorial.
  • Os códigos abaixo funcionam na versão para desktop do mybookings. É POSSÍVEL QUE NÃO FUNCIONEM NA VERSÃO MÓVEL.

Por onde começar

1. Na sua página do myfrontdesk, clique no ícone de Configurações > Customização do Mybookings

2. Insira o código do tipo de visualização do mybookings que você gostaria de usar: visualização expandida ou minimizada.

3. Insira os códigos de customização em seus respectivos lugares (Customização de Meta tags, Customização do cabeçalho da sua página de reservas, etc)

Os códigos CSS devem sempre ficar entre <style> e </style> como mostra o exemplo abaixo:

<style>

.show_promo_code a {color:#999;}

</style>
Jing

Códigos de customização para a Visualização Minimizada

Modificar Cores/fundos, botões

Para fundos/imagens customizados, leia mais informações na seção de Perguntas Frequentes desse tutorial:  Motor de reservas mybookings - Visão Geral e Perguntas Frequentes

Há uma função automática que ajuda você a mudar facilmente o seguinte:

  • Cor do fundo
  • Cor do cabeçalho
  • Setas de navegação
  • Botão de busca
  • Cor do botão geral

Leia Como usar o selecionador de cores para o mybookings para obter mais detalhes.

Mudar a cor do botão "Acomodações"
.roomtype .bootstrap-select.rooms_select .btn {
 background-color: #727B5F!important;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Ocultar / Remover elementos
Remover a coluna número máximo de pessoas
.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Remover a coluna "Preço por x noite(s)"
.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}
[Demo] White Elephant - Manchester, United Kingdom - Best Price Guarantee - Google Chrome
Remover as colunas "Adultos" e "Crianças"
/* Remover a coluna "Crianças" */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remover a coluna "Adultos  */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }
DEMO - Beach Life Testing - San Diego, Brazil - Best Price Guarantee - Google Chrome
Remover a opção de "Crianças"
/* Remover a opção "Crianças" */

.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;
}
DEMO - Beach Life Testing - San Diego, Brazil - Best Price Guarantee - Google Chrome
Remover a coluna "A partir de"
/* Remover a coluna "A partir de" */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Remover o texto "Apenas x restantes"
.only_left
{display:none;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Remover "Tarifa básica" e a opção de "preço de hóspede 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;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Remover o preço original tachado (para pacotes)
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Remover informações sobre pacotes promocionais

Esse código póde ser útil para propriedades que possuem muitos intervalos de promoções e hóspedes que utilizam o Código Promocional

.promo_info
{
display: none !important;
}.package_warning .alert-danger {
 font-size: 0;
}
.package_warning .alert-danger:after{
 content: "insert the needed text here";
 font-size: 12px;
 line-height: 1;
}
Slack | kb_requests | Cloudbeds | 39 new items
Slack | kb_requests | Cloudbeds | 39 new items
Ocultar o menu para selecionar o número de crianças para tipos de acomodações específicas

"00000" deve ser substituído pelo ID da acomodação, você pode encontrar esse número no seu navegador ou entre em contato com a equipe de suporte.

[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}
Ocultar o campo "Pessoas inclusas" (na janela pop-up da acomodação)
.room_types .stay tr:nth-child(2) {
  display: none;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir o texto padrão por um texto customizado

Nessa seção, você encontrará códigos que substituem o texto padrão do mybookings por um texto personalizado. Você não precisa necessariamente colocar o texto fornecido nos modelos do código - você pode inserir qualquer outro texto.

Por favor, note que o texto digitado será exibido:

- para todos os idiomas do mybookings (aqueles que estão disponíveis) - se o código for inserido na seção 'Meta Tags Personalizadas'

- para o idioma selecionado - se o código for inserido nas seções "Cabeçalho / rodapé de sua página de reservas'

Substituir "Adultos" por "Hóspedes" na seção de "Escolha uma acomodação"
  • Adicione o código no campo de "Customize aqui os meta tags de sua página de reservas";
  • A frase/palavra que substituirá o original - aparecerá para todos os 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: "Hóspedes"; 
  font-size: 12px;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir a palavra "Adultos" na seção "Selecionar acomodações"
  • Adicione o código no campo "Customize aqui os meta tags de sua página de reservas";
  • A frase/palavra que substituir a original será exibida para todos os idiomas
  • Esse código pode ser aplicado se você personalizou quartos individuais
<style>
.adults.custom-adults {
  font-size: 0!important;
}
.adults.custom-adults:after {
  content: "QUALQUER TEXTO";
  font-size: 12px;
}
</style>
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir o texto "Adultos" e "Crianças" por "Adultos e crianças +5 anos"/"Crianças - 5 anos"

Alguns hotéis vendem acomodações para crianças a partir de uma determinada idade pelo preço de um adulto. Nesse caso, o hóspede deverá realizar a reserva com o número correto de adultos, incluindo as crianças. O código abaixo altera o nome da coluna "Adultos" para "Adultos e crianças +5 anos". Você pode alterar o texto ou a idade para qualquer número.

Texto em inglês

Adicione o código no campo de "Customize aqui os meta tags de sua página de reservas":

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

Adicione esse código no campo "Meta Tags Personalizadas (apenas página de confirmação)":

<style>
.book_child:after{
  content: " - 5 years old";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Texto em português

Adicione esse código no campo "Customize aqui os meta tags de sua página de reservas":

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

Adicione esse código no campo "Meta Tags Personalizadas (apenas página de confirmação)":

<style>
.book_child:after{
  content: " - 5 anos";
}
.book_child.kids_column:after {
    content: "";
}
</style>
Substituir "Acomodações" ("Camas") por "Apartamentos" (ou outro texto)

Adicione esse código no campo "Customize aqui os meta tags de sua página de reservas".

A frase/palavra que substitui a original será exibida para todos os idiomas.

Para o cabeçalho da tabela
.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;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Dentro da tabela (acima da parte para selecionar o número de acomodações/camas)

Essa palavra aparecerá ao invés de camas (para dormitórios) / acomodações (quartos privativos)

.type_of_room {
 visibility:hidden;
}
.type_of_room:after{
 content: "Apartamentos";
 visibility:visible;
}
.custom-select-rooms .type_of_room {
   margin-left: -25px;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir "Tipo de quarto" por "Tipo de apartamento" (ou qualquer outro texto)

A palavra/frase que substituirá a original aparecerá para todos os idiomas.

.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Tipo de apartamento";
visibility:visible;
margin-left: -35px;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir "Preço por 1 noite(s)" por outro texto

Cole o código no campo "Customize aqui os meta tags de sua página de reservas"

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

div.price_for_nights.text-center > span::after {
content: "Preço por X dias";
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: "Preço por X dias";
font-size: 12px;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Substituir "Chegada" e "Partida" por outro texto
"Chegada" por outro texto
#rooms-search-form > div:nth-child(3) > div > label {
font-size: 0;
}

#rooms-search-form > div:nth-child(3) > div > label:after {
content: "Check-in";
font-size: 14px;
}
"Partida" por outro texto
#rooms-search-form > div:nth-child(4) > div > label {
font-size: 0;
}

#rooms-search-form > div:nth-child(4) > div > label:after {
content: "Check-out";
font-size: 14px;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Redimencionar fotos/elementos
Aumentar o tamanho das fotos das acomodações

Insira esse código no campo "Customize aqui os meta tags de sua página de reservas" da página de customização do mybookings e copie o código para todos os 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;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Aumentar a largura do botão de seleção do número de "hóspedes"

É possível controlar a largura do botão mudando o número de px no 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;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome

Código alternativo (com margem):

.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;
}

Códigos que podem ser usados para a Visualização Expandida e a Minimizada

Como fazer para que o hóspede possa clicar no nome do seu hotel no mybookings?

Caso você queira tornar o nome do seu hotel "clicável" para os hóspedes serem redirecionados de volta para o site, use os seguintes códigos:

Passo 1: Adicione esse código no campo "Customize o rodapé de sua página de reservas" substituindo a url do google com a sua:

<script type="text/javascript">
document.getElementsByClassName('hotel_name margin-left-160')[0].addEventListener('click', function(){ window.open('https://www.google.com', '_blank') });
</script>

Passo 2: adicione na seção "Customize aqui os meta tags de sua página de reservas":

body > div.page-header.page-header-wrap.navbar > div > h1{
cursor: pointer
}
Como fazer para que o hóspede possa clicar no logotipo do seu hotel no mybookings?

1. Adicione o seguinte código no campo Customize aqui os meta tags de sua página de reservas. Isso mudará o cursor do mouse para uma mão quando você passar o mouse por cima do logotipo.

.logo {
cursor: pointer;
}

2. Adicione o seguinte código no campo Customize o rodapé de sua página de reservas:

Substitua https://www.google.com por qualquer outra URL para a qual deseja redirecionar seus hóspedes. Esse código abrirá o site em uma NOVA janela do navegador

<script type="text/javascript">
document.getElementsByClassName('logo')
[0].addEventListener('click', function(){ 
window.open('https://www.google.com', 
'_blank') });
</script>
[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome

Se você quiser redirecionar os hóspedes ao site principal da sua propriedade, use o código a seguir.

Adicione o código no campo Customize o rodapé de sua página de reservas:

Substitua https://www.google.com por qualquer outra URL para a qual deseja redirecionar seus hóspedes. Esse código abrirá o site na MESMA janela do navegador.

<script>
document.getElementsByClassName('logo')
[0].addEventListener('click', function() 
{window.location.href = 
'https://www.google.com';});
</script>
Mudar estilo do texto (fonte, cor, tamanho)
Mudar todas as fontes
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;
}

/* Fonte do nome do hotel */

.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Importante!

Se, depois de inserir esse código e aplicar outra fonte, o ícone de seta desaparecer do seu calendário (como mostramos abaixo), remova a tag <span> do código e salve as mudanças.

Mudar a fonte e cor do nome do hotel
/* Fonte do nome do hotel */

.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar a fonte do botão "Buscar"
/* Mudar o botão buscar */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
} 
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar a fonte dos botões "RESERVAR AGORA" e "SELECIONAR ACOMODAÇÃO"

'color' - muda a cor da fonte da palavra "RESERVAR AGORA" e "Selecionar Acomodação";

'background' - muda a cor do botão

.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;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar o tamanho/estilo do texto que aparece quando não há disponibilidade

Adicione o código abaixo na seção "Customize o rodapé de sua página de reservas" e copie ele para todos os idiomas necessários:

.message_container 
{font-size: 16px;
color: #ff5722; 
font-weight: normal; /*font weight - normal, bold, light, etc...*/  
font-style: normal; /*font style - normal, italic*/}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar a fonte da descrição da propriedade
/*Título*/
.caption {
font-family: "Georgia";
}

/*Informações dentro da seção*/
.map_info {
font-family: "Courier New";
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar o tamanho e a cor da fonte das informações da propriedade
<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>
DEMO - Beach Life Testing - San Diego, Brazil - Best Price Guarantee - Google Chrome
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar a fonte do seletor de datas (ao selecionar as datas de chegada e partida)
/*mudar a fonte (Título do calendário)*/


/*mudar a fonte (Dias/datas do calendário)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mudar a fonte e a cor do preço da acomodação selecionada
.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}   
Mudar cor/fundo de elementos, botões

Para fundos/imagens customizados, leia mais informações na seção de Perguntas Frequentes desse tutorial:  Motor de reservas mybookings - Visão Geral e Perguntas Frequentes

Há uma função automática que ajuda você a mudar facilmente o seguinte:

  • Cor do fundo
  • Cor do cabeçalho
  • Setas de navegação
  • Botão de busca
  • Cor do botão geral

Leia Como usar o selecionador de cores para o mybookings para obter mais detalhes.

Adicionar imagem no plano de fundo

Para adicionar uma imagem de fundo na página principal do motor de reservas, use o código abaixo:

Por favor, note que você precisa ter a URL da imagem de fundo, que deve terminar com .jpg.

Caso você tenha uma imagem no seu computador, será necessário enviá-la para qualquer site de hospedagem de imagens ou para o Google Drive e, em seguida, obter a URL da imagem. Veja alungs exemplos:  https://www.codecademy.com/articles/host-images-on-dropbox

-adicionar plano de fundo + manter a linha do cabeçalho
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Mude a URL */
.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}
-adicionar plano de fundo+ remover a linha do cabeçalho

Para mostrar a imagem de fundo na página inteira, 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 */
Modificar a cor do plano de fundo do código promocional

Substitua o código da cor (#091b48) por qual preferir:

.rooms_book {
    background: #091b48;}
Modificar a cor da barra do código promocional no Mybookings

Você pode usar esse código para modificar a cor da barra do código promocional no Mybookings (substitua o número da cor pelo código da cor que você preferir)

#promo_code_input {
background-color: #efc0ff;
}
Modificar as cores dos botões das datas (ao selecionar a data de check-in e check-out)

background - modifica a cor do botão

color - modifica a cor da fonte

/*Modifica as datas selecionadas - check-in e check-out*/
.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;
}

/*Modifica o estilo das datas entre o check-in e check-out*/
.ui-datepicker .ui-state-range .ui-state-default {
    background: #49bbee;
	 color: #4b694c;
}
Modificar o fundo das datas disponíveis
/*Modifica o fundo das datas disponíveis*/
.legend.av {
    background: #ffcc00;
}
.half_year .ui-datepicker td, .half_year_popup .ui-datepicker td, .one_month .ui-datepicker td {
  background-color: #ffcc00;
}
Ocultar / Remover elementos
Remover a opção de trocar a moeda

Você pode utilizar o seguinte código para remover a opção de trocar a moeda

.last.dropdown {display:
none!important;
}
Remover as opções de trocar o idioma e a moeda

Você pode utilizar o seguinte código para remover a opção de trocar o idioma e a moeda:

#lang_currency_switchers { display:
none;
Remover o calendário de disponibilidade
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
Remover o endereço da propriedade e informações de contatos
/* Remove Address */ 
.map_info {display:none;} 
Remover mapa

Para mais instruções, leia esse tutorial: Como Substituir o mapa do mybookings pelo Google Maps.

/* Remove Map */ 
#map_canvas {display:none;}  
Remover políticas de check in e check out
.checkin-checkout-terms-block{
display: none;
}
Remover Políticas de Cancelamento
.checkin-checkout-terms-block, .property_info h5 {
display: none;
}
Remover a seção "Descrição"

Para esconder a seção "Descrição", insira o seguinte código na seção "Customização de Meta Tags":

.portlet.property_info>.portlet-title {
   display: none;
}.portlet.property_info>.portlet-body {
   display: none;
}
Remover a seção "Você tem um código promocional?"

Para esconder a seção "Você tem um código promocional?", insira o seguinte código na seção "Customização de Meta Tags":

.show_promo_code{
display: none;
}
Ocultar determinados detalhes para contatos (endereço, telefone, email)

Acesse a página do mybookings e role para baixo até a seção Descrição; os campos com detalhes de contato são basicamente uma lista numérica

No exemplo abaixo, 'Endereço' é o campo número 1, 'Cidade' é o campo número 2 e assim por diante

Para ocultar um determinado campo, adicione o seguinte código, especificando o número do campo que você deseja ocultar após a parte 'p: nth-child' entre parênteses.

No exemplo abaixo o campo 4 (Nome do contato) 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>
Remover a informação de cobrança de hóspede adicional da seção "Sua Reserva"

Insira o código na seção 'Código Javascript apenas página de confirmação'

Essa opção é recomendada para propriedade que possuem apenas dormitórios e não possuem quartos privados.

.reserve_total .row.total_adults, .reserve_total .row.total_child {
 display: none;
}
Ocultar a opção 'Aplicam-se Restrições'
<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>
Substituir o texto padrão por texto customizado

Nessa seção, você encontrará códigos que substituem o texto padrão do mybookings por um texto personalizado. Você não precisa necessariamente colocar o texto fornecido nos modelos do código - você pode inserir qualquer outro texto.

Por favor, note que o texto digitado será exibido:

- para todos os idiomas do mybookings (aqueles que estão disponíveis) - se o código for inserido na seção 'Meta Tags Personalizadas'

- para o idioma selecionado - se o código for inserido nas seções "Cabeçalho / rodapé de sua página de reservas'

Substituir o texto "Disponibilidade"  (acima do botão de busca) por "Visualizar calendário de disponibilidade"

Adicione este código na seção "Customize o rodapé de sua página de reservas" e repita o mesmo procedimento para todos os idiomas:

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'Visualizar calendário de disponibilidade';
</script>
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Modificar o texto do botão "Selecionar Acomodação"
button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "insira aqui seu texto";
}
Modificar o texto do botão 'RESERVAR AGORA'

Adicione este código na seção "Customize o rodapé de sua página de reservas" e repita o mesmo procedimento para todos os idiomas:

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insira aqui o seu texto';
</script>
Substituir "VOCÊ TEM UM CÓDIGO PROMOCIONAL?" por outro texto

Adicione o texto na seção de Meta Tags Personalizadas (ficará disponível para todos os idiomas)

.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"VOCÊ TEM UM CÓDIGO DE DESCONTO?";   
font-size: 13px; 
color: red;
}
Substituir o texto "ESCOLHA UMA ACOMODAÇÃO" por outro texto

Adicione o código abaixo para na seção 'Customize o rodapé de sua página de reservas'.
A frase/palavra que substituirá o original ficará disponível para todos os idiomas.

<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSIRA SEU TEXTO AQUI';
</script>
Substituir o texto na Forma de Pagamento
Mudar "Transferência Bancária" para outro texto:

Adicione o código a seguir no campo "Customize aqui os meta tags de sua página de reservas"

label[for=ebanking] > a {
font-size: 0;
}

label[for=ebanking] > a::after {
content: 'Pagamento em dinheiro no check-in';
font-size: 14px;
}
Confirmação - DEMO - Beach Life Testing - Google Chrome
Confirmação - DEMO - Beach Life Testing - Google Chrome
Mudar "Cartão de crédito" para outro texto
label[for=card] > a {
font-size: 0;
}

label[for=card] > a::after {
content: 'Cartão de crédito/débito';
font-size: 14px;
}
Confirmação - DEMO - Beach Life Testing - Google Chrome
Confirmação - DEMO - Beach Life Testing - Google Chrome
Mudar “PayPal” para outro texto
label[for=rPayPal] > a {
font-size: 0;
}

label[for=rPayPal] > a::after {
content: 'Pagar com cartão de crédito/débito via PayPal';
font-size: 14px;
}
Substituir o ícone padrão com ícones customizados
Substituir os ícones em "instalações"

Adicione o seguinte código no campo "Customize aqui os meta tags de sua página de reservas".

Sugerimos esse site para encontrar os códigos de ícones. Os números do código podem substituir o XXXX no conteúdo da linha do código: " \XXXX" (please keep the slash /)

<style>
.amenities_tab li::before, ul.amenities li::before{
content: " \XXXX ";
color: #3267B8;
}
</style>
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Redimensione fotos / elementos
Aumente o tamanho das fotos dos add-ons (itens adicionais)
@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;
}
Seletor de Datas e Calendário de Disponibilidade
Alterar fundo e borda calendário de disponibilidade
.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;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Alterar cor do seletor de data (check-in/check-out)

background - altera a cor do plano de fundo

color - altera a cor da fonte

/*Altera as datas selecionadas - check-in e check-out*/
.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;
}

/*Altera o estilo das datas entre o check-in e check-out*/
.ui-state-default {
background: #f2f7cc;
color: #4b694c;
}
Alterar a cor do triângulo que mostra restrições no calendário

Utilizamos a cor preta no exemplo - modifique o código #000000 para a cor que desejar

.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;}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Deixar a marcação taxada mais evidente no calendário de disponibilidade
/* Following code will apply a strike on the entire table cell for umavailable dates */
.calendar_table tbody>tr>td.unavailable:before {
  content: " ";
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #111;
  width: 100%;
}
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
DEMO - Beach Life Testing - San Diego, Brasil - Best Price Guarantee - Google Chrome
Mostrar calendário de disponibilidade assim que o usuário acessar a página do mybookings

Adicione esse código no campo "Customize o rodapé de sua 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

Os códigos abaixo do Comparador de Tarifas funcionam tanto para a Visualização Expandida quanto para a Minimizada

Abrir o comparador de tarifas imediatamente após carregar o mybookings

Adicione o seguinte código no campo Customize aqui os meta tags de sua página de reservas

<style>
.rate-check-arrow + .rate-check-container {
width: 284px;
display: block;
}.rate-check-arrow-text {
width: 0px;
padding-right: 0px;
display: none;
}
</style>
Modifique a cor do botão do Comparador de Tarifas para que ele fique igual ao botão de Buscar
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Por favor, verifique os exemplos abaixo:

1 - antes de adicionar o código

2 - após adicionar o código. A cor do botão do comparador de tarifas é a mesma do botão 'buscar'

Adicione sua própria seta no botão do 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>
Ocultar o Comparador de Tarifas
<style>
.rate-check {display:none !important;}
</style>
Ocultar 'Reserve Direto' no widget do mybookings
.acessa_float_left.acessa_float_description {
display: none;
}
Alterar o nome do Comparador de Tarifas
.rate-check-arrow-text {font-size: 0;  padding-right: 0;}
.rate-check-arrow-text::after {content: "Comparador de Preços";  font-size: 11px;  line-height: 1.25;}
Jing
Jing
Alterar o nome "Tarifa Direta"
.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:"Insira aqui o seu texto";
  font-size: 14px;
}
Jing
Jing
Ocultar os Canais no Comparador de Tarifas

Quando uma palavra precisa ficar oculta

#channel-Airbnb {display: none;} 

Quando duas palavras precisam ficam ocultas

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

Quando a Booking.com precisa ficar oculta

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

Quando o Airbnb (API) precisa ficar oculto

#channel-Airbnb\20 \28 API\29{display: none;}
Substituir o texto 'Saiba Mais" / 'Learn more' por outro texto no Comparador de Tarifas
button.rate-check-button.rate-check-learn-more {font-size: 0;}

/*mudar o conteúdo abaixo*/
button.rate-check-button.rate-check-learn-more::after {content: "Adicione o Texto Aqui";  font-size: 15px;}
Jing
Jing
Alterar o texto no Comparador de Tarifas ao clicar em 'Saiba Mais' / 'Learn More'
  • Inserir o código no campo "Customize o rodapé de sua página de reservas"
  • Esse código não precisa das tags <style></style>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, false);
</script>
Jing
Jing
Substituir o texto 'Os preços acima podem ou não incluir taxas" por um texto customizado
.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px;  content: 'INSERIR O TEXTO AQUI';}
Facebook
Resultado na pesquisa do Google

Você pode impedir que os resultados de busca do Google mostrem o link direto ao mybookings para exibir apenas o seu site.

Veja aqui a explicação do Google.

Widget
Alteração do visual do widget flutuante

Você pode copiar e colar esse código na página do seu website! Não adicione isso na "Customização do Mybookings"

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

/*Cor de fundo e cor de texto*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac;  color:#000;}
iframe

Leia esse tutorial para saber mais sobre como usar um iframe com o mybookings.

iframe com altura total (para ajustar 100% do conteúdo):

É importante que a parte do código que contém o link para a sua página do mybookings seja atualizada todas as vezes em que você copiar um código deste tutorial.

Adicione esse código no seu website entre o elemento <div> </div>:

<iframe src="SUA_URL_DO_MYBOOKINGS" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

Esse código deve ser adicionado na parte inferior/rodapé da página do seu website

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>
Esse artigo foi útil? Envie uma solicitação

Comentários

Powered by Zendesk