iFrame Colour Change
//———————————————————————-
//- Code to change style of the iframe patient booking – black, white, grey, green, blue, purple
//———————————————————————-
const custom_styles = `<style>
:root {
–btn-link: #000;
–btn-primary: #000;
–btn-primary-bg: #fff;
–btn-primary-border: #fff;
–btn-select: #fff;
–btn-select-bg: #000;
–btn-select-border: #000;
–btn-back: #fff;
–btn-back-bg: #cecece;
–btn-back-border: #cecece;
–select-border-hover: #7dda58;
–select-appointment-slot: #7dda58;
–badge-am: #fff;
–badge-am-bg: #007bff;
–badge-pm: #fff;
–badge-pm-bg: #060270;
–wizard-active: #cc6ce7;
–wizard-done: #e4b5f1;
}
a, a:hover {
color: var(–btn-link);
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary.disabled, .btn-primary:disabled,
.bootbox-accept, .bootbox-accept:hover, .bootbox-accept:focus {
color: var(–btn-primary) !important;
background-color: var(–btn-primary-bg) !important;
border-color: var(–btn-primary-border) !important;
box-shadow: 0 0 0 0 !important;
}
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success.disabled, .btn-success:disabled {
color: var(–btn-select) !important;
background-color: var(–btn-select-bg) !important;
border-color: var(–btn-select-border) !important;
box-shadow: 0 0 0 0 !important;
}
.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: var(–btn-back) !important;
background-color: var(–btn-back-bg) !important;
border-color: var(–btn-back-border) !important;
box-shadow: 0 0 0 0 !important;
}
.ps-fc-badge-am {
color: var(–badge-am) !important;
background-color: var(–badge-am-bg) !important;
}
.ps-fc-badge-pm {
color: var(–badge-pm) !important;
background-color: var(–badge-pm-bg) !important;
}
.ps-card-select:hover {
border-color: var(–select-border-hover) !important;
}
.stylish-table tbody tr:hover, .stylish-table tbody tr.active {
border-left-color: var(–select-appointment-slot) !important;
}
</style>`;
// Add styles to the page
document.head.insertAdjacentHTML(“beforeend”, custom_styles);
const wizActive = getComputedStyle(document.documentElement)
.getPropertyValue(“–wizard-active”)
.trim();
const wizDone = getComputedStyle(document.documentElement)
.getPropertyValue(“–wizard-done”)
.trim();
document.documentElement.style.setProperty(“–sw-anchor-active-primary-color”, wizActive);
document.documentElement.style.setProperty(“–sw-anchor-done-primary-color”, wizDone);
| Setting | What it changes | Where you will see it |
|---|---|---|
| –btn-link | Link text colour | Any clickable text links |
| –btn-primary | Text colour on main buttons | Main buttons such as Continue / Confirm |
| –btn-primary-bg | Background colour of main buttons | Main buttons |
| –btn-primary-border | Border colour of main buttons | Around main buttons |
| –btn-select | Text colour on selection buttons | Select / chosen option buttons |
| –btn-select-bg | Background colour of selection buttons | Appointment type / practitioner selection buttons |
| –btn-select-border | Border colour of selection buttons | Around selection buttons |
| –btn-back | Text colour on back buttons | Back / Previous buttons |
| –btn-back-bg | Background colour of back buttons | Back / Previous buttons |
| –btn-back-border | Border colour of back buttons | Around Back / Previous buttons |
| –select-border-hover | Border colour when hovering over a selectable card | Appointment type or practitioner cards |
| –select-appointment-slot | Highlight colour for appointment slots | Date/time appointment slot list |
| –badge-am | Text colour for AM badge | Date/time screen |
| –badge-am-bg | Background colour for AM badge | Date/time screen |
| –badge-pm | Text colour for PM badge | Date/time screen |
| –badge-pm-bg | Background colour for PM badge | Date/time screen |
| –wizard-active | Colour of the current step | Progress bar / wizard steps at the top |
| –wizard-done | Colour of completed steps | Progress bar / wizard steps at the top |