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
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.
/* Remove "Price From" column */
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}/* Remove Availability Calendar */
.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}/* 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; }/* 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;
}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 *//* Change Header */
.page-header.navbar {
background-color: #000000;
}/* Hide Property Name */
h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}.only_left
{display:none;}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;
}/* Promo Code Color */
.show_promo_code a {color:#999;}
/* Promo Code Hover Color */
.show_promo_code a:hover {color:#777;}The sad face is displayed when there is no availability for the selected date on the calendar
.smile {display:none;}/* Remove Address */
.map_info {display:none;}
/* Remove Map */
#map_canvas {display:none;} /* 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;
}.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;
}.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}.checkin-checkout-terms-block{
display: none;
}.box_names .price_for_nights,
.box_names .custom-max-guests,
.box_names .roomtype .custom-adults,.rate-check { display: none; }<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>
<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>
<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.
<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>