Divi – availability search style

[Georgian B]

Hi there,

I’m on Divi and find it hard to style the availability search.

I want to:
1. Make the check-in/out fields wider.
2. Have the adults and children selectors at the same size and style as the check-in/out fields so that they match.
3. Don’t know why but I have the old school selector style with the gray grading instead of the modern clean one.

How can I make this happen?

Here’s the website I’m working on: https://urbio.ro/acasa/

[J. Davis]

Hi Sirius,

Thanks for your question. I recommend you to install the following addon https://motopress.com/products/hotel-booking-divi-theme-integration/ It will make the plugin to inherit the design of your theme. The styles of buttons can be configured via Appearance > Customize after you install that extension.

Let me know if it is helpful.

best regards,
J. Davis

[Georgian B]

Hi J,

It was already installed. Found a piece of code in another post you did to help with the styling and used that as the basis for all the modifications I wanted to make.

For some reason it didn’t inherit the design of my theme fully. It seems that the button styling is inherited and now I’m looking for ways to style the search button itself without interfering with the other customised buttons. Can you point me in the right direction? The hover effect is the challenge.

Thank you for your answer! I somehow didn’t get notified you got back to me.

[Andre Flores]

Hello there,

You may apply the style by adding .mphb_sc_search-submit-button-wrapper class to the CSS rule as follows:

.mphb_sc_search-submit-button-wrapper .button {
 background:#000;
 border: 1px solid #000;
 color:#fff;
 padding:15px 35px;
}
.mphb_sc_search-submit-button-wrapper .button:hover{
 background:#fff;
 color:#000;
}

Change colors to any desired ones.

Best regards,
Andre

[Georgian B]

This is perfect! Thank you so much, Andre!

[Andre Flores]

You are always welcome, I am glad I could help.
It would be very much appreciated if you share your positive thoughts on the Hotel Booking plugin at: https://motopress.com/products/hotel-booking/#edd-reviews-respond.

Thank you in advance!

Best regards,
Andre Flores

[Tarek O’Neill]

Hello.

Glad I found something I was looking for. Thank you for the tip.

I am still having a little problem and it is that when I have a vertical search form and I customize the padding from the css, as the button becomes smaller (which is what I like and want to do), it stays on the left margin and I would like to have it centered in the form.

I tried “align-text: center;” and every other align suggestion on the css field. I tried centering the content from elementor and still the button does not get centered, Any fix that you can think of?

Thank you for your attention.
Regards,

Tarek O’Neill

[J. Davis]

Hi Tarek,

Thanks for your question. Could you please provide the URL of the page where I can check your form so I’ll try to help you center the button?

best regards,
John Davis

[Tarek O’Neill]

Hello John

I just realized this post is for Divi and I am working on Elementor, just wanted to tell you so maybe you won’t give me an answer I can’t apply.

The site https://simmerdown.house/ (mobile version) is where you can see the search form with dates and the button all stretched to the end of the margin, but I would like to keep the dates field stretched but the button smaller and centered.

Here is another example where you can see the same on the desktop version, I would like to make the same to the buttons on the desktop version too. https://simmerdown.house/accommodation/apartamento-san-andres/
Where it says “comprobar disponibilidad” I would like to make that button smaller and still centered.

Thank you.

[J. Davis]

Hi Tarek,

Thanks for your reply. As far as I can see the form looks exactly like you want on the Home page.
As for another page, so you may try to apply the style below:

.mphb_sc_booking_form-wrapper.mphbs-fluid-button .mphb-reserve-btn-wrapper .button {
  max-width:70%;
  margin:auto;
}

best regards,
John Davis

[Tarek O’Neill]

Thank you very much John.

Worked like a charm.

[Tarek O’Neill]

Hello John,

I just realized that when I click on the button, a new button appears that says “confirm reservation ” and that button does is not affected by the same css could you help me identifying how do I make this new button the same size?

Thank you.

Regards.
Tarek

[J. Davis]

Hi Tarek,

Thanks for your reply. Please replace the previous style with the one below:

.mphb_sc_booking_form-wrapper.mphbs-fluid-button .mphb-reserve-btn-wrapper .button, .button.mphb-button.mphb-confirm-reservation {
  width: 70%;
  margin: auto !important;
}

best regards,
John Davis

[Tarek O’Neill]

Hello John,

Thank you for your help, it all has been working as you expected.
I have one more inquiry with something similar, but this time with the search form “mphb_sc_search-form” the one that can be used to search globally on all accommodations at once. I would like to center the button and be able to change it similarly to the previous fix you gave me.

Thanks for all your help, my web page is looking much better now with your tips.

regards,
Tarek

[J. Davis]

Hi Tarek,

Thanks for your question. I’ve checked the form on the home page with a screen width similar to a mobile device and the button is centered https://prnt.sc/14gmgmMeagFc Could you please clarify your request by providing the URL of the page, screenshots, etc?

best regards,
John Davis

[Author]

Posts