Divi – availability search style

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1311705
    Georgian B
    Participant

    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/

    #1312728
    J. Davis
    Keymaster

    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

    #1317814
    Georgian B
    Participant

    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.

    #1318367
    Andre Flores
    Moderator

    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

    #1318625
    Georgian B
    Participant

    This is perfect! Thank you so much, Andre!

    #1319834
    Andre Flores
    Moderator

    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

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