Jump to content

Customize the "Book Now" button on Tock reservations widget

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

13 hours ago, Swebberdesign said:

Site URL: https://bullard-tavern-pdx.squarespace.com/

I'm using code provided by my Tock account widget builder and I'd like to customize the Book Now button so it matches the other buttons on my site. Here is how it currently looks:

19713960_ScreenShot2021-06-17at8_20_08AM.thumb.png.0e105b924508f9d0013ec64a31dcbe50.png

Add to Design > Custom CSS

/* Book now button */
div#Tock_widget_container>div.TockWidgetWrapper .TockButton-white {
    color: #c59014;
    border: 2px solid #c59014;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, Swebberdesign said:

There is an extra white background behind the text it looks like. Can you help me give it the solid gold fill with back text in bold? Thank you!

638988819_ScreenShot2021-06-18at7_17_23AM.thumb.png.c49dc00799c3cfcec868c11de1ce7229.png

Screen Shot 2021-06-18 at 7.17.59 AM.png

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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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!

Screen Shot 2022-11-07 at 12.21.40 PM.png

Link to comment
7 hours ago, lamdra said:

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

Screen Shot 2022-11-07 at 12.21.40 PM.png

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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

image.thumb.png.752429571739f4218183c52ddb9c4b26.png

Link to comment
14 hours ago, lamdra said:

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

image.thumb.png.3ebe7ddc74bc4df765b4c23ef5bda1d4.png

Add to Design > Custom CSS

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.