Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Modify section of site (home page)

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #347461
    David

    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?

    GeneratePress 1.3.48
    #347645
    Leo
    Staff
    Customer Support
    #347902
    David

    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. 🙂

    #347906
    David

    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

    #347983
    Tom
    Lead Developer
    Lead Developer

    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>
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.