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

On 12/8/2023 at 2:17 AM, tuanphan said:

Do you have full code of the software? I think we need to add both button code + other code to header.

Or you have code in Code Block only?

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?

4 hours ago, tuanphan said:

You can duplicate the site & keep code there, we can check it easier

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.

On 12/2/2023 at 8:14 PM, tuanphan said:

#1. Add this code under

div.code-block {
    text-align: center;
}

#2. Add this code to Website Tools (under Not Linked) > Code Injection > Footer

Note: DO NOT add to Custom CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<button type="button" data-clock-pms-wbe-button=""> BOOK NOW </button>').insertAfter('header#header a.btn');
});
</script>
<style>
  header#header button {
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    background-color: transparent !important;
    color: var(--primaryButtonBackgroundColor) !important;
    font-family: rigid square;
    font-size: .75rem;
    font-family: rigid square;
    font-size: .75rem;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    padding: 12px 20px !important;
}
  a.btn {
  display: none !important;
  }
</style>

 

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!

On 11/19/2023 at 11:50 AM, lamdra said:

of course, thought I had, but here it is. 

https://www.thefrenchmenhotel.com

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

On 11/18/2023 at 1:17 AM, tuanphan said:

Can you share link to this page? We can help you style it easier

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)

12 minutes ago, tuanphan said:

Add to Design > Custom CSS

[data-section-id="636a9049374b4f3a54c18d2c"] {
    z-index: 10;
}
div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton-container {
    border-color: transparent !important;
}

 

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

14 hours ago, tuanphan said:

Just tested here, the code should work. Try adding this to Settings > Advanced > Code Injection > Header (DO NOT ADD TO CUSTOM CSS)

<style>
  /* Book now button */
.TockInlineButton>div {
    background-color: #c59014 !important;
}
div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton span {
    color: black !important;
    text-transform: uppercase;
    font-weight: 600;
}
</style>

 

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

On 6/19/2021 at 2:45 AM, tuanphan said:

Add to Design > Custom CSS

/* Book now button */
.TockInlineButton>div {
    background-color: #c59014 !important;
}
div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton span {
    color: black !important;
    text-transform: uppercase;
    font-weight: 600;
}

 

@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!

9 minutes ago, tuanphan said:

It worked, however, see this screenshot

Try adding this to reduce height of menu items

.header-nav-item.header-nav-item--collection {
    line-height: 1;
}

 

That did it. Thanks for all the help!

9 hours ago, lamdra said:

When I hit that link the "/safe" piece just gets reset to the "/config" so I'm not sure I'm able to access whatever's there. It still has the issue so I'll reach out to customer care. Thanks for looking into it.

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.

17 hours ago, tuanphan said:

Use this new code

.header-title-nav-wrapper {
    align-items: flex-start;
}
.header-display-desktop {
    align-items: flex-start;
}

 

That definitely worked to bump both the nav and social links up but they moved to different positions. Any way to keep them aligned? See below

16 hours ago, tuanphan said:

Try access this link & try again

https://yampa-icehouse.squarespace.com/config/safe

If problem still appears, I think you should contact Squarespace Customer Care

When I hit that link the "/safe" piece just gets reset to the "/config" so I'm not sure I'm able to access whatever's there. It still has the issue so I'll reach out to customer care. Thanks for looking into it.

16 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62bf411d5f0d75795dcecb37 .span-6:last-child {
    padding-left: 6vw;
    padding-right: 6vw;
}
}

 

Perfect, thank you!!

On 7/2/2022 at 9:07 PM, tuanphan said:

Edit this code

section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}

to this

@media screen and (min-width:992px) {
section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}
}

 

Thanks but I still want to keep the image and scrolling block full width. Any way to adjust that text box and button independently?

On 7/2/2022 at 9:06 PM, tuanphan said:

Hi,

Try remove Marquee block then add it again

Unfortunately, no change. 

On 7/2/2022 at 9:02 PM, tuanphan said:

Add to Design > Custom CSS

.header-title-nav-wrapper {
    align-items: flex-start;
}

 

Thanks! That worked great for the navigation but not the social links. Does that need a separate code?

Site URL: https://yampa-icehouse.squarespace.com

Anyone know how to adjust the padding on this block for mobile only?

I've added some CSS but doesn't seem to working. Basically I removed the padding in that section to have my images and scrolling block go to the edges but on mobile the text is unreadable. 

Appreciate any help, thanks.

site: https://yampa-icehouse.squarespace.com

pass: smok

Site URL: https://yampa-icehouse.squarespace.com

I'm using the scrolling block for the first time. And after adding some CSS code to control the font in there it's acting very strangely. Even if I pull the code out it remains all cut off. Anybody experience this before? 

I'll attach how it looks currently and how it should look...

site: https://yampa-icehouse.squarespace.com

pass: smok

CSS I'm using to edit the contents:

div.marquee-block * {
  font-family: 'atrament-web'!important;
  font-weight: 500!important;
  letter-spacing: 0.05em!important;
  text-transform: uppercase!important;
  line-height: 0em!important;
  padding-top: 0px!important;
}

section[data-section-id="62bf411d5f0d75795dcecb37"] { 
  .content-wrapper {
  padding: 0 !important;
  max-width: 100vw;
  }
}

Appreciate any insight into why this is happening. Thanks!

Site URL: https://yampa-icehouse.squarespace.com

I'm hoping to align the navigation links with the top of the logo instead of centered vertically with it. Basically this logo is really tall so it pushes the nav further down than I'd like. Is there anyway to affect the position of just those? 

Thanks!

site: https://yampa-icehouse.squarespace.com

pass: smok

10 minutes ago, paul2009 said:

The ellipses is the unique reference for your eventbrite event, which is why I haven't shown it. To style all the buttons in the same way, simply add the class as I explained, and then refer to this class in your Custom CSS instead of referring to the ID. If you need more help, please provide some details of the code you have added and what isn't working for you.

right, I get it's a unique event which is what I used for the button styling, just wasn't sure what syntax is needed to add more events since I'm not familiar with how to write that code and separate them (I.e comma, semicolon, etc. I haven't implemented it yet but will paste the code in when I do.

Thanks for the reply.