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

Créé par Gaëtan SuperHote, Modifié le  Sat, 06 May 2023 sur 06:00 PM 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

Cet article a-t-il été utile ?

C'est super !

Merci pour votre commentaire

Désolé ! Nous n'avons pas pu vous être utile

Merci pour votre commentaire

Dites-nous comment nous pouvons améliorer cet article !

Sélectionner au moins l'une des raisons
La vérification CAPTCHA est requise.

Commentaires envoyés

Nous apprécions vos efforts et nous allons corriger l'article