Jump to content

ChrisMahoney

Member
 View Profile  See their activity

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Everything posted by ChrisMahoney

  1. ChrisMahoney
    Hi @tuanphan, I actually managed to sort this out, with some help from ChatGPT 🙂 In case anyone in the future finds this thread useful, all I did differently from @tuanphan's instructions was to change the JavaScript code he had given me to the following: <!-- Specific button on homepage to open Google Cal Scheduler in-page booking --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#block-05bd4d554ce0a8dfe638').click(function(event) { event.preventDefault(); $('.code-block button').click(); }); }); </script> … where the text '#block-05bd4d554ce0a8dfe638' is the unique ID of the button that I wanted to call on the JavaScript code.
  2. ChrisMahoney
    If it helps @tuanphan, there's only one button on the homepage that I'd like to call on the Google Scheduler… the button's code is #block-05bd4d554ce0a8dfe638 , and it's towards the end of the page under 'Let's Collaborate'. Thanks!
  3. ChrisMahoney
    Hi @tuanphan, hope you're OK! So, I just went live with the website and I'm noticing all the buttons throughout the homepage are opening the Google Scheduler… I had thought the buttons for which we set the URL as "#google-scheduler" were the only ones to call on the JS. Could you kindly help on this? The live website is oneandthree.co.uk Thanks!
  4. ChrisMahoney
    Thanks @tuanphan, that worked great! Much appreciated!
  5. ChrisMahoney
    Hi @tuanphan 🙂 Yes when you tested it, it had the actual GG Calendar link there, sorry about that. I've now changed the link again to "#google-scheduler" instead of the GG URL, and nothing happens when I click on it. Just to be clear, I'm attaching a screenshot of the button I'm referring to, the one at the top-right corner. Regarding question 2, I can see the line again, many thanks!!
  6. ChrisMahoney
    Thanks so much @tuanphan, that worked great! I have a further two questions if that's OK… Question 1: There's a similar button for people to schedule a meeting in the Site Header, however when I updated the link to "#google-scheduler" nothing happens. Is there a way we can make it behave the same way as the other button? Question 2: I had another code block near this button, that placed a vertical line between the button and the text to the right. The code block just says : <div class="vertical-line"></div> and is then styled in CSS. This line is now hidden as well, I imagine because the Page Header Code Injection you provided is hiding all code blocks. Is there a way we could only target the code block that contains the Google Scheduler code, so that I can see the vertical line again? Site: https://grouper-fiddle-acdd.squarespace.com/ Password: abc123 Sorry for all the questions, and thanks so much for your help!
  7. ChrisMahoney
    That's exactly what I was after @tuanphan, thanks! Could you kindly provide me with the steps to implement this in my site?
  8. ChrisMahoney
    Oh goodness you're right, sorry about that @tuanphan! Here's the full code 🙂 Thanks! <!-- Google Calendar Appointment Scheduling begin --> <link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet"> <script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script> <script> (function() { var target = document.currentScript; window.addEventListener('load', function() { calendar.schedulingButton.load({ url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ1oPptLqLtSUTNOygFbIjbEveZHVBOE4wohHmzSLto9PSbioOuGAEoo6rzvMAK6GNc8En8Kddrt?gv=true', color: '#039BE5', label: 'Book an appointment', target, }); }); })(); </script> <!-- end Google Calendar Appointment Scheduling -->
  9. ChrisMahoney
    Thanks @tuanphan! Here's the code: <!-- Google Calendar Appointment Scheduling begin --> <link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet"> <script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script> Thanks!
  10. ChrisMahoney
    You're a star! It worked, thanks! I was placing the section id AFTER the media line, not before. Thanks again!
  11. ChrisMahoney
    Sorry to bother you yet again @Ziggy… that custom CSS is obviously impacting all the Gallery Grids throughout the whole website. Without success, I've tried amending the code to call on that specific Gallery Grid on the homepage only, by targeting the section, which I believe is section[data-section-id="65e875d24850196fae830a48"] or even to call on the ID of that grid, which I think is id="yui_3_17_2_1_1710174060702_540" But I'm clearly screwing up 😅 Could you very kindly help please?
  12. ChrisMahoney
    Ah yes, the !important made the whole difference!! Thanks @Ziggy!!
  13. ChrisMahoney
    Thanks so much @tuanphan! That worked great! The only thing that still bothered me was that Squarespace's default 'darkening' of the button on hover was still there, but I just added the line: opacity:1!important; at the end of the code and now it looks exactly the way I want it. Here's the code below: a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover { background-color: #f1f !important; border-color: #f1f !important; color: #000 !important; opacity:1!important; } Thanks again @tuanphan, much appreciated!
  14. ChrisMahoney
    Thanks @Ziggy, however unfortunately it doesn't seem to have impacted anything. I tried going for 20vw so that any change is really noticeable, but it still looks the same. I also cleared the cache but nothing changed either.
  15. ChrisMahoney
    Hi @tuanphan, thanks for your reply! Yes I would love it if you could guide me to make the Google Schedule popup appear when clicking the Button Block 🙂 I think I found your other thread about this, but I couldn't find a guide or code. From my end, I would only wish the popup to appear on click and not on hover. Thanks @tuanphan!
  16. ChrisMahoney
    It has worked great, thanks so much for that @Ziggy! I know I might be stretching my luck but is there a way to add spacing between the columns on mobile? Thanks!
  17. ChrisMahoney
    Hi @Ziggy thanks for all your support to so many members! If I may, I have a similar problem with my site… I have a Simple List Gallery that I'm using to showcase client logos. I set it up for desktop, it's 6 columns by 2 rows, with a gap of 80, which looks neat on desktop. However on mobile the grid drops to 2 columns and the logos look huge! I wish to insert CSS so that I have control over the number of columns and perhaps even have control over the gap between the logo images. Could you kindly help with that? Site: https://grouper-fiddle-acdd.squarespace.com/ Password: ZxsZ9YW7Y5tUhCU Thanks in advance!
  18. ChrisMahoney
    Hi, I'm looking for more control over the Carousel List buttons when I hover onto them, as it seems that by default they just get slightly darker. I'd like to change the button colour and text colour mainly. When not on hover, the button's background is set to 0% opacity and the text is a specific light-green colour. The idea is to have a 100% filled light-green background and black text on hover. Site: https://grouper-fiddle-acdd.squarespace.com/ Password: ZxsZ9YW7Y5tUhCU Thanks!
  19. ChrisMahoney
    Hi! I'm trying to modify the styling of a Google Calendar button I've embedded into my site through a script. This button is for Google Calendar's 'single booking page', 'Button with popup' code. I've attached images of both the Google Calendar 'Website embed' page, as well as the style of the button on my website. I'm new to CSS so I don't know how to call on that specific button. I'd wish to have control over button padding, radius of corners, font, font size, font colour, and button hover colour. Site: https://grouper-fiddle-acdd.squarespace.com/ Password: ZxsZ9YW7Y5tUhCU Any help is much appreciated! Thanks!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources