***Para programadores*** Motor de reservas para o sítio Web externo: CSS personalizado

***Para programadores*** Por favor, note que a Smoobu não fornece suporte CSS individual 

No caso de estares interessado em aprender CSS, podes estar interessado em Recursos para programadores Chrome

Introdução

Podes agora introduzir o teu CSS personalizado na tua conta Smoobu para personalizar o sistema de reservas da Smoobu, para que combine melhor com o teu site externo (Wordpress, Wix, Squarespace, etc.) aparência.

Estes sites fizeram-no:

• https://birdwoodestate.com.au/book 
• https://coachroadcottages.co.uk/ 
• https://www.sulalightship.com/bookings/ 
• https://deerhollowcabins.com/book-now/ 

Onde introduzir o CSS Personalizado na Smoobu? 

Por favor vai a Configurações do Smoobu / Sistema de Reservas / Estilo personalizado

Captura de ecrã abaixo:

Exemplo (1): Alterações de cor

Aqui estão alguns exemplos de código que só precisa de adaptar no seu CSS:

:root {
--font-color-default: #9a9a9a;
--font-color-label: #9a9a9a;
--font-color-input: #9a9a9a;
--font-color-icons: #9a9a9a;
--font-color-icons: #9a9a9a;
--font-color-input-icons: #9a9a9a;
--font-color-headlines: #9a9a9a;
--font-color-headlines: #9a9a9a;
--font-color-error: #F45B69;
--font-color-black: #424242;
--border-radius: 5px;
--border-width: 1px;
--border-color-default: #ced4da;
--border-color-container: #ced4da;
--border-color-input: #ced4da;
--border-color-image: #ced4da;
--border-color-error-shaddow: rgba(244, 91, 105, 0.25);
--button-color-primary: #3b4aff;
--button-color-secondary: white;
}

Exemplo (2): Mudanças de cor

Aqui está outro exemplo de CSS, caso ajude: https://booking.smoobu.com/AroundTheWorld 
Veja o código abaixo: 

:root {
    --font-color-default: #9A9A9A;
    --font-color-label: #9A9A9A;
    --font-color-input: #9A9A9A;
    --font-color-icons: #9A9A9A;
    --font-color-input-icons: #9A9A9A;
    --font-color-headlines: #9A9A9A;
    --font-color-error: #F45B69;
    --font-color-black: #424242;
    --border-radius: 5px;
    -Largura da borda: 1px;
    --border-color-default: #CED4DA;
    --border-color-container: #CED4DA;
    --border-color-input: #CED4DA;
    --border-color-image: #CED4DA;
    --border-color-error-shaddow: rgba(244, 91, 105, 0.25); 
    --button-color-primary: #3B4AFF;
    --button-color-secondary: white;
  }
corpo {
    background-image: url("https://login.smoobu.com/upload/images/summernote_image_166737_60b9e1981df5b.jpg");
    background-size: cover;
    font-weight: bold;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cor: #495057;
    background-color: #ffffff4d;
    background-clip: padding-box;
    border: 1px solid #CED4DA;
    border-radius: .25rem;
    transição: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-group-text {
    background-color: #ffffff4d;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus {
    font-weight: bold;
    color: #D40549;
    background-color: #ffffff4d;
}
.btn {
    border-color: #FFFFFF;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #1A5DA0;
    text-align: left;
    list-style: none;
    background-color: #ffffff4d;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.color-black, .changed-value, option {
    color: #1A5DA0;
    font-weight: bold;
}
h1 {
    font-size: 35px;
}
.btn-secundário, .btn-secundário:hover, .btn-secundário:focus {
    color: #1A5DA0;
    background-color: #ffffff4d;
    font-weight: bold;
}
.color-label {
    color: #D40549;
    border-color: darkgoldenrod;
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    background: 0 0;
    color: #D40549;
    cursor: default;
}
.float-right {
    float: right!important;
    font-size: 22px;
}
h2 {
    font-size: 40px;
    font-weight: 500;
    font-stretch: normal;
    font-style: oblique;
    line-height: normal;
    letter-spacing: 1px;
}
corpo {
     color: #D40549;
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: #ffffff4d;
}

Exemplo (3)

Aqui está outro exemplo de CSS, caso ajude: https://booking.smoobu.com/albufeira
Veja o código abaixo: 

@importar url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;900&display=swap);

.datetimepicker {
    background: transparent !important;
}
corpo {
    font-family: Source Sans Pro;
    font-weight: 400;
}
#check-availability-button {
    height: 43px;
}
.iframe .content {
    border-radius: 0;
    min-height: auto;
}
.apartmentInfo .apartmentInfoBox {
    padding: 0;
    border: 0;
}
.apartmentInfo {
    margem: 10px 0;
}
.book-container {
    min-height: unset;
}
.apartmentInfo .apartmentInfoBox .amenities {
    margin-top: 10px;
}
.amenidades li {
    line-height: 50px;
}
.fa-amenities {
     color: #424242;
    font-size: 30px;
    margin-right: 30px;
}
.iframe .content, #apartmentContainer, .apartmentInfo .col-sm-8 {
    width: 100% !important;
}
#apartmentListContainer .price-container {
    left: 10px;
    right: unset;
}
.apartmentInfo .col-sm-8 {
    text-align: center;
    font-weight: 900;
    color: #e3b46e;
}
cabeçalho {
    border-color: #f5f5f5 !important;
    border-width: 2px !important;
    margem: 0 auto;
    largura: 95%;
}
.logo_title {
    color: #e3b46e;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 40px;
    text-align: center;
}
.navbar {
    margin-top: 15px;
    padding-left: 5px;
}
.navbar a.navbar-brand img {
    margin-right: 5px;
}
.navbar.navbar-default .contentor .linha {
    margin-left: auto;
    margem-direita: auto;
}
.request-result .contentor .apartmentInfo {
    margem: 0;
}
.apartmentInfo {
    margin-top: 0;
}
.apartmentInfo .apartmentInfoBox a.cancel {
    top: unset;
}
.amenities li svg, .amenities li img, #adultos option:nth-last-of-type(-n+2), #crianças option:nth-last-of-type(-n+2) {
    display: none;
}
.first-color, #availabilityDatePicker .form-group, .one-apartment-form-left-container-box .summernote-editor-content label, h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
}
.apartmentInfoBox h2 {
    font-size: 22px;
    text-transform: uppercase;
}
.apartmentInfoBox .float-right {
    float: unset !important;
    margin-left: 25px;
    margin-top: -15px !important;
}
.first-color {
    font-size: 15px;
}
.btn {
    border: 1px solid #d4a45c;
    color: #e3b46e;
    text-transform: uppercase;
    font-weight: 900;
}
.btn:focus, .btn:hover {
    border: 1px solid #d4a45c;
    background: #e3b46e;
     color: #ffffff;
}
.btn-primary {
    background: #e3b46e;
    border: 1px solid #d4a45c;
    padding: 8px 12px;
    font-weight: 900;
    color: #ffffff;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;
}
.btn-primary:focus, .btn-primary:hover {
    background: #d4a45c;
    border: 1px solid #d4a45c;
}
.form-control {
    box-shadow: none;
    height: auto;
    font-weight: 400;
    padding: 10px 15px;
    font-size: 15px;
     color: #282828;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
    background: #e3b46e !important;
}

@media only screen and (max-width: 767px) {
    .navbar {
       margin-top: 10px;
    }
    .logo_title {
       font-size: 20px;
       line-height: 25px;
    }
    #website-logo {
       margem: 0 auto;
    }
    .navbar-header h1, .navbar-header.border-box-container {
       padding: 0;
    }
}

Exemplo (4): Excluir a possibilidade de pesquisa de "outros alojamentos"

Se preferir que os visitantes do seu sítio web não vejam os seus outros alojamentos, pode desativar a possibilidade via CSS (avançado). O código é:
.iframe .show-in-iframe {
    display: inherit;
    visibility: hidden;
}

Anteriormente: veja a cruz (x) disponível ao lado de Pesquisar

Depois