Exemples de Codes CSS pour personnaliser le moteur de réservation

Créé par Gaëtan Bertuit, Modifié le Sam, 6 Mai, 2023 à 6:00 H par Rovaniavo SuperHote

Exemples de codes CSS

1- Cacher le prix

#external-booking .rentals-list .rental .rental-price {
display: none;
}

2- Couleur bouton et flèches navigation - texte, prix et nom des logements

Exemple avec du violet : #8538AA

#external-booking .select-section .btn {
  border-color: #8538AA;
  background-color: #8538AA;
}
#vueper-slides .vueperslides__arrows--outside .vueperslides__arrow--next {
  background-color: #8538AA;
}
#vueper-slides .vueperslides__arrows--outside .vueperslides__arrow--prev {   
    background-color: #8538AA;

}
#external-booking .rentals-list .rental .rental-price .sales-price {
  color: #8538AA;
}
#exampleModal .vueperslides__arrows .vueperslides__arrow--next {
  background-color: #8538AA;
}
element {

}
#exampleModal .vueperslides__arrows .vueperslides__arrow--prev {
    background-color: #8538AA;

}
#external-booking .rentals-list .rental-name {
  color: #8538AA;
}
#external-rental-detail .main-title {
  color: #8538AA;
}
#external-rental-detail .the-building .building-subtitle {
  color: #8538AA;
}
#external-rental-detail .the-building .building-subtitle {
  color: #8538AA;
}
#external-rental-detail .rental-location {
  color: #8538AA;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .action-box .book-btn {
    background: #bb98d1;
    border: #bb98d1;
}
#detail-checkout .checkout .payment-info-part #payment-info-field #payment-fields .booking-btn {
    background: #bb98d1;
    border: 1px solid #bb98d1;
}
.sticky-bottomRow .checking-availability-btn {
    background: #8538aa;
    border: 1px solid #8538aa;
}
.sticky-bottomRow .checking-availability-btn p {
    color: #fff;
}
.sticky-bottomRow .check-availability-row .price-text {
    color: #8538aa;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-title {
    color: #8538aa;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-subtitle {
    color: #8538aa;
}

3- Cacher l'adresse des logements

Ajoutez dans SuperHote

#external-booking .rentals-list .owner-city-address {
font-family: arial;
visibility: hidden;
}

#external-rental-detail .rental-location {
visibility: hidden;
}

#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-subtitle {
visibility: hidden;
}
#detail-checkout .info-right-side .right-side-content .right-side-info-part .rental-address {
visibility: hidden;
}

4- Changer la police de caractère et prendre celle du body

Définir le style de base du site (dans la page d'accueil ouvrir Elementor puis cliquer sur le menu hamburger puis dans Réglages du site > Polices globales)
Voici le css à adapter et ajouter dans Superhote :

#external-rental-detail .the-building .building-subtitle {
    font-family: inherit;
    font-size: 44px;
    line-height: 50px;
    margin-bottom: 24px;
    color: #073937;
    display: none;
}

element.style {
    border: 0px;
    display: none;
}

body {
    font-family: encode sans semi expanded,sans-serif;
}
#external-rental-detail .main-title {
    font-family: inherit;
    font-size: 44px;
}
#external-rental-detail .rental-location {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-title {
    font-family: inherit;
}

#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-subtitle {
    font-family: inherit;
}

#external-rental-detail .rental-base-info {
    font-family: inherit;
}
#external-rental-detail .rental-description {
    font-family: inherit;
}
input, select, textarea {
    font-family: inherit;
}
#external-rental-detail .rental-amenities .amenities-title {
    font-family: inherit;
}
#external-rental-detail .rental-amenities .amenities-box .amenities-card .amenities-card-text .amenities-subtitle {
    font-family: inherit;
}
#external-rental-detail .things-to-note .to-note-title {
    font-family: inherit;
}
#external-rental-detail .things-to-note .to-note-box .to-note-content .to-note-subtitle {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .box-available .available-text {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .box-available .available-text.total-text {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .callout-box .callout-text .callout-content-text, #external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .callout-box .callout-text .callout-text-title {
    font-family: inherit;
}
#detail-checkout .checkout #guest-info-text p {
    font-family: inherit;
}
#detail-checkout .form-label {
    font-family: inherit;
}
#detail-checkout .info-right-side .right-side-content .right-side-info-part .rental-name {
    font-family: inherit;
}
#detail-checkout .info-right-side .right-side-content .box-available .available-text {
    font-family: inherit;
}
#detail-checkout .checkout .payment-info-part #payment-info-field .payment-title p {
    font-family: inherit;
}
#detail-checkout .checkout .payment-info-part #payment-info-field #payment-fields .booking-btn p {
    font-family: inherit;
}
#external-booking .rentals-list .rental-name {
    font-family: inherit;
}
#external-booking .rentals-list .owner-city-address {
    font-family: inherit;
}
#external-booking .rentals-list .rental-capacity, #external-booking .rentals-list .rental-room-count {
    font-family: inherit;
}
#external-booking .select-section .vdp-datepicker .vdp-datepicker__calendar {
    background-color: #f5f5f5;
}
#vueper-slides .vueperslides {
    background: #fff;
}

5- Fond blanc & couleur boutons

#external-rental-detail {
    background-color: #fff;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .vdp-datepicker input {
    background-color: #fff;
}
.search-section {
    background-color: #fff;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .vdp-datepicker .vdp-datepicker__calendar {
    background-color: #f5f5f5;
}
#detail-checkout {
    background-color: #fff;
}
#detail-checkout .detail-form-control, #detail-checkout .detail-form-select {
    background-color: #fff;
}
#detail-checkout .checkout .payment-info-part #payment-info-field #payment-fields .booking-btn p {
    color: #ffff;
}
#external-booking {
    background-color: #fff;
}
#external-booking .select-section .section-search {
    background-color: #fff;
}
#external-booking .select-section .vdp-datepicker input {
    background-color: #fff;
}
#external-booking .select-section .btn {
    border-color: #33aeb7;
    background-color: #33aeb7;
}
#external-booking .rentals-list .rental .rental-price {
    background-color: #fff;
}
#external-booking .rentals-list .rental .rental-price .sales-price {
    color: #07393700;
}
body {
    font-family: encode sans semi expanded,sans-serif;
}
#external-rental-detail .main-title {
    font-family: inherit;
    font-size: 44px;
}
#external-rental-detail .rental-location {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-title {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .rental-widget-subtitle {
    font-family: inherit;
}
#external-rental-detail .rental-base-info {
    font-family: inherit;
}
#external-rental-detail .rental-description {
    font-family: inherit;
}
input, select, textarea {
    font-family: inherit;
}
#external-rental-detail .rental-amenities .amenities-title {
    font-family: inherit;
}
#external-rental-detail .rental-amenities .amenities-box .amenities-card .amenities-card-text .amenities-subtitle {
    font-family: inherit;
}
#external-rental-detail .things-to-note .to-note-title {
    font-family: inherit;
}
#external-rental-detail .things-to-note .to-note-box .to-note-content .to-note-subtitle {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .box-available .available-text {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .box-available .available-text.total-text {
    font-family: inherit;
}
#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .callout-box .callout-text .callout-content-text, #external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .callout-box .callout-text .callout-text-title {
    font-family: inherit;
}
#detail-checkout .checkout #guest-info-text p {
    font-family: inherit;
}
#detail-checkout .form-label {
    font-family: inherit;
}
#detail-checkout .info-right-side .right-side-content .right-side-info-part .rental-name {
    font-family: inherit;
}
#detail-checkout .info-right-side .right-side-content .box-available .available-text {
    font-family: inherit;
}
#detail-checkout .checkout .payment-info-part #payment-info-field .payment-title p {
    font-family: inherit;
}
#detail-checkout .checkout .payment-info-part #payment-info-field #payment-fields .booking-btn p {
    font-family: inherit;
}
#external-booking .rentals-list .rental-name {
    font-family: inherit;
}
#external-booking .rentals-list .owner-city-address {
    font-family: inherit;
}
#external-booking .rentals-list .rental-capacity, #external-booking .rentals-list .rental-room-count {
    font-family: inherit;
}
#external-booking .select-section .vdp-datepicker .vdp-datepicker__calendar {
    background-color: #f5f5f5;
}
#vueper-slides .vueperslides {
    background: #fff;
}


#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .action-box .book-btn {
    background: #84a7aa;
    border: 1px solid #84A7AA;
}

#external-rental-detail .detail-right-side .rental-booking .rental-booking-widget .action-box .book-btn p {
    color: #fff;
}

#detail-checkout .info-right-side .right-side-content .box-available {
    background: #c5e5cc;
}

#detail-checkout .checkout .payment-info-part #payment-info-field #payment-fields .booking-btn {
    background: #84A7AA;
    border: 1px solid #84A7AA;
}

▷ En complément, consulter le tuto pour l'explication de la mise en place : Personnaliser le moteur de réservation

------

LIENS UTILES:

Nouveau dans SuperHote ? Veuillez vous référer aux articles pour BIEN DEMARRER AVEC SUPERHOTE

Vous souhaitez être contacté pour un diagnostic stratégique gratuit, réservez votre appel stratégique en cliquant ici

Vous souhaitez voir des démonstrations et replay de nos conférences, visitez notre chaîne Youtube

Vous avez raté l'un de nos ateliers de coaching? Vous pouvez visionner les replay ici

Un sujet lié au centre d’aide en ligne, veuillez visiter notre Help Center

Vous voulez connaître les dernières nouvelles et mises à jour de SuperHote ? Visitez la page officielle des nouveautés

Restons connectés ?

Visiter notre site web

Suivez-nous sur Instagram

Aimez notre page sur Facebook

Abonnez-vous à notre chaine officielle Youtube

Besoin d’en savoir plus et voir les retours d'autres clients ?

Nous vous invitons à regarder les épisodes de notre série "J'irai louer chez vous" en cliquant ici

Vous souhaitez en savoir d’avantage, contactez-nous via le chat ou sur support@superhote.com