booking 4.4.2 – Elementor – display price – unusable

[eric Brabants]

Displaying prices is interesting, but the results are unusable – at least on my website

[J. Davis]

He Eric,

Thanks for your question. The Booklium theme has not been adapted to a new feature yet. Meanwhile, you may try adding the style below at Appearance > Customize > Additional CSS:

.mphb-calendar span.mphb-price {
    z-index: 1;
}

.datepick .datepick-month td span{
    height:auto;
    line-height:1.75;
}

Let me know if it is helpful.

best regards,
John Davis

[eric Brabants]

It works

Not as pretty as I hoped, but functional and useful.

Thanks
Eric

[J. Davis]

Hi Eric,

You are welcome. I’d recommend you show the currency symbol next to the price. There is such an option at Accommodation > Settings.
Could you specify how you’d like to show the price on the date cells? Perhaps I’ll be able to adjust it with CSS for you.

best regards,
John Davis

[eric Brabants]

using the same method, I “customized” the code like so:

.mphb-calendar .datepick-month td span .mphb-date-cell__price{
color:#808080;
}

You can see the result : https://gite-la-croix-liaud.fr/gite-3/

[eric Brabants]

I would have liked to change the hatching (linear gradient) to red for the reserved days (instead of the current grey).
But for now, that seems much more complicated to me

-:)

[J. Davis]

Hi Eric,

You may try to apply the following style:

.datepick .datepick-month td span.mphb-past-date, .datepick .datepick-month td span.mphb-booked-date, .datepick .datepick-month td span.mphb-booked-date.mphb-date-check-in.mphb-date-check-out {
  color: #000;
  opacity: 1;
  border: 1px solid #fff;
  background: -webkit-repeating-linear-gradient(135deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
  background: -o-repeating-linear-gradient(135deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
}

.datepick .datepick-month td span.mphb-date-check-in.mphb-booked-date, .datepick .datepick-month td span.mphb-available-date.mphb-date-check-out {
  background: -webkit-repeating-linear-gradient(135deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
  background: -o-repeating-linear-gradient(135deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, #EE4B2B 5px, #EE4B2B 6px);
}

best regards,
John Davis

[eric Brabants]

Hi john

Thanks for the CSS

I applied it by changing the value of red (a bit softer).
Between the price display and the color management, I am fully satisfied with the calendar

You can see the result on the website (bottom of the page): https://gite-la-croix-liaud.fr/le_studio/

Once again, thank you very much for your involvement

Sincerely

Eric Brabants

[J. Davis]

Hi Eric,

You are welcome. We have released an update version with adjusted styles. It would help us much of you review the Booklium theme https://motopress.com/products/booklium/#reviews

best regards,
John Davis

[Author]

Posts