Exemples de Codes CSS pour personnaliser le moteur de réservation
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
Mis à jour le : 09/09/2025
Merci !