lamdra

I'm using a custom font on my site and when I use the highlight feature, the highlight appears dropped a few pixels. Is there a way to align it with the text so they are centered vertically? Move the text up/down or move the highlight up/down? I tried a position shift on the h tag but the highlight moves with it. I'm not sure if it's because of the custom font or not but maybe there's a work around to get it to line up again? thanks for any suggestions. https://www.jaguarbolera.com https://www.jaguarbolera.com/about

The only other code what is in the site header currently which is this: <link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.css"> <link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-reminder.css"> <script defer src="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.js"></script> <script> document.addEventListener("DOMContentLoaded", (event) => { window.clockPmsWbeInit({ wbeBaseUrl: "https://sky-us1.clock-software.com/spa/pms-wbe/#/hotel/14492", defaultMode: "standard", roundedCorners: true, language: null, }); document.querySelectorAll("[data-clock-pms-wbe-form]").forEach((form) => { form.addEventListener("submit", (e) => { e.preventDefault(); const formData = new FormData(e.target); window.clockPmsWbeShow({ arrival: formData.get("arrival"), departure: formData.get("departure"), // adults: ..., // Optional. Default value if omitted: 2. Expects an integer or null. // children: ..., // Optional. Default value if omitted: 0. Expects an integer or null. // childrenAges: ..., // Optional. Default value if omitted: []. Expects an array of integers. Example: [5, 8] bonusCode: formData.get("bonusCode"), companyCode: formData.get("companyCode"), blockCode: formData.get("blockCode"), roomTypeIds: [], rateIds: [], submit: true, }); }); }); }); </script> Then the code block is for the buttons only: <button type = "button" data-clock-pms-wbe-button> BOOK NOW </button> Do I need to add more code into the header button?

Got it. Duplicate site is setup with the code you gave inserted into header. https://bluebird-dragonfly-f23h.squarespace.com/ password: french You'll see that the BOOK NOW buttons throughout the site are able to call the booking integration. But the one we just put in the header does not. Thanks again.

Hi @tuanphan the code worked to replace the header button, however the button doesn't do anything currently. I can't leave it up there since I need the button to work and the site is live. Is there a different approach? It also leaves a border around the burger nav on mobile. See below. Lastly, the custom font is not displaying in Safari. Is there a reason for that? See below for "book now" button font. Thanks again.

Awesome @tuanphan, this is working but still hoping to tweak it a little bit. I'm setting the font to the same settings but it appears heavier than the site setting. this is my font styling in the code vs squarespace font-family: rigid square; font-size: .75rem; font-weight: 700 !important; letter-spacing: .15em !important; padding: 12px 20px !important; } I'd also like to know a couple more things... - How can I center the button in the code block? - Is it possible to use this code in the header button so that the checkout opens within the site like this button does? Thanks for all your help as always!

@tuanphan were you able to take a look? Appreciate the help. Thanks.

of course, thought I had, but here it is. https://www.thefrenchmenhotel.com

Hi all, tyring to make a code block button that pulls content from code injection in the header to look like the rest of my standard buttons. But I'm unable (unaware of how) to style that code to change the look of this button. This is integrating code from Clock PMS for hotel management software. The button works. Just can't target it to style. Would appreciate any and all help here. THANKS. See below: the "book now" button is the default. The "view all rooms" button is the goal. Buttons are just above the footer currently.

I recently launched this 7.1 site to replace the older 7.0 site. Everything was working fine until I connected the domain. Once the site went live the color behind the header disappeared (along with the button in the header) and the footer is missing. I can see the footer when I edit. If I edit the header I can toggle to another setting and then go back to solid. The header looks right and when I save it disappears again. Viewing the site in safe mode also doesn't solve it. I pulled out all Custom CSS code and hit save. No change so I put it back. I pulled out all header code injection (it's all Tock integration related) and hit save, also no change so I put it back. If anyone can help with this I'd greatly appreciate it. URL: feedery.com screen cap below of the white header (incorrect) and the color header (correct before I hit save)

That took care of both issues. Thanks so much!

Another issue I'm running into is that if I add this tock widget code to a section in the middle of the page the popup calendar is hidden by the section that comes after. Is there a way to fix this? https://foodery.squarespace.com/menus

That worked perfectly, thanks! On mobile, though I see a white border to the "book now" button. Is there a way to remove that?

@tuanphan I'm using this same CSS on my site build but doesn't seem to be working. Can you take a look? https://foodery.squarespace.com password: foodery /* Book now button */ .TockInlineButton>div { background-color: #C49A6C !important; } div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton span { color: #fff !important; text-transform: uppercase; font-weight: 600; } I'll attach what I'd like it to look like. Thanks!

That did it. Thanks for all the help!

This is what I got from Customer Care. Not a ton of guidance but I started limiting the edits In the code to as little as possible and it now seems to be cooperating. If anyone runs into this same issue I'll include my final CSS below for the scrolling block. Updates to the platform can cause a site's custom code to behave differently or break. This means custom code can interfere with your site's behavior or stop working at any time, even if it previously worked or wasn't interfering. Because of this, we can't ensure that any custom code will be compatible with the platform. To learn more, visit our guide: https://support.squarespace.com/hc/articles/205815928 As a troubleshooting step, you may want to consider removing the custom code, saving the changes, deleting the scrolling block, then adding a new one. I hope that you find the above information helpful. Please let us know if you need additional assistance - we're here 24/7 and always happy to help. /* Scrolling Block Adjust */ div.marquee-block * { font-family: 'atrament-web' !important; font-weight: 500 !important; padding-top: 1px !important; } Like I said, kept it pretty basic and it seems to working for now.