Styling your booking window

Jason

If you are using one of our extensions (Wordpress, Drupal, Joomla), you'll notice that the booking window assumes most of the CSS layout from your website.

If you'd like to further customize the layout, you can do this using your own style sheet and CSS overrides.

We'll provide better documentation for this soon, but for now, here is an example.

To change the background of the Checkfront search header, you would use:

#CF #CF_head {
background: red !important;
}

#CF #CF_tabs {
background: red !important;
}

By adding !important, you'll override any style set by Checkfront.

A full list of css elements will follow. For now, Firebug is great tool.

Cenay

Just a quick note.. I am attempting to "hide" the top element that you display on the /reserve page in my iFramed Wordpress page. I located the element #top, and added #top {display:none !important; } to my style sheet, however, it is still visible.

Sample: http://cookingwithkidsmiami.com/birthday-party

Is there someplace I have direct access to client.css or a "customization" css within Checkfront that would be called AFTER your style sheet is?

Jason

You should be using the Droplet, or CMS plugins if you want to be able to change the css.  These bring the booking window local to your site.  There is no way that I know to change the style of a remote child iframe.

If you need the updated v2.0 booking interface, the hosted page is currently the only option.  New Joomla and WP plugins are coming.

qmarie

Jason,

I want to change the client css, is this available as wordpress plugin?

Thanks,

[Deleted User]

Our team has implemented several updates and improvements to the Checkfront platform since this post was created 7 years ago.  Because we are continually updating and improving the Checkfront platform, we no longer provide support for custom CSS changes, as the codes could potentially change with updates and new releases, and no longer work as expected.   

If you would like to make CSS changes and you're not familiar with CSS you may want to visit a site such as w3Schools which is an excellent online resource for learning CSS.  Alternatively, you could consider hiring a developer to make the changes for you.

If you have any questions about this, please feel free to get in touch with our friendly support team at support@checkfront.com. We're always happy to chat!