Availability Calendar Colour

  • This topic has 8 replies, 5 voices, and was last updated 6 months ago by Glen Smith.
Viewing 9 posts - 1 through 9 (of 9 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

    #1031413
    Zvonimir Matutinovic
    Participant

    Hi Andre,

    how can I change the size of the Availability Calendar so it fits my page better?

    THanks

    #1032200
    Andre Flores
    Moderator

    Hello Zvonimir,

    You may perform changes to the availability calendar via custom CSS, e.g. add the following code under Appearance ->Customize ->Additional CSS:

    .single-room-calendar-wrapper .mphb-calendar .datepick-month {
    	width: 300px !important;
    }

    Change 300px to any desired value to make months bigger.

    Regards,
    Andre

    #1545391
    Glen Smith
    Participant

    I’m using the Albatross theme. The theme uses diagonal lines for shading rather than a solid background color to mark days that are unavailable. I had complaints that the calendar was hard to read due to lack of contrast. I’m using custom css to darken the diagonal lines (dark grey – #808080). The dark lines make the calendar easier to read but it’s not “attractive”.

    I would prefer to use a solid background color rather than the diagonal lines. I like the Villagio calendar colors (#fad2d2 for available days and #d7f4c0 for unavailable days). Is it possible to use custom css to make the Albatross calendar look similar the Villagio calendar?

    #1546783
    J. Davis
    Keymaster

    Hi Glen,
    You can try to use the style below replacing the ‘red’ with the needed hex color code:

    .datepick .datepick-month table td .mphb-out-of-season-date--check-in, .datepick .datepick-month table td .mphb-out-of-season-date--check-out, .datepick .datepick-month table td .mphb-out-of-season-date, .datepick .datepick-month table td .mphb-mark-as-unavailable--check-in, .datepick .datepick-month table td .mphb-mark-as-unavailable--check-out, .datepick .datepick-month table td .mphb-mark-as-unavailable {
      background: linear-gradient(red, red 50%, red 56.25%, red 56.25%, red 100%);
    }
    #1547141
    Glen Smith
    Participant

    Hi John:

    That worked great.

    Thanks, Glen

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