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

On 2/20/2023 at 2: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%?

I have the same request. Did anyone find an answer?

On 8/2/2023 at 7:17 AM, oscstudio said:

I have the same request. Did anyone find an answer?

If you share link to page where you use Open Table widget, we can check easier

of course. Here is the Homepage with the widget in question:
https://www.boheme-schwabing.de

22 hours ago, Svenihana said:

of course. Here is the Homepage with the widget in question:
https://www.boheme-schwabing.de

Which background are you referring to?