Availability Calendar Colour

[Mark Walker]

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

[Andre Flores]

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

[Mark Walker]

OK Andre,

Thanks again for your support on this one.

Really appreciate it.

I’ll get on to this straightaway 👍🏻

Regards,
Mark

[Andre Flores]

Hi, Mark!

You are most welcome!

Regards,
Andre

[Zvonimir Matutinovic]

Hi Andre,

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

THanks

[Andre Flores]

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

[Glen Smith]

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?

[J. Davis]

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%);
}

[Glen Smith]

Hi John:

That worked great.

Thanks, Glen

[Author]

Posts