Customização Mybookings - HTML e CSS Meta tags

/* Mudando a cor no campo de inserção */

#group_code_input {
background-color: Qualquer código de cor. Começa com # ;
}

th.children.custom-children {
visibility: hidden !important;
display: none;
}
td.children {
visibility: hidden !important;
display: none;
}
.av-children {
visibility: hidden !important;
display: none;
}

[data-room-type-id="ID da acomodação"] .av-children {
visibility: hidden !important;
display: none;
}

/* Remover a opção de crianças de todas as acomodações */

th.children.custom-children {
visibility: hidden;
display: none !important;
}

.btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden !important; 
display: none !important;
}

/* Remover a opção de crianças quando for possível reservar o quarto para um tipo de acomodação específico. Substituir "00000" pelo ID da acomodação*/

[data-room-type-id="00000"] th.children.custom-children {
visibility: hidden;
display: none !important;
}

[data-room-type-id="00000"] .btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden; 
display: none !important;
}

th.adults.custom-adults {
visibility: hidden !important;
display: none;
}td.adults {
visibility: hidden !important;
display: none;
}.av-adults {
visibility: hidden !important;
display: none;
}

.av-rates .price-from {
visibility: hidden !important;
display: none;
}

/* Remover o preço por pessoa adicional */

.av-per-person-price {
visibility: hidden !important;
display: none;
}

/* Remover o preço por pessoa adicional de um único tipo de acomodação */

[data-room-type-id="INSERIR ID DA ACOMODAÇÃO"] .av-per-person-price {
visibility: hidden !important;
display: none;
}

/* Remover a coluna de núm. máximo de hóspedes */

.av-occupancy {
display: none !important;
}

/* Remover a tarifa tachada após a aplicação do código promocional */

.av-roomrate .av-rate-price .old-price {
display: none;
}

/* Remover "Apenas x restantes" de todos os tipos de acomodações */

.av-left-rooms {
visibility: hidden !important;
display: none;
}

/* Remover "Tem um código de grupo?" */

.show_group_code {
display: none;
}

/* Code below will remove the "Minimum Stay" text from all of the room types */
.av-max-stay {
display: none !important;
}

.show_group_code 
{ 
font-size: 0;
} .show_group_code a:after {
content:"VOCÊ TEM UM CÓDIGO DE DESCONTO PARA GRUPO?";   
font-size: 13px; 
color: red;
}

.price-from {
font-size: 0 !important;
}
.price-from:after {
content: "Preço por noite";
font-size: 12px;
}

/* Mudar o texto de "Adultos" para "Hóspedes" */

.av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}

.av-room-options .av-adults .type_of_room:after {
content: "Insira aqui o seu texto";
text-align: center;
font-size: 10px;
} 

/* Mudar o texto de "Adultos" para "Hóspedes" quando a opção de reservar um quarto específico estiver ativa */

th.adults.custom-adults {
font-size: 0 !important;
}

th.adults.custom-adults:after {
content: "Insira aqui o seu texto";
font-size: 14px;
text-align: center;
} 
/* --------------------------------------------------- */

/* Mudar o texto "Crianças para "Crianças acima de 3 anos" */

.av-room-options .av-children .type_of_room {
font-size: 0 !important;
}

.av-room-options .av-children .type_of_room:after {
content: "Crianças acima de 3 anos";
text-align: center;
font-size: 10px;
}

/* Mudar o texto "Crianças para "Crianças acima de 3 anos" quando a opção de reservar quartos específicos estiver ativa */

th.children.custom-children {
font-size: 0 !important;
}

th.children.custom-children:after {
content: "Crianças acima de 3 anos";
text-align: center;
font-size: 14px;
}

/* Mudar o texto "Acomodações" para "Selecione" */

.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "Insira aqui seu texto";
text-align: center;
font-size: 10px;
} 

<script type="text/javascript">
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = 'ESCOLHA UMA ÁREA DE CAMPING';
</script>

/* The following code will change the text "Room Selection" to "Pitch Selection:"  */
div.checkout div div.col-md-3.reserve_info p:nth-child(3) {
font-size: 0;
}

div.checkout div div.col-md-3.reserve_info p:nth-child(3):after {
content: "Seleção da área de camping:";
font-size: 13px;
}

/* The following code will change the text "Room Nights" to "Pitch Nights:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(14) {
font-size: 0;
}

div.checkout div div.col-md-3.reserve_info p:nth-child(14):after {
content: "Diárias da área de camping:";
font-size: 13px;
}

/* The following code will change the text "Room Total" to "Pitch Total" */
div.reserve_total div:nth-child(1) div:nth-child(1) p {
font-size: 0;
}

div.reserve_total div:nth-child(1) div:nth-child(1) p:after {
content: "Total da área de camping:";
font-size: 13px;
}

<script type="text/javascript">
document.querySelector("div.reserve_success div div.col-md-9 div div.table-responsive.visible-lg-block.visible-md-block h4").innerHTML = 'Área(s) de camping';
</script>

/* The following code will change the text "Room Type" to "Pitch Type" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1):after {
content: "Tipo da área de camping";
font-size: 14px;
}

/* The following code will change the text "Room Name" to "Pitch Name" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2):after {
content: "Nome da área de camping";
font-size: 14px;
}

/* Mudar o texto "Selecionar acomodação" por outro */

.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}

.btn.green.btn-block.select-accommodation-btn:after {
  content: "Selecione / Insira seu texto aqui";
  font-size: 12px;
}

/* Mudar "Camas" do dormitório para outro texto */
[data-room-type-id="00000"] .type_of_room {
font-size: 0 !important;
}

[data-room-type-id="00000"] .type_of_room:after {
content: "Insira aqui o texto";
text-align: center;
font-size: 10px;
}

<script>
/* ----------------------- Select 2 Adults on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
        $('div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
});
}); 
</script>

<script>
/* ----------------------- Select 2 Adults on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
$('[data-room-type-id=”XXXX”] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
});
}); 
</script>

<script>
/* ----------------------- Select the rate plan on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  $('div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

<script>
/* ----------------------- Select the rate plan on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  
packagerate = $('[name="check_roomrate-XXXX"]');
$(packagerate).trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

<script> 
/* ----------------------- Select the rooms when date is changed ----------------------- */

$(window).on('hashchange', function(e) {
//Get Check-in date
 var CheckInDate = $('#start_date_not_mobile').val();
CheckInDate = CheckInDate.split("/");   // Adding for change
CheckInDate = CheckInDate[1] + "/" + CheckInDate[0] + "/" + CheckInDate[2]; //Adding for change
 var DateIn = new Date(CheckInDate);

//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
CheckOutDate = CheckOutDate.split("/");   // Adding for change
CheckOutDate = CheckOutDate[1] + "/" + CheckOutDate[0] + "/" + CheckOutDate[2]; //Adding for change
var DateOut = new Date(CheckOutDate);

//Get difference between the time of those dates
  var GetTime = DateOut.getTime() - DateIn.getTime();

//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);

//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1) 
{ 
setTimeout(function() {
        $('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
}

}).trigger('hashchange'); // End of window hash.

</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
        $('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

<script> 
/* ----------------------- Select the rooms when date is changed ----------------------- */

$(window).on('hashchange', function(e) {
//Get Check-in date
 var CheckInDate = $('#start_date_not_mobile').val();
 var DateIn = new Date(CheckInDate);

//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
var DateOut = new Date(CheckOutDate);

//Get difference between the time of those dates
  var GetTime = DateOut.getTime() - DateIn.getTime();

//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);

//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1) 
{ 
setTimeout(function() {
        $('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
}

}).trigger('hashchange'); // End of window hash.

</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
        $('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

.roomtype .bootstrap-select.rooms_select .btn {
 background-color: #727B5F!important;
}

.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}

.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}

.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}

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

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

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

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

/* Fonte do nome do hotel */

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

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

.message_container 
{font-size: 16px;
color: #ff5722; 
font-weight: normal; /*font weight - normal, bold, light, etc...*/  
font-style: normal; /*font style - normal, italic*/}

/*Título*/
.caption {
font-family: "Georgia";
}

/*Informações dentro da seção*/
.map_info {
font-family: "Courier New";
}

<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>

#promo_code_input {
background-color: #efc0ff;
}

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

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

.last.dropdown {display:
none!important;
}

#lang_currency_switchers { display:
none;

.portlet.property_info>.portlet-title {
   display: none;
}.portlet.property_info>.portlet-body {
   display: none;
}

.show_promo_code{
display: none;
}

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

<style>
.amenities_tab li::before, ul.amenities li::before{
content: " \XXXX ";
color: #3267B8;
}
</style>

<script type="text/javascript">
document.querySelector('#reservationDetailsForm > div.payment_method > div.md-radio-inline > div:nth-child(2) > label > a').innerHTML = 'Debit/Credit Card';
</script>

<div>
<button onclick="topFunction()" id="myBtn" title="Voltar ao topo"> Voltar ao topo </button>
</div>

<style>
html {
scroll-behavior: smooth;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 999999; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #26A69C; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
box-shadow: 0.5em 0.5em 0.5em rgb(11, 70, 140, 0.5);
}

#myBtn:hover {
  background-color: #12234E; /* Add a background color on hover */
}

</style>

<script type="text/javascript"> 
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
} 
</script>

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

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

.pink { background: none !important; }

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

<script type="text/javascript">
window.addEventListener("load", function(event) {
  setTimeout(function() {
      document.querySelector('.show_avail_calendar a').click();
  }, 1000);
}, false);
</script>

<style>
.rate-check-arrow + .rate-check-container {
width: 284px;
display: block;
}.rate-check-arrow-text {
width: 0px;
padding-right: 0px;
display: none;
}
</style>

<style>
.rate-check {display:none !important;}
</style>

#channel-Airbnb {display: none;} 

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

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, false);
</script>

<meta property="og:title" content="PUT TITLE HERE" />
<meta property="og:description" content="PUT DESCRIPTION HERE" />
<meta property="og:image" content="https://PUT_PREFERABLE_IMAGE_URL_HERE?format=2500w" />

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