How to customize the scheduling widget design with CSS
As a reseller, you can fine-tune the look&feel of the scheduling widget as well as the design of the minisite (ie: direct URL).
In the reseller console, locate the menu Configuration > Scheduling. You will find three text areas:
- Widget Javascript code: replacing texts, altering behaviors, adding elements
- Widget CSS code: changing colors, size and position of the widget elements
- Mini site CSS code: changing colors, size and position of the minisite elements
CSS code example for the widget:
/* background */
#body-site{background-color:#f9f9f9;}
.header {height: 60px; border-top: solid 0px #929292;}
#company-title h1 { font-size: 40px; }
/* widget */
body {margin-top: 0px;}
#iframe {border:none; border-radius:0px;}
.iframe-container {padding-top: 16px;}
.page-content {height: 95%; margin-top:2%;}
/* service list */
.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%;} }
/* date picker */
.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;}
/* time picker */
.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;}
/* personal data */
#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;}
/* previous and next */
#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;} }
/* thank you */
.buttons input {border: solid 0px #C3C3C3; border-radius: 0px; margin-top: 4px;}
/* footer */
.footer a { color: white;}
.footer {background-color: #4609A8;}
/* office hours 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;}