How to define your own colors and styles using your own stylesheet (Advanced)

If none of the built-in themes matches your website you can define the styles in your own stylesheet.  See steps below.

Important! Creating your own theme requires working knowledge of HTML and CSS.

Step 1 - Download existing CSS files

Download the following CSS files from WebReserv:

 Main CSS file:

Theme CSS file:

Step 2 - Modify the CSS file

When the booking calendar loads, it will first include the main booking calendar CSS file followed by the theme CSS file. You can override as few or as many styles in the theme CSS file as you want.

Use your favorite editor to modify the theme-blank.css files. It includes a few basic style changes. If you want to override more styles, you can find the original style definition in the main CSS file.

We recommend using Firefox and Firebug to test out color combinations.

Step 3 - Test CSS file

To test the CSS file, include the parameter &css=[path_to_css] in the URL to the booking calendar. Copy and paste the booking calendar directly into your browser such as[your_business_id]&css=[path_to_css_file].


Not all browsers allow you to use a local file as shown in the example above. If your browser does not allow you to access a local file, you will need to upload the CSS file to a public website such as your own website and then point the CSS parameter to that website.


Step 4 - Send to WebReserv (optional)

When you are done developing the CSS, you can either store in your own website or you can send it to WebReserv support to have it stored on our secure servers. The latter option is preferred if you do not have an SSL certificate for your website as browsers otherwise will show a security warning or may not show the customized theme at all.