Jump to content

style code block button to use built in squarespace button styling settings or CSS

Recommended Posts

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.

Screenshot 2023-11-15 at 10.01.03 AM.png

Link to comment
  • Replies 11
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

On 11/22/2023 at 2:05 AM, lamdra said:

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

Add this code to Website > Website Tools > Custom CSS

div.code-block button {
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    background-color: transparent !important;
    color: var(--primaryButtonBackgroundColor) !important;
    font-weight: 600;
    padding: 10px 20px !important;
}

image.thumb.png.f4d0583d37ab0195beb68dd66a48709d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

 

image.thumb.png.4db30e9c23c6610c18efc632c1a9c07e.png

Screenshot 2023-11-30 at 11.50.29 AM.png

Edited by lamdra
update
Link to comment

#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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

image.thumb.png.b302949f6b1985ec32c88a6e22d725b5.png

image.thumb.png.6bfd6959e8e5b596820f1f26dfc74522.png

Edited by lamdra
Link to comment
On 12/5/2023 at 2:58 AM, lamdra said:

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.

 

image.thumb.png.b302949f6b1985ec32c88a6e22d725b5.png

image.thumb.png.6bfd6959e8e5b596820f1f26dfc74522.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

Link to comment
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?

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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