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 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 lá, 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 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

W3schools HTML Tutorial

Codecademy HTML & CSS web design course

Customization Examples:

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:

Example:

<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 ajudar adicional com a modificação das codificações contacte o 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

To add a background image to the main area of the booking engine use this code:

/* 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}

To show the background image on the full page use this code instead:

/* 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' will change the color of font for word 'Search';'background' will change the color of the button

/* 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#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. 

The sad face is displayed when there is no availability for the selected date on the calendar

.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 quantidade de 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;
}
Remova 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>

This code should be added at the bottom of your website page:

<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>
Modificando  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 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>
Esse artigo foi útil? Envie uma solicitação

Comentários

Powered by Zendesk