How to add a custom style to the online booking page

For seamless integration with your website, you can add your own custom stylesheet to the online booking page.

Please be aware that only colour properties are allowed inside a theme CSS file.
Changes to layout or visibility are not allowed and will be stripped from the file. 

The booking page uses the bootstrap CSS framework responsive grid along with a number of its components such as buttons, forms, labels, alerts, list groups, wells and modal dialogues.

Please refer to the bootstrap documentation for more information on the framework, its components and colour scheme. 

Each page on the online booking page consists of a number of individual components, some of which are reused throughout the application.

Each component can be targeted by its class name and colours for all elements within that component can be changed via CSS.

You use the web inspector in safari, firefox or chrome to view the elements contained within each component and target them individually via CSS.

The class name for each component is outlined below along with suggestions on how to test your changes locally before submitting them to Phorest.

Home page

mceclip0.png

 

Service category

mceclip1.png

 

Booking option requests

mceclip2.png

Booking option list

mceclip3.png

Appointment reservation

mceclip4.png

 

Appointment activation

mceclip5.png

Booking History

mceclip6.png

Misc

Header

header.header {

}

Footer

footer.footer {

}

Cart

.cart-items-modal {

}

mceclip7.png

Success alert

.alert.alert-success {

}

mceclip8.png

Warning alert

.alert.alert-warning {

}

mceclip9.png

Danger alert

.alert.alert-danger {

}

mceclip10.png

Sign in modal

.authentication-modal {

}

mceclip11.png

Service group modal

.service-group-modal {

}

mceclip12.png

Testing changes

If you would to test your CSS changes on a live page we recommend using the firefox development tools to import your locally created stylesheet thus overriding the live version.

When you're happy with the results you can submit the stylesheet to Phorest.

Importing local stylesheet via firefox development tools

1. Open the web inspector and click style editor.
2. Click the import button and locate your CSS file.
3. Your local changes should be reflected in real-time.

Starting point

Below is a boilerplate stylesheet you can use to get started

Was this article helpful?
0 out of 6 found this helpful