Styling your booking window

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.
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.
This discussion has been closed.
Comments
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?
If you need the updated v2.0 booking interface, the hosted page is currently the only option. New Joomla and WP plugins are coming.
I want to change the client css, is this available as wordpress plugin?
Thanks,
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!