Articles in this section

See more

Working with the CSS editor for booking page layouts

Learn about the CSS Editor option, including how to make custom changes to the Booking Page.

New to the Booking Page? Read the first article in this series for an introduction to the Booking Page.

 

Accessing the features mentioned in this article


Where can I find this feature using the top menu?

Manage > Layout > Booking Page

What more do I need to use this feature?

Which Checkfront version supports this feature - classic items, classic products, or both?

  • This feature is available in both our classic items version using classic items (Inventory > Items) and our classic products version using classic products (Inventory > Products).  → Learn more about products

 

Working with the CSS Editor

Back to top

Booking Page CSS
 
You may need to adjust some elements of your Customer-facing booking page, which cannot be made through simple settings in your Checkfront dashboard.

If you are familiar with CSS, you can make such changes using the CSS editor in the left sidebar. CSS is a language for specifying how documents are presented to users - how they are styled, laid out, etc.
 
CSS Editor
Any custom CSS added here is applied to your booking portal's hosted and embedded versions. Input your CSS overrides into the provided text area and click the blue Save button to record your edits.

Some elements need to be explicitly overridden, for example, button {background-color: #red !important}

Attention

If you want to make CSS changes and are unfamiliar with CSS, you may visit a site such as Mozilla.org or W3schools.com, both excellent online resources for learning CSS. Alternatively, you could consider hiring a developer to make the changes.

We do not officially provide support for custom CSS changes, as the codes could potentially change with updates and new releases and no longer work as expected.

 

Checkfront Labs

Are you looking for an easier way to style the Booking Page? Check out the Booking Page Style Editor, an experimental feature in Checkfront Labs.

Learn more about the Booking Page Style Editor here:

 

 

< Previewing your booking page layout     |     Translating booking page layouts >

 

 

Related articles