How to change Colour of category tab



1 comment

  • Avatar

    Hi Sam,
    While we do not officially provide CSS support, there is some basic CSS you can use to help make your category tabs a bit more clear:

    /*inactive tab colors*/
    #cf-tabs a { 
        background-color: pink;
        color: white;
    /*active tab colors*/
    #cf-tabs.nav-pills>>a { 
        background-color: yellow !important;
        color: black !important;
    /*hovered tabs*/
    #cf-tabs a:hover, #cf-tabs.nav-pills>>a:hover { 
        background-color: aqua !important;
        color: black !important;

    This code can be input under Manage > Layout > </> CSS Editor to apply to your customer booking page. These cover inactive, active, and hovered tabs in that order. Ugly colours are used purposefully here to make it easier to see what section covers what tab state, and to make sure you remember to change them. ;)
    We cannot guarantee that this will cover all use cases or work with all existing custom CSS, and future updates to Checkfront may require adjustments to make this work. I recommend playing around with them and seeing what works best with your brand.
    I hope you have a great day!

    Comment actions Permalink

Please sign in to leave a comment.