Customização Mybookings - HTML e CSS Meta tags

Seguir

Mybookings oferece um grande número de opções de customização mais a fundo para aqueles que estão familizarizados com HTML/CSS ou emprega web-designer. Para fazer a sua customização, acesse:

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 nesse local, pois isso poderá quebrar a página.

A Cloudbeds não fornece suporte para solução de problemas do seu site, mas nós oferecemos alguma opções muito fáceis de copiar e colar para que você possa usar em 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

W3schools HTML Tutorial

Codecademy HTML & CSS web design course

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:

http://www.w3schools.com/colors/colors_picker.asp

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 códigos completos listados abaixo.
  • Para obter ajudar adicional com a modificação das codificações entre em contato com seu web-designer.
Remover a frase "Preços a partir de "
/* Remove "Price From" column */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
Remover o Calendário de Disponibilidade
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
Remover as colunas "adultos e crianças " do 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; }
Remover a coluna de crianças 
/* 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;
}
Adicionar uma imagem de plano de fundo

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

/* Add Background Image */ 
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Change URL here */
.container2 {background: url("http://background.url/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}

Para mostrar a imagem de fundo na página inteira, use esse código:

/* Background to the full page */ 
.page-boxed {
background: url("http://background.url/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 o botão de buscar disponibilidade

'color' mudará a cor da fonte da palavra "Buscar"; 'background' irá modificar a cor do botão.

/* Change Availability Button */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning.active, .btn-warning:active {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
background: #ED1C24;
}

/* Change Availability Button color when clicking on it */
.btn-warning:active:hover {
background: blue;
}
Modifique a linha superior (Cabeçalho):
/* Change Header */
.page-header.navbar {
background-color: #000000;
}
Ocultar o nome da propriedade 
/* Hide Property Name */
h1 {   
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
Remover a frase "Apenas#quartos restantes"
.only_left
{display:none;}
Modificar 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;
}

/* Hotel Name Font */

.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Mudar a cor do local onde o hóspede insere o código promocional 
/* Promo Code Color */
.show_promo_code a {color:#999;} 

/* Promo Code Hover Color */
.show_promo_code a:hover {color:#777;}
Modificar o botão 'Reservar Agora' 
/* Change the Book Now Button */
.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
color: #fff;
background: #ED1C24;
}
Remover o ícone com carinha de triste

A carinha de triste aparecerá quando não houver disponibilidade para as datas selecionadas no calendário

.smile {display:none;}
Remover o endereço e /ou mapa da propriedade:
/* Remove Address */ 
.map_info {display:none;} 

/* Remove Map */
#map_canvas {display:none;}  
Modificar a Aba Passos da Reserva
/* Booking Steps - Active Step Color */
.page-breadcrumb li.active a {
background: #12234E;
}

/* Arrow Color */
.page-breadcrumb li.active a:after {
border-left: 30px solid #12234E;
}

/* Inactive Step Color */

.breadcrumb a:after { 
background: #e3e3e3;
}
Modificar o calendário de disponibilidade no cabeçalho
.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;
}
Modificar a Caixa Suspensa onde o Hóspede Seleciona a Quantidadede Quartos
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
Remover as políticas de check-in e check-out 
.checkin-checkout-terms-block{
display: none;
}
Remover os títulos das colunas "A partir de", "Preço por 1 noite", "Max (pessoas)", "Adultos", "Crianças", "Acomodações"
.box_names .price_for_nights,
.box_names .custom-max-guests,
.box_names .roomtype .custom-adults,
.rate-check { display: none; }
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>

Este código deverá ser adicionado na parte inferior da pagina do seu website:

<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>

 

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>
Modifique  a cor do botão 'Comparador de Tarifas' para a mesma cor do botão de busca de disponibilidade.
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Por favor, verifique os exemplos nas imagens abaixo :

1 - antes de adicionar o código 

2 - depois que o código foi aplicado. A cor do botão do 'comparador de tarifas' é a mesma que a do botão de busca de disponibilidade.

Adicione sua própria seta ao '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>
Modificar o texto do botão "RESERVAR AGORA"

Você terá que adicionar um código no campo "Customize o rodapé da sua página de reservas" na aba de customização do mybookings:

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insira o Texto aqui';
</script>

Dica: - Você pode alterar o texto dentro de qualquer botão na página Mybookings usando o mesmo código, mas substituindo '.green.btn.disabled' pelo nome desejado.
- O código não irá traduzir o nome do botão automaticamente. Para modificar o nome em outros idiomas, replique o código para o idioma desejado na página de customização do mybookings.

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

Comentários

Powered by Zendesk