Archived topic
Modify section of site (home page)
4 replies · Started by Dave on July 11, 2017
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?
Hi David,
Try using the wp_head hook: https://docs.generatepress.com/article/hooks-overview/
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. :)
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
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>