Skip to main content

Working with the CSS editor for booking page layouts

When the built-in layout and branding settings aren’t enough, you can use the CSS Editor to fine-tune the appearance of your Booking Page. Custom CSS allows you to adjust spacing, colors, fonts, or even hide elements - changes that apply to your hosted Booking Page and embedded widgets.

Learn about the CSS Editor option, including step-by-step instructions on how to use the feature.

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

 

CSS editor overview

Back to top

Booking page layout settings screen highlighting the CSS editor option with an arrow labeled Edit your CSS.
You may need to adjust some elements of your Customer-facing booking page, which you cannot do 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 the system presents documents to users - how they are styled, laid out, etc.
 
 
Custom CSS editor screen with a blank input field and notice about overriding booking page elements.
The system applies any custom CSS added here to your booking portal's hosted and embedded versions.
 
Callout icon of a handheld speaker, indicating attention or announcement.

Learning more about CSS

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, consider hiring a developer to make the changes.

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

 

Callout icon of a lightbulb and speech bubble, indicating a suggested solution.

Styling the Booking Page

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

Learn more about the Booking Page Style Editor here:

 

How to use the CSS Editor

Back to top

  1. Go to Manage > Layout > Booking Page.
  2. Scroll to the CSS Editor section.
  3. Write or paste your custom CSS into the text area.
  4. Use selectors to target the elements you want to style.
    • Example: .cf-button { background-color: #007bff; }
  5. Add !important if needed to override stronger default styles.
    • Example: .cf-header-logo { display: none !important; }
  6. Click the Save button.
  7. Preview your Booking Page to confirm the changes.
  8. If needed, adjust or remove your CSS and save again.

 

Next Steps

The following article explains how to translate booking page layouts.

 

 

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

 

 

Related to