Feature request: Shading or Different Colors for Imported Bookings

[Ryan Labelle]

Hello! I have a feature request relating to Admin > Bookings Calendar: Shading or Different Colors for Imported Bookings

For all imported bookings, could we show the source of the booking (say, Airbnb or VRBO) in the booking block metadata display, and shade the booking block to differentiate them from MotoPress bookings? Could we follow the Airbnb practice of showing the source of the imported booking and using diagonal shading to differentiate them from native MotoPress bookings?

Thanks for your consideration.

Update: It looks like you already have a request for this.

Airbnb iCal ICS sync issue

[Andre Flores]

Hello, Ryan!

Yes, such feature request already exists, I will gladly add your vote to it as well. If anybody else needs this feature, feel free to let me know by commenting this thread.

Regards,
Andre

[Ryan Labelle]

Awesome. Thanks!

[Andre Flores]

Hi, Ryan!

You are most welcome.
I will contact you via e-mail once there is any update.

Regards,
Andre

[Ryan Labelle]

Awesome.

[soledad Fernandez]

Hola! Adhiero a la solicitud de Ryan, los sombreados o colores son necesarios para identificar el origen. Me gustaría estar al tanto si surge una actualización. Gracias!

[Andre Flores]

Hi there!

Thanks for your up-vote, it has been taking into account.

Regards,
Andre

[Thomas Kolnowski]

Hello, Andre and MotoPress team. Please add us to the up-vote list. We are doing some of this with custom CSS, but having the option built into MotoPress Hotel Booking would be great.

Thomas Kolnowski
Digitized House Media, LLC

[Andre Flores]

Hi, Thomas!

Done! Your up-vote has been counted. Meanwhile, you may share your custom CSS workaround with other users, it may be useful to them 😉

Regards,
Andre

[Thomas Kolnowski]

Hi, Andre and team. Here is the custom CSS we are using to help style the calendar. We are synching with Airbnb and Glamping Hub currently. Here is what it looks like:

I hope this helps others in the community.

First, set the Calendar column width to 45px.

/* Set Admin Calendar Column width tp 45px (standard is 15px)
*/

.mphb-bookings-calendar-wrapper table.mphb-bookings-date-table td {
    min-width: 45px;
}

Give Bookings Some Room to Breathe

/* Style All Bookings to Indent Text */ 

.mphb-bookings-calendar-wrapper table.mphb-bookings-date-table > tbody > tr > td .mphb-link-to-booking {
    left: 3px;
  word-wrap: normal;
}

Now, Style All Bookings Based on MotoPress vs. OTA, Coloring the Cell Background and Text, and Adding Descriptive Text

/* Style MotoPress Bookings */ 

.mphb-date-second-part[title~="Adults:"] .mphb-link-to-booking::after {
  content: '\00A0'"[Web]";
}

/* Style Airbnb (Not Available) Bookings */ 

.mphb-date-first-part[title~="(Not"] {
	background: #FFFFFF !important;
}

.mphb-date-second-part[title~="(Not"] {
  background:  #FFA07A !important;
}

.mphb-date-second-part[title~="(Not"] .mphb-link-to-booking::after {
  content: '\00A0'"[Block]";
}

.mphb-date-check-out-booked[title~="(Not"] {
	background:  #FFA07A !important;
}

.mphb-date-booked[title~="(Not"] {
	background:  #FFA07A !important;
}

.mphb-date-second-part[title~="(Not"] {
  background:  #FFA07A !important;
}

/* Style Airbnb Bookings */ 

.mphb-date-second-part[title~="(Last"] {
	background:  #008389 !important;
}

.mphb-date-second-part[title~="(Last"] .mphb-link-to-booking {
   color: #FFFFFF;
}

.mphb-date-second-part[title~="(Last"] .mphb-link-to-booking::after {
  content: '\00A0'"[Airbnb]";  color: #FFFFFF;
}

.mphb-date-booked[title~="(Last"] {
	background:  #008389 !important;
}

.mphb-date-check-out-booked[title~="(Last"] {
	background:  #008389 !important;
}

/* Style Glamping Hub Bookings */ 

.mphb-date-second-part[title~="CHECKOUT:"] {
	background:  #005654 !important;
}

.mphb-date-second-part[title~="CHECKOUT:"] .mphb-link-to-booking {
   color: #FFFFFF;
}

.mphb-date-second-part[title~="CHECKOUT:"] .mphb-link-to-booking::after {
  content: '\00A0'"[Gl.Hub]"; color: #FFFFFF;
}

.mphb-date-booked[title~="CHECKOUT:"] {
	background:  #005654 !important;
}

.mphb-date-check-out-booked[title~="CHECKOUT:"] {
	background:  #005654 !important;
}

/* Style Glamping Hub Blocked Days Bookings */ 

.mphb-date-second-part[title*="Blocked days -"] {
	background:  #005654 !important;
}

.mphb-date-second-part[title*="Blocked days -"] .mphb-link-to-booking {
   color: #FFFFFF;
}

.mphb-date-second-part[title*="Blocked days -"] .mphb-link-to-booking::after {
  content: '\00A0'"[Block]"; color: #FFFFFF;
}

.mphb-date-booked[title*="Blocked days -"] {
	background:  #005654 !important;
}

.mphb-date-check-out-booked[title*="Blocked days -"] {
	background:  #005654 !important;
}

[Andre Flores]

Hello, Thomas!

Thank you for sharing your insights, it is much appreciated! I am sure this will be very useful to other users.

Regards,
Andre

[S Squared]

Hi Guys,
Where abouts do we add this CSS? Which CSS file and in parent or child theme?
Thanks in advance

[Andre Flores]

Hello there,

You may added the code right under Appearance ->Customize ->Additional CSS tab. If you prefer to use child theme, you may also add the code to any .css file under your child theme.

Regards,
Andre

[Ryan Labelle]

Thank you Thomas! That’s very generous of you.

[Thomas Kolnowski]

Happy to assist with moving the community forward, Ryan. This CSS has helped our client immensely differentiate between bookings from the various OTAs. The other thing it does is clearly flag those problematic Airbnb “not available” bookings that can come in during iCal synchs.

Thomas Kolnowski
Digitized House Media, LLC

[Author]

Posts