Buchungssystem für die externe Website: benutzerdefiniertes CSS

***Für Entwickler***

Du kannst jetzt dein benutzerdefiniertes CSS in dein Smoobu-Konto eingeben, um das Buchungssystem von Smoobu so anzupassen, dass es besser zum Erscheinungsbild deiner externen Website (Wordpress, Wix, Squarespace usw.) passt.

Hier einer unserer ersten Versuche als Beispiel: https://booking.smoobu.com/berlinvillas

Wenn du selbst Entwickler bist oder ein Entwicklerteam hast, mit dem du zusammenarbeitest, kannst du jetzt dein benutzerdefiniertes CSS in dein Smoobu-Konto eingeben, um Folgendes zu ändern:

• Schriftart
• Farbe
• Größe
• Hintergrundfoto
• Und noch viel mehr ...

Hier ein paar Beispiele von Vermietern, die ihr Buchungssystem angepasst haben:

• https://birdwoodestate.com.au/book 
• https://www.hellosunnanhed.com/ 
• https://www.sulalightship.com/bookings/ 
• https://costebelleconciergerie.com/locataires/
• https://deerhollowcabins.com/book-now/ 
• https://mercedesbnbamsterdam.com/ 

Wo kann man das benutzerdefinierte CSS in Smoobu eingeben?
Bitte klicke dafür in Smoobu auf Einstellungen - Buchungssystem - Einstellungen Buchungssystem -Custom Style (Benutzerdefinierter Stil) 

Screenshot unten:

Hier sind einige Codebeispiele, die du für dein CSS aber anpassen musst:

Beispiel (1) 

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

Beispiel (2)

Hier ein weiteres Beispiel, das dir helfen könnte: https://booking.smoobu.com/AroundTheWorld 

: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;
    --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;
  }
body {
    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;
    color: #495057;
    background-color: #ffffff4d;
    background-clip: padding-box;
    border: 1px solid #CED4DA;
    border-radius: .25rem;
    transition: 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-secondary, .btn-secondary:hover, .btn-secondary: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;
}
body {
    color: #D40549;
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: #ffffff4d;
}

Beispiel (3)

Und noch ein Beispiel: https://booking.smoobu.com/albufeira

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

.datetimepicker {
    background: transparent !important;
}
body {
    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 {
    margin: 10px 0;
}
.book-container {
    min-height: unset;
}
.apartmentInfo .apartmentInfoBox .amenities {
    margin-top: 10px;
}
.amenities li {
    line-height: 50px;
}
.fa-amenities {
    color: #424242;
    font-size: 30px;
    margin-right: 30px;
}
.iframe .container, #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;
}
header {
    border-color: #f5f5f5 !important;
    border-width: 2px !important;
    margin: 0 auto;
    width: 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 .container .row {
    margin-left: auto;
    margin-right: auto;
}
.request-result .container .apartmentInfo {
    margin: 0;
}
.apartmentInfo {
    margin-top: 0;
}
.apartmentInfo .apartmentInfoBox a.cancel {
    top: unset;
}
.amenities li svg, .amenities li img, #adults option:nth-last-of-type(-n+2), #children 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 {
        margin: 0 auto;
    }
    .navbar-header h1, .navbar-header.border-box-container {
        padding: 0;
    }
}

Beispiel (4)

Wenn Sie es vorziehen, dass Ihre Website-Besucher nicht die Möglichkeit haben, Ihre anderen Unterkünfte zu sehen, können Sie diese Möglichkeit per CSS (erweitert) deaktivieren. Der Code lautet:

.iframe .show-in-iframe {
    display: inherit;
    visibility: hidden;
}

Vorher:

Nachher: