Feature request: Shading or Different Colors for Imported Bookings

Free and Premium WordPress Plugins & Themes Forums WordPress Plugins Hotel Booking Feature request: Shading or Different Colors for Imported Bookings

  • This topic has 25 replies, 10 voices, and was last updated 1 month ago by Jose Antonio Alamo Rodriguez.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #943990
    Ryan Labelle
    Participant

    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

    #945189
    Andre Flores
    Moderator

    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

    #945272
    Ryan Labelle
    Participant

    Awesome. Thanks!

    #945663
    Andre Flores
    Moderator

    Hi, Ryan!

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

    Regards,
    Andre

    #945777
    Ryan Labelle
    Participant

    Awesome.

    #946082
    soledad Fernandez
    Participant

    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!

    #946098
    Andre Flores
    Moderator

    Hi there!

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

    Regards,
    Andre

    #946202
    Thomas Kolnowski
    Participant

    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

    #947235
    Andre Flores
    Moderator

    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

    #951985
    Thomas Kolnowski
    Participant

    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:

    Screen Shot 2020-05-09 at 12.49.53 PM

    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;
    }
    
    #952986
    Andre Flores
    Moderator

    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

    #992273
    S Squared
    Participant

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

    #992372
    Andre Flores
    Moderator

    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

    #992647
    Ryan Labelle
    Participant

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

    #992661
    Thomas Kolnowski
    Participant

    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

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