OpenTable Block Customization

Site URL: https://lupatrattoria.squarespace.com

I would like to customize the background, button & text colors for the OpenTable block in my website. 

Right now the block background doesn't match the page color & the button is black instead of dark grey.

Thanks!

Can you share link to page where you inserted opentable block? I don't see it on homepage.

https://lupatrattoria.squarespace.com/reservations

Thanks!

Add to Home > Design > Custom CSS

/* open table background */
.squarespace-opentable-new-age-wrapper {
    background: #862633 !important;
}
/* Button */
.squarespace-opentable-new-age-wrapper input {
    background: darkgrey !important;
}

works great. thanks!

On 8/2/2020 at 6:35 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* open table background */
.squarespace-opentable-new-age-wrapper {
    background: #862633 !important;
}
/* Button */
.squarespace-opentable-new-age-wrapper input {
    background: darkgrey !important;
}

 

I just implemented this on my site as well but is there a way to move the "Find a table" button to the right? So that they're all in the same row? Thanks!

11 hours ago, lamdra said:

I just implemented this on my site as well but is there a way to move the "Find a table" button to the right? So that they're all in the same row? Thanks!

Can you share link to page where you embed opentable? We can check easier

On 11/6/2020 at 2:39 AM, tuanphan said:

Can you share link to page where you embed opentable? We can check easier

Of course, it's currently at http://primrosesteamboat.com/

On 11/17/2020 at 11:48 PM, lamdra said:

Of course, it's currently at http://primrosesteamboat.com/

Hi. Sorry for the delay.

This will requires JavaScript. Which plan do you use?

26 minutes ago, tuanphan said:

Hi. Sorry for the delay.

This will requires JavaScript. Which plan do you use?

I’m in the business plan. 

First, in Code Injection Header, remove this line

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Replace with this new line

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add this code to Code Injection Footer

<script>
  $(document).ready(function() { 
		$('div.sqs-block-opentable-v2 .squarespace-opentable-button-wrapper').insertAfter('.ot-time-picker.ot-dtp-picker-selector.unselected-on-init');
	});
</script>

On 8/3/2020 at 1:35 AM, tuanphan said:

/* open table background */
.squarespace-opentable-new-age-wrapper {
    background: #862633 !important;
}
/* Button */
.squarespace-opentable-new-age-wrapper input {
    background: darkgrey !important;
}

 

Great stuff, thanks!

Hello there. I would love to get rid of the open table widget background. Any chance to change the background opacity to 0%?

On 2/20/2023 at 9:00 PM, Svenihana said:

Hello there. I would love to get rid of the open table widget background. Any chance to change the background opacity to 0%?

Can you share link to page where you use Open Table Widget? We can check it again easier