Book now button won’t show

[Matt Standen]

Hi all,

I’m using Divi with the Hotel Booking plugin and I’ve set up a few accommodation types on a general accommodation page.

To match the look and feel of the site I’ve applied black backgrounds behind the various accomodations – now I can’t see the book now button (details is disabled).

I’ve tried changing the default colours in Divi to no avail.

Here is the page to view the issue:

https://theridgecamp.ca/accommodations-2/

Thanks in advance for any assistance!

[Mary Evans]

Hello Matt,

It looks like you’ve changed the colour of the Book button to black either and it merged in colour.
Add the below CSS style to Appearance > Customize > Additional CSS, in order to change the Book button’s colour:

.button {
    color: #fff;
    background: #fff;
}

Best Regards,
M. Evans

[Matt Standen]

Hi Mary,

Thanks for your reply.

I have enabled the titles as well as button text and box using the recommended CSS. Thank you…

Now I have another challenge.

After hitting the “book” button you’re redirected to the calendar – the header text on the calendar page is now white but needs to be black.

Should I be applying a custom CSS to every occurence of the accommodation type that defines the header text within that module to be white and elsewhere it will remain black?

If I’m on the right path, what CSS and CSS class should I use to accomplish this? I’m using divi to build this.

[Matt Standen]

Hi Mary,

Here is a test area that I have set up to assure consistency – you will see the issues with the text etc. in this demo.

Test Accommodation Bookings

[Mary Evans]

Hello Matt,

The Hotel Booking plugin design/layout/colours depends on your active theme.
Actually, the MotoPress Hotel Booking plugin is compatible with any theme created according to the WordPress standards. It uses the single post template of the active theme for accommodation type pages and standard CSS classes to pick up the styles of the active theme and mix in with the design.
In order to change its design/colours, you would need to add custom CSS style.
As for your case, add the below CSS style, in order to change the title colour to black:

h1.mphb-room-type-title.entry-title {
    color: #000;
}

You may get more of our assistance in CSS, with the Extended Support service.

Best Regards,
M. Evans

[Author]

Posts