Availability Calendar Colour

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #971940
    Mark Walker
    Participant

    Hi guys,

    Our Availability Calendar looks a bit Dark… It has a Black Top Banner and the word Today is in Dark Grey which does Highlight to White when hovered over, however still looks a bit glum.

    How can I change the Colours or colour Scheme for it please?

    I did find the following…

    Accommodation > Settings > General > Display Options > Calendar Theme

    And changed it from Default to the various Colours Listed but nothing changed.

    Is there something not quite working or just another way to select colours?

    Many thanks,
    Mark

    p.s: Our Campterra site is at http://www.lastminuteglampingwales.co.uk

    #973173
    Andre Flores
    Moderator

    Hello, Mark!

    Most of Hotel Booking elements colors can be changed via custom CSS.
    You may change the color of the calendar header background by adding the following code under Appearance ->Customize ->Additional CSS:

    .mphb-calendar .datepick-nav, .datepick-popup .datepick-nav {
    	background-color: #242424;
    }

    Change #242424 to any other color. You may find all the HEX color codes here.
    In order to change the “Today” text color, add the following code:

    – normal state:

    .datepick-popup a.datepick-cmd.datepick-cmd-today, .mphb-calendar a.datepick-cmd.datepick-cmd-today {
    	color: #66676d;
    }

    Replace #66676d with any desired color.

    – hover state:

    .mphb-calendar .datepick-nav a:hover, .datepick-popup .datepick-nav a:hover {
    	background-color: #242424;
    	color: #fff;
    }

    Replace #fff to any other color to change the text color, and #242424 to change background hover color (currently it matches the calendar header background color).

    Add the following code to change the navigation arrows color:

    – normal state:

    .mphb-calendar .datepick-nav a, .datepick-popup .datepick-nav a {
    	color: #9b9ca4;
    }
    .mphb-calendar .datepick-nav a.datepick-disabled, .datepick-popup .datepick-nav a.datepick-disabled {
    	color: #9b9ca4;
    }

    Replace #66676d with any desired color.

    – hover state:

    .mphb-calendar .datepick-nav a.datepick-disabled:hover, .datepick-popup .datepick-nav a.datepick-disabled:hover {
    	background-color: #242424;
    }
    .mphb-calendar .datepick-nav a:hover, .datepick-popup .datepick-nav a:hover {
    	background-color: #242424;
    	color: #fff;
    }
    .mphb-calendar .datepick-nav a:hover, .datepick-popup .datepick-nav a:hover {
    	background-color: #242424;
    	color: #fff;
    }

    Replace #fff to any other color to change the text color, and #242424 to change background hover color.

    Regards,
    Andre

    #973532
    Mark Walker
    Participant

    OK Andre,

    Thanks again for your support on this one.

    Really appreciate it.

    I’ll get on to this straightaway 👍🏻

    Regards,
    Mark

    #973664
    Andre Flores
    Moderator

    Hi, Mark!

    You are most welcome!

    Regards,
    Andre

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.