Swebberdesign Posted June 17, 2021 Share Posted June 17, 2021 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: Link to comment
tuanphan Posted June 18, 2021 Share Posted June 18, 2021 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: Add to Design > Custom CSS /* Book now button */ div#Tock_widget_container>div.TockWidgetWrapper .TockButton-white { color: #c59014; border: 2px solid #c59014; } codyssey 1 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
Swebberdesign Posted June 18, 2021 Author Share Posted June 18, 2021 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! Link to comment
tuanphan Posted June 19, 2021 Share Posted June 19, 2021 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! 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; } codyssey 1 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
lamdra Posted November 7, 2022 Share Posted November 7, 2022 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! Link to comment
tuanphan Posted November 8, 2022 Share Posted November 8, 2022 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! 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> codyssey 1 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
lamdra Posted November 8, 2022 Share Posted November 8, 2022 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? Link to comment
lamdra Posted November 8, 2022 Share Posted November 8, 2022 (edited) 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 Edited November 8, 2022 by lamdra Link to comment
tuanphan Posted November 9, 2022 Share Posted November 9, 2022 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 Add to Design > Custom CSS [data-section-id="636a9049374b4f3a54c18d2c"] { z-index: 10; } div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton-container { border-color: transparent !important; } codyssey 1 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
lamdra Posted November 9, 2022 Share Posted November 9, 2022 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! tuanphan 1 Link to comment
codyssey Posted February 20 Share Posted February 20 (edited) Hi @tuanphan Is it possible to get the book now widget button behavior to apply to our menu navigation item, "reserve"? We would like to get rid of the button and have the lightbox open when clicking reserve. site url (password is midori) https://lettuce-wrasse-kyxh.squarespace.com/ Thanks! Cody Edited February 20 by codyssey Link to comment
tuanphan Posted February 21 Share Posted February 21 9 hours ago, codyssey said: Hi @tuanphan Is it possible to get the book now widget button behavior to apply to our menu navigation item, "reserve"? We would like to get rid of the button and have the lightbox open when clicking reserve. site url (password is midori) https://lettuce-wrasse-kyxh.squarespace.com/ Thanks! Cody You mean click reverse >> Show this page in a lightbox on current page I mean this page: https://www.exploretock.com/midori-sushi 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
codyssey Posted February 21 Share Posted February 21 I mean the light box that currently appears when you click the “Book now” button, which is different than what appears on the exploretock.com/midori-sushi site. If we can get the book now light box to appear instead of taking you to exploretock.com/midori-sushi, if that makes sense. Thank you so much! Link to comment
codyssey Posted February 21 Share Posted February 21 (edited) @tuanphan i mean this lightbox. Similar to the “reserve” button on this site: https://www.pizzeriaportofino.com/ Edited February 21 by codyssey Link to comment
codyssey Posted February 21 Share Posted February 21 hi @tuanphan, if that’s not possible we could also move the Book now button to the header and remove “reserve”? thank you cody Link to comment
JackieDee Posted March 22 Share Posted March 22 Hi @tuanphan Hoping you could help me with a similar issue but for Seven Rooms booking widget? I want to remove their logo from the widget button and replace with our font. Is that possible? https://www.fancyhanks.com/bookings Link to comment
tuanphan Posted March 24 Share Posted March 24 On 3/22/2023 at 8:55 AM, JackieDee said: Hi @tuanphan Hoping you could help me with a similar issue but for Seven Rooms booking widget? I want to remove their logo from the widget button and replace with our font. Is that possible? https://www.fancyhanks.com/bookings You mean this logo? This is not possible from Squarespace. You need to change it from Seven Rooms. You try contacting their support. If they can't help, you try asking if can use CSS code, if they say yes, let me know, I can give code to replace this with new logo 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment