[Support request] Modify section of site (home page)

[Dave]

I use a 3rd party booking system for our business. In order to use a custom date picker they provide, I’m supposed to add some code inside the head section of my site.

Here is what I was given:

Place in head section------
<style>
#ReservationsOnline_DatePicker {display:none;visibility:hidden;}
#ReservationsOnline_DatePicker {width:260px;font-size:22px;color:#000000;line-height:26px;}
#ReservationsOnline_DatePicker input {font-size:22px;color:#000000;text-align:right;}
#titleText {font-size:23px;font-weight:bold;text-transform: uppercase;text-align:right;}
#arrivalDate {width:120px;}
#lengthOfStay {width:32px;}
#check_availability {margin-top:3px;float:right;}
#calContainer {font-size:18px;color:#000000;line-height:20px;}
#ReservationsOnline_DatePicker {background-color:#f1f1f1;height:130px;border:1px solid #999999;padding:10px;border-radius:15px;}
</style>

Place in body section------
<div id="ReservationsOnline_DatePicker">
<a href="https://reserve.reservationsonline.com/bookings/resbook.asp?memberid=carefreecabins">Check Availability</a>
</div>
<script src="http://www2.reservationsonline.com/snippet/swriter.asp?memberid=carefreecabins&titleText=Check+Availability&buttonText=Search+Now&buttonUrl=&pickWeekend=no&calendarImage=0&fMamma=no"></script>

What’s the best way to do that with the GPP theme so I don’t mess anything up?

[Leo]

Hi David,

Try using the wp_head hook: https://docs.generatepress.com/article/hooks-overview/

[Dave]

I did try it in wp_head last evening before posting here, and I couldn’t get it to work. I’ll play around with it a bit more. I’m a bit of a noob with all this, so it’s trial & error for me right now. 🙂

[Dave]

Probably a dump question, but should I be removing the # on the front of each line in the <style> section? For some reason, that just looks like a comment to me. LOL

[Tom]

You could add this into your custom CSS:

#ReservationsOnline_DatePicker {display:none;visibility:hidden;}
#ReservationsOnline_DatePicker {width:260px;font-size:22px;color:#000000;line-height:26px;}
#ReservationsOnline_DatePicker input {font-size:22px;color:#000000;text-align:right;}
#titleText {font-size:23px;font-weight:bold;text-transform: uppercase;text-align:right;}
#arrivalDate {width:120px;}
#lengthOfStay {width:32px;}
#check_availability {margin-top:3px;float:right;}
#calContainer {font-size:18px;color:#000000;line-height:20px;}
#ReservationsOnline_DatePicker {background-color:#f1f1f1;height:130px;border:1px solid #999999;padding:10px;border-radius:15px;}

Adding CSS: https://docs.generatepress.com/article/adding-css/

And this into one of your header hooks in GP Hooks (if you want it in the header):

<div id="ReservationsOnline_DatePicker">
<a href="https://reserve.reservationsonline.com/bookings/resbook.asp?memberid=carefreecabins">Check Availability</a>
</div>
<script src="http://www2.reservationsonline.com/snippet/swriter.asp?memberid=carefreecabins&titleText=Check+Availability&buttonText=Search+Now&buttonUrl=&pickWeekend=no&calendarImage=0&fMamma=no"></script>

[Author]

Posts