Personnalisation du design du widget de prise de rendez-vous

En tant que revendeur, vous pouvez personnaliser le comportement et l'aspect du widget de prise de rendez-vous et du minisite qui contient ce widget.


Dans le Tableau de bord Reseller, Configuration > Prise de rendez-vous, vous avez accès notamment à 3 zones de texte :

  • Code Javascript du widget : remplacement de textes, modification de comportements, ajout d'éléments
  • Code CSS du widget : couleurs, positionnements des éléments constituant le widget
  • Code CSS du minisite : couleurs, positionnements des éléments constituant le minisite à l'exclusion du widget lui-même



Exemple de code CSS :



/* CODE CSS DU WIDGET */


/* mise en forme arrière plan et autour du widget */
#body-site{background-color:#f9f9f9;}
.header {height: 60px; border-top: solid 0px #929292;}
#company-title h1 { font-size: 40px; }


/* mise en forme widget */
body {margin-top: 0px;}
#iframe {border:none; border-radius:0px;}
.iframe-container {padding-top: 16px;}
.page-content {height: 95%; margin-top:2%;}


/* mise en forme graphique liste des services */
.items li * {color: #4609A8;}
.items div.item * {color: #6b6b6b;}
.group {margin: 3px 0 4px 0; background-color:#6b6b6b;}
.group:hover {background-color: #313131;}
.items .item.center {color: #4609A8;}

@media screen and (max-width: 640px) {.items .item.center {color: #6b6b6b; position: absolute; width: 80%;} }


/* mise en forme calendrier des jours */
.dday span {background-color: none; border-radius: 0px; color: #C8C9CD!important;}
.dday span {background-color: white; color: #dddddd!important; opacity: 1 !important;}
.sday span {background-color: #4609A8; border-radius: 0px; opacity: 1 !important;}
.day span:hover {opacity:1; color: #4609A8;}
.dday span:hover {opacity:1;}
.month td.day {color: #4609A8;}
.day span {opacity:0.7;}


/* mise en forme choix de l'horaires */
.button {border: solid 1px #DDDDDD; -moz-border-radius: 0px; border-radius: 0px;}
.list-dates .button:hover {background-color: #4609A8; color: white; border:1px solid #4609A8;}


/* mise en forme informations personelles */
#new-client h4 {margin-bottom: 18px;}

@media screen and (max-width: 640px) {#new-client h4 {padding-top: 0px; margin-bottom: 12px; font-size: 14px;} }

#privacy-consent + label, #marketing-consent + label, #privacy-consent-mandatory, #marketing-consen {width: 80%; padding-left: 30px;}


/* mise en forme bouton précédent et suivant */
#bbuttons {background-color: #DCDEE0; padding-bottom: 0px; padding-top: 20px;}
.az-btn, .az-btn-neg, .az-btn-pos, .az-btn-blue {border-radius: 0px; padding: 8px 15px; margin: -10px 7px 0 0;}
.az-btn-blue {background-color: #00AA5B; font-weight: bold;}
.az-btn-blue:hover {background-color: #0e7843;}
.az-btn-previous:hover {background-color: #313131;}
.az-btn-previous {font-weight:bold;}
#submit-widget {background-color: #00AA5B; font-weight: bold;}
#submit-widget:hover {background-color: #0e7843;}

.staff-random .az-btn-blue {margin: 0px;}

@media screen and (max-width: 640px) {.az-btn, .az-btn-neg, .az-btn-pos, .az-btn-blue {padding: 5px 10px;} }


/* mise en forme message final merci */
.buttons input {border: solid 0px #C3C3C3; border-radius: 0px; margin-top: 4px;}

/* mise en forme graphique footer */
.footer a { color: white;}
.footer {background-color: #4609A8;}


/* mise en forme graphique horaires leftbar */
.left {margin-top: 36px !important;}
#logo {margin-bottom: 10px;}
.label.label {color: #4609A8;}
.day li {margin-bottom: 8px; text-align: right; margin-left: 8px; float: left;}
.info.address img{display:none;}
.info .content {margin-top: 14px;}
.address a {padding-top: 4px; color: #4609A8; text-decoration: underline;}
.address a:hover {color: #313131; text-decoration: underline;}
div.info.contact a {color: #4609A8; text-decoration: underline; line-height: 2;}
div.info.contact a:hover {color: #313131; text-decoration: underline; line-height: 2;}