Customização Mybookings - HTML e CSS Meta tags

Seguir

Mybookings oferece um grande numero de opções de customização mais a fundo para aqueles que estão familizarizados com HTML/CSS ou emprega web-designer. Para iniciar a sua personalização, siga os passos abaixo.

Botão de engrenagem>> Motor de Reservas >> Customização do mybookings

Você pode usar a caixa de meta tags na seção "customziação do mybooking" para adicionar javascript, CSS e HTML para refletir em seu site. Por favor, não insira texto normal / simples lá, isso poderá quebrar a página.

O Cloudbeds não fornece suporte para solução de problemas do seu site, mas nós oferecemos alguma opções muito fáceis de cópia e cola para que você pode usar no seu motor de reservas.

Se você tiver interesse em aprender mais sobre HTML e CSS em geral, aqui estão algumas sugestões de ótimos lugares para começar

 

Exemplos de Customização:

Abaixo estão alguns exemplos de CSS personalizado para você utilizar em sua página. Você vai precisar deles para alterar os valores na codificação da sua página afim de modificar o que é exibido. A cor pode ser alterada por meio de um código HTML, abaixo há uma ferramenta de cor HTML que vai te ajudar, basta escolher a cor e copiar o código HTML que a ferramenta vai gerar:

Ao iniciar a inserção de códigos na área de customização, qualquer código que você inserir deve estar entre <style> no início e </style> no final, como no exemplo abaixo:

Exemplo:

<style>

.show_promo_code a {color:#999;}

</style>

Observações: 

  • Os exemplos fornecidos abaixo são para referência e pode exigir alguma modificação adicional para funcionar corretamente.
  • Certifique-se de copiar e colar os comprimentos completos de código listados abaixo.
  • Para obter ajuda adicional com a modificação codificação contacte o seu web-designer.

 

Lembre-se: 

Certifique-se de iniciar com <style> e terminar com </style>. Estes, provavelmente, só precisarão ser incluídos uma vez:

 

Remover a frase "preço a partir de"

<style>

.only_left

{display:none;}

.starting_at{visibility:hidden;}

.mobile .starting_at{display: none;}

</style>

Remover a frase "preço a partir de"

Remover a palavra "disponibilidade"

<style>

.show_avail_calendar {

visibility: hidden !important;

}

.availability_calendar_container {

display: none !important;

}

</style>

Remover as as colunas de "adultos e crianças"

<style>

.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,

.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children

{ visibility: hidden !important; }

</style>

Remover a coluna de "crianças"

<style>

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

}

</style>

Remover a coluna de "crianças"

Remover o preço da criança extra da descrição do meu quarto

Cole o código abaixo na customização do arquivo CSS

 

<style>

.tarife.kids_tarife {

display: none !important;

}

</style>

 

Remover a opção de crianças do resumo da reserva

<style>

/* Hide children from sidebar */
#wizard-container > div.checkout > div > div.col-md-3.reserve_info > div.reserve_total > div.row.total_child > div:nth-child(1) > p {display:none;}

#wizard-container > div.checkout > div > div.col-md-3.reserve_info > div.reserve_total > div.row.total_child > div.col-md-6.text-right.col-sm-6.col-xs-6.padding-0.sum {display:none;}

</style>

Remover o preço de hóspede adicional

<style> #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;} </style>

 

Adicionar uma imagem de plano de fundo

<style>

.add_white {background: transparent;}

.container1{background-color: transparent;}

.container2 {background: url("http://amxxcs.ru/wp/oNpi0Lr.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }

.chooser, .property center {opacity: 1}

</style>

Modificar o botão de "Buscar"

<style>

.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active{

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 16px;

/* line-height: 36px; */

color: #fff;

background: #ED1C24;

border: 1px solid ##3B5F87;

cursor: pointer;

text-transform: uppercase;

}

</style>

Modificar o botão de "Buscar"

Modificar a primeira linha com o nome da propriedade

<style>

.page-header.navbar {

background: none repeat scroll 0 0 ;

background-color: #000000;

padding: 0px 0 20px;

color: #fff;

width: 100%;

}

</style>

Adicionar um texto customizado no cabeçalho ou rodapé com um link para redirecionar ao website

<a href="PUT WEBSITE URL HERE" target="_blank"><h1><b>PUT PROPERTY NAME HERE</b></h1></a>

Remover a frase "apenas # restantes"

<style>

.only_left

{display:none;}

</style>

Remover a frase "apenas # restantes"

Modificar todas as fontes

<style>

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;

}

i.fa

{

font: normal normal normal 14px/1 FontAwesome !important;

}

.page-header-inner .hotel_name {

color: #fff;

font-family: 'Verdana',sans-serif;

font-weight: 300;

font-size: 30px;

text-transform: uppercase;

}

</style>

Mudar a cor do local onde o hóspede insere o código promocional

"Para modificar a cor das palavras "Você tem um código promocional?"

<style> .show_promo_code a {color:#999;} </style>

 

Para modificar a cor das palavras quando você passa o mouse em cima da frase "Você tem um código promocional?"

<style>.show_promo_code a:hover {color:#777;}</style>

Mudar a cor do local onde o hóspede insere o código promocional

Modificar o botão "Reservar Agora"

<style>

.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled {

padding: 0 30px 0 30px;

height: 49px;

font-size: 19px;

line-height: 36px;

color: #fff;

background: #ED1C24;

border: 0;

cursor: pointer;

text-transform: uppercase;

margin-top: 12px;

}

.finalizea:hover, .book_now:hover, .add_guest_btn:hover {

background-color: #f7846a;

}

</style>

Modificar o botão "Reservar Agora"

Remover o ícone com a "carinha triste" quando o hóspede busca um período que não há disponibilidade

<style>

.smile {display:none;}

</style>

Remover o endereço e o mapa da propriedade

Remover o endreço

<style>.map_info {display:none;} </style>

Remover o mapa

<style> #map_canvas {display:none;}</style>

Remover ambos

<style>.map_info, #map_canvas {display:none;} </style>

Modificar a aba mostrando os "passos da reserva"

<style>

.page-breadcrumb li.active a {

background-color: #000000;

background:#000000;

}

.page-breadcrumb li.active a:after {

border-left: 30px solid #000000;

}

.breadcrumb a:after {

content: '';

position: absolute;

top: 0;

right: -30px;

width: 60px;

height: 60px;

transform: scale(0.707) rotate(45deg);

z-index: 1;

background: #000000;

box-shadow: 1px -1px 0 0 #070211;

border-radius: 0 0 0 50px;

}

</style>

Modificar o calendário de disponibilidade no cabeçalho

<style>

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

}

</style>

Modificar o calendário de disponibilidade no cabeçalho

Modificar a caixa suspensa onde o hóspede seleciona a quantidade de quartos / camas

<style>

.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {

background-color: #0479af;

}

</style>

Modificar a caixa suspensa onde o hóspede seleciona a quantidade de quartos / camas

Remover as políticas de check in e check out

</style>

.checkin-checkout-terms-block{

display: none;

}

</style>

Remover as políticas de check in e check out

Esconder o nome da propriedade

h1 {

 

   text-indent: 100%;

   white-space: nowrap;

   overflow: hidden;

}

Esconder o nome da propriedade
 

Iframe de altura total (para caber 100% do conteúdo):

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

Esse código deve ser colocado na parte inferior da sua página da web

<script type="text/javascript" src="http://hotels.acessa.loc/widget/iFrameResizer"</script>


 

Esse artigo foi útil? Envie uma solicitação

Comentários

Powered by Zendesk