Styling the Embedded Booking Page

Everything related to your website and the Beds24 widgets
Post Reply
arcofappalachia
Posts: 10
Joined: Fri May 01, 2015 8:30 pm

Hi Folks!

I am using an embedded booking page on my Wordpress site - you can see it here, though I have not yet put in all of the rooms: http://www.naturestewards.org/lodging-a ... sanctuary/.

I'm having some difficulty with the styling. If you check the page, you will see that the availability calendar is aligned to the very top. Ideally, I would like the Request button and pricing information BELOW the availability calendar, but they are in tables, and I do not know of a way to do this using CSS. As a second idea, I thought to align the calendar and Request button to the bottom of the page.

I tried this: without success (and also tried setting it as !important)

Code: Select all

.calendarholder {
    vertical-align: bottom;
}
I also tried these elements: .bt.calendarholder and td.bt.calendarholder, and I tried to put padding and margin on instead of using the vertical-align, also without success! Anyone have any suggestions?
annettemorgenroth
Posts: 1335
Joined: Sun Jun 30, 2013 8:44 am

This should work:

.at_conditionbut{
vertical-align: bottom;
padding-bottom: 20px !important;
}

.calendarholder {
vertical-align: bottom !important;
padding-bottom: 20px !important;
}

We are currently in closed beta for an upgraded version of the booking page. It is almost ready to use. If you want to participate in testing please send us a support ticket.
arcofappalachia
Posts: 10
Joined: Fri May 01, 2015 8:30 pm

That looks similar to what I used, and still doesn't work. I tried multiple browsers. I even tried the specific calendar number, but no style would touch it.

I'll modify my design. Maybe I will try the new beta version, thanks!
arcofappalachia
Posts: 10
Joined: Fri May 01, 2015 8:30 pm

I discovered the answer - I put the custom CSS into Settings > Booking Page > Global Design instead of trying to use my website's style sheet. Of course my style sheet won't work on something embedded! :lol:
Post Reply