Overriding droplet element style using CSS

I want to change the colours on the calendar at the bottom of my homepage:


I would like to change the green as well as the washed out grey that displays when a holiday isn't on that specific day. If anyone would be able to provide me with the correct accurate CSS that allows me to do this that would be great!


  • Brett_CheckfrontBrett_Checkfront Checkfront
    edited July 2018
    Hi RockandSun and maggisam,

    Thank you for reaching out on our forums!

    maggisam suggestion is correct, you can add the custom CSS into Manage > Layout > Booking Page > CSS Editor, and it will override the existing booking page styling. 

    Specifically, the rules that you will want to override for just the colours are:
    /* Unavailable dates */ 
    .cf-cal-sm .X a {
        background-color: #fff;
        color: #333;
        text-shadow: none;

    /* Soldout dates */
        .cf-cal-sm .F a {
        background: #e94b35 !important;
        color: #fff !important;

    /* Available dates */
    .cf-cal-sm a {
        background-color: #227fbb;
        color: #fff;
    The other options that maggisam has suggested can be used to modify other styling to do with your calendar, so feel free to use those to modify the padding and borders and such.

    I hope this helps, but let us know if you have any additional questions

    Checkfront Support Team
  • Thanks guys. I have already tried to edit these .cf-cal-sm a values however it won't change because it's got a predefined "element style" and it won't let me edit it? Any Ideas on how to get round this?
  • Hi RockandSun,

    Thank you for your reply!

    Just to confirm, are you entering in the CSS under Manage > Layout > Booking Page > CSS Editor, or trying to change them directly in your browser? The predefined 'Element Style' is just default styling applied to various elements, which is then overridden by CSS rules. The rules set in your Checkfront CSS editor are applied last, so they will overwrite any rule that was applied before them, with the exception of rules of higher precedence (!important flags, or more specific selectors for example).

    For a brief overview of CSS, I would recommend reading this MDN article, as it explains what CSS is and how it interacts with HTML. 

    I hope this helps, but if you have additional questions, feel free to reach out to us at support@checkfront.com and I can take a closer look for you.

    Best Regards,
    Brett - Checkfront Support Team
  • I was editing the CSS in my Wordpress customiser!!!

    Thank you!!!!
  • Thank you for sharing the CSS code above. It was useful and I used it. Might you also be able to provide a code to change the Button color and also the "title" of the product? 

  • Hi RoatanOnline,

    Thank you for reaching out on our forums!

    While we can't provide CSS support as the elements being selected are subject to change at some point in the future, something along these lines should be able to point you in the right direction. 

    /* Book Now Button */
    .cf-item-status.AVAILABLE {
        color: white;
        background: #227FBB;

    /* Item Title */
    .cf-title h2 {
        color: #227FBB;
    I hope this helps, and for more information on how to use CSS, I would recommend reading this article on MDN.

    Let me know if you have any additional questions!

    Best Regards,
    Brett - Checkfront Support Team
  • Hey there any Checkfront gurus
    I'm wanting to change the colour of the tabs in the category menu, are you able to tell me what code to insert? Thanks
Sign In or Register to comment.