Free Trial Signup

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.

 

What plan do I need to use this feature?

✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise  | ✓ Flex |

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, new or both?

  • The Booking Page feature is available to both those using items (Inventory > Items), a key feature of our classic version of Checkfront, and those using products (Inventory > Products), a key feature of our newest version of Checkfront.

 

Products

New to Checkfront - Products ✨

Products (Inventory > Products) is the successor feature to (Inventory > Items) and is available in our newest version of Checkfront.

Not yet on our newest version and interested in upgrading? Please reach out to our Technical Support team for more information.

Discover more product-related help articles here: Products (New).

 

Working with the CSS Editor

Back to top

 
354035_-_loud_loudspeaker_megaphone_music_speak_speaker_vol.png

If you want to make CSS changes and are unfamiliar with CSS, you may want to visit a site such as Mozilla.org, which is an excellent online resource for learning CSS. Alternatively, you could consider hiring a developer to make the changes for you.

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.

 

 
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 Editor
Any custom CSS added here is applied to both the hosted and embedded versions of your booking portal. Input your CSS overrides into the text area provided and click on the blue Save button to record your edits.

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

 

 

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

 

 

Related articles