Booking Form Styling & Availability Calendar Legend

[Joe]

Hi MotoTeam,

I am completing a site for a friend and am using your booking plugin with Sterling theme. http://ellefreemanfoundation.com/pandanusmissionbeach/

Love the fact that all of the most common requests were already here in the forums with clear solutions.

She desired on her site, and I have followed most of them ; Full width pages, No sidebar, Horizontal Availability Search, Removed “Children”, Replaced “Adults” with “Guests”, Individual Calendars etc.

I also added some (perhaps dodgy) css to a couple areas with no apparent problems (*keeps fingers crossed).
Buttons – hover & colour
Search Form & Search Results – attempting to tidy up to remove/reduce empty space’s. (still not 100% happy)

I do have a couple further questions… and probably a couple more to come.

The code offered in a previous thread regarding Horizontal Search Availability layout also cleaned up 2 empty blue box’s, one above and below the search function… and also removed the blue background of the search function area.
With a couple css adds from me, Fantastic ! … nice and clean (*fingers still crossed).

A) How can the same clean result be obtained on the Booking Form ?
also
B) Is there a way to show visitors the Legend of the Availability Calendars ?

Have supplied all added css for your information.

Thank you
Joe

.one_third {background-color: mintcream;}

.one_fourth {background-color: mintcream;}

p {color: #000}

blockquote {color:#000}

@media (min-width: 1024px) {
.custom-form-horizontal-layout .mphb-required-fields-tip{
display:inherit;}	
.custom-form-horizontal-layout p{display:inline-block;width:auto;}}

.mphb_sc_search-children,
.mphb_widget_search-children,
.mphb-room-type-children-capacity,
.mphb-check-children-date-wrapper{display:none !important;}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb_sc_search_results-info {margin-bottom:0;}

.mphb-book-button { background:#FFCE43;
	height:40px;width:150px;}

.mphb-book-button:hover {background: #FF8C1D}

.button { background:#FFCE43;
	height:40px;width:150px;}

.button:hover {background: #FF8C1D}

.mphb-reserve-btn { background:#FFCE43;
	height:40px;width:150px;}

.mphb-reserve-btn:hover {background: #FF8C1D}

.mphb_sc_search-adults select{
	color:#808080;
	height:40px;
	padding:0px;
	width:60px;
}
article {
	font-size: 13px;
	margin-bottom: 100px;
	width: 960px;
}

.mphb_sc_search-form  br {display:none;}

.mphb_sc_search_results-wrapper .mphb-reservation-cart {margin-bottom: 0;}

.mphb_sc_search_results-wrapper .mphb-reservation-cart br {display:none;}

.mphb-rooms-quantity-wrapper  {display:none;}

[J. Davis]

Hi Joe,

Thank you for your feedback and questions.

1. If you mean reservation from on single accommodation page then you can add its classes to existing styles separating it with coma e.g.:

.custom-form-horizontal-layout 
.mphb-required-fields-tip, 
.single-mphb_room_type .mphb-booking-form
 .mphb-required-fields-tip{
   display:inherit;
}	

and

.custom-form-horizontal-layout p
, .single-mphb_room_type
 .mphb-booking-form p{
   display:inline-block;width:auto;
}

2. You can use filter to add some information after the calendar e.g.

add_filter('mphb_render_single_room_type_after_calendar','add_legend_mphb_render_single_room_type_after_calendar');
	function add_legend_mphb_render_single_room_type_after_calendar(){
	echo '<div class="legend-wrapper">
	<p>Current Date - <span class="current-date-class">1</span></p>	
	</div>';
}

Or you can override templates of plugin by copying files from plugin folder to theme one and editing them there. For example you can copy calendar.php file from directory

\wp-content\plugins\motopress-hotel-booking\templates\single-room-type\

and paste it to

\wp-content\themes\your-theme-folder\hotel-booking\single-room-type\

and then open the copied file and add your information there. This copied and edited file will override default plugin located in plugin folder.

For users who need our personal assistance it is possible to get Extended Support offer.

best regards,
John

[Joe]

Hi John,

Thank you for your prompt reply.

I was actually referring to the main booking/checkout form, but desire all forms to look the same.
What are the forms classes please.
I believe this is one –
.mphb_sc_checkout-form
Are there others ?

Thank you
Joe

[J. Davis]

Hi Joe,

Do you mean the form on the checkout page with first and last names, Notes, etc? Could you specify whether you need to style the form or its fields? What changes you would like to apply?

best regards,
John

[Joe]

Hi John,

Sorry for my delayed reply.

Yes, I was referring to the checkout page.

Not being very great at styling/coding and/or terminology, I would have to describe it like this…

The layout being only one column means it displays poorly on PC and is very long on a mobile device… I could not zoom out enough on my PC to fit the complete form in 1 screenshot.

Combine that with what visually appears to be a triple line spacing to every line content, makes the form even longer still on mobile… and makes for a very open, empty & blank look and feel on PC.
http://pandanusmissionbeach.com/wp-content/uploads/Booking-page02.png

Also, the email content field box is smaller than every other field box making it look odd and difficult to view long email addresses.
http://pandanusmissionbeach.com/wp-content/uploads/Booking-page03.png

Over all, am just looking for a clean, tight and compact form.
The capacity to change the background colour from a blue to mintcream would be nice.

Looking back at the Calendar Legend request… I am just wanting to display directly under the calendars, the 2 coloured squares and text – “Available” & “Unavailable”… so clients can tell what ‘pink’ means and what ‘green’ means… like is displayed in the admin section booking calendar.

Thank you
Joe

[J. Davis]

Hi Joe,

Thank you for your reply and for provided screenshot. You can adjust styling of booking confirmation page by editing CSS styles applying your attributes and custom values.
However I’ve checked your site and booking confirmation page and it looks like you wrapped shortcode into code tag or copied it with formatting. Please try to go to edit booking page, switch to text mode and clear HTML tags that wrap shortcode.

Referring to screenshot you added it is not possible to break form apart and move one of its parts. But you can move whole form by means of CSS.Thus it is possible to place form as one more column on desktop devices and laptops.

As for the calendar legend so you can use the snippet I sent in previous reply to learn how to add custom information after the calendar.
You can order extended support offer to get our assistance to modify layout of booking confirmation page and add legend below the calendars

best regards,
John

[Joe]

Hi John,

Thank you for your reply and keen eyes.

You were correct, the booking page shortcode was wrapped turning it blue and creating some extra space top and bottom.
It does look a bit cleaner, thank you.

OK, I’ll have to read/learn more about css then, it just looks so over spaced and unfinished to me.

Thank you
Joe

[Author]

Posts