Youjinahh

Hi team, A new client of mine runs a wellness retreat company and has asked for an easier method to display their lineup of retreats via the calendar block. They wish to place this under "Booking Calendar" on the "Retreat" page where it displays the upcoming retreats by month and they hope to make the associated date to be clickable either with a booking link or to find out more. I am not familiar with how I can set the Calendar block to work in the first instance, let alone make it clickable. Any help would be greatly appreciated!

Hi team, A new client of mine runs a wellness retreat company and has asked for an easier method to display their lineup of retreats via the calendar block. https://www.parohe.co.nz/ They wish to place this under "Booking Calendar" on the "Retreat" page where it displays the upcoming retreats by month and they hope to make the associated date to be clickable either with a booking link or to find out more. I am not familiar with how I can set the Calendar block to work in the first instance, let alone make it clickable. Any help would be greatly appreciated!

Hi @tuanphan Yes please 😞 Still unsure how to set this up!

Site URL: https://paddlefish-cube-wsst.squarespace.com/ Draft website - https://paddlefish-cube-wsst.squarespace.com/ Password - 1234 Page - Our Projects & News --- Hi there, really need help on the below! 😭 I have been working on the "Our Project" page to set up a filter per keyword category. I have been following the steps as per this video - https://www.youtube.com/watch?v=4_fvE8mO1ic I have inserted the JQuery code on the footer of the website. <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> ---- Below are the issues I am facing. 1. I am unable to see an underline when a category/button is activated. CSS code used: .tabs-container{ transform:translateY(100%); width:100% !important; text-align:center; border-bottom: none !important; overflow: auto; overflow-x:auto; white-space: nowrap; z-index:99; } .tab-btn{ max-width:200px; display: inline-block; border-radius:3px 3px 0 0; border:1px solid #999; padding: 12px 18px; font-size:1.2em; background:white; margin-bottom:none !important; border:none !important; &:not(:first-of-type){ margin-left:10px; } } .tab-btn.active{ border-bottom: 1px solid #999; } section.tab-section-hide{ display:none; } section.tab-section-show{ display:flex; } 2. I have made 4 separate sections, one for each category mentioned, and have used the "inspect" function to place the specific "data-section-id" to each button but they do not work when clicked... Code used: <div class="tabs-container"> <button class="tab-btn" id="tab-1" onclick="tabOneClick()"> All </button> <button class="tab-btn" id="tab-2" onclick="tabTwoClick()"> Property Strategy </button> <button class="tab-btn" id="tab-3" onclick="tabThreeClick()"> Commercial Design </button> <button class="tab-btn" id="tab-4" onclick="tabFourClick()"> Project Management </button> </div> <!--Be sure jQuery is loaded on your site.--> <script> function tabOneClick() { $('button.tab-btn:nth-of-type(1)').addClass("active"); $('button.tab-btn:nth-of-type(2)').addClass("active"); $('button.tab-btn:nth-of-type(3)').addClass("active"); $('button.tab-btn:nth-of-type(4)').addClass("active"); $('[data-section-id="6281bcaef7f8387797bd28b0""]').addClass("tab-section-show"); $('[data-section-id="Section-2"]').addClass("tab-section-show"); $('[data-section-id="Section-3"]').addClass("tab-section-show"); $('[data-section-id="Section-4"]').addClass("tab-section-show"); } function tabTwoClick() { $('button.tab-btn:nth-of-type(1)').removeClass("active"); $('button.tab-btn:nth-of-type(2)').addClass("active"); $('button.tab-btn:nth-of-type(3)').removeClass("active"); $('button.tab-btn:nth-of-type(4)').removeClass("active"); $('[data-section-id="Section-1"]').removeClass("tab-section-show"); $('[data-section-id="6282cc1441bfaf47fae38755"]').addClass("tab-section-show"); $('[data-section-id="Section-3"]').removeClass("tab-section-show"); $('[data-section-id="Section-4"]').removeClass("tab-section-show"); } function tabThreeClick() { $('button.tab-btn:nth-of-type(1)').removeClass("active"); $('button.tab-btn:nth-of-type(2)').removeClass("active"); $('button.tab-btn:nth-of-type(3)').addClass("active"); $('button.tab-btn:nth-of-type(4)').removeClass("active"); $('[data-section-id="Section-1"]').removeClass("tab-section-show"); $('[data-section-id="Section-2"]').removeClass("tab-section-show"); $('[data-section-id="6282cd9f41bfaf47fae3ce2f"]').addClass("tab-section-show"); $('[data-section-id="Section-4"]').removeClass("tab-section-show"); } function tabFourClick() { $('button.tab-btn:nth-of-type(1)').removeClass("active"); $('button.tab-btn:nth-of-type(2)').removeClass("active"); $('button.tab-btn:nth-of-type(3)').removeClass("active"); $('button.tab-btn:nth-of-type(4)').addClass("active"); $('[data-section-id="Section-1"]').removeClass("tab-section-show"); $('[data-section-id="Section-2"]').removeClass("tab-section-show"); $('[data-section-id="Section-3"]').removeClass("tab-section-show"); $('[data-section-id="6282ce4a50903a13c91d449c"]').addClass("tab-section-show"); } $(function() { $('[data-section-id="Section-1"]').addClass("tab-section-hide"); $('[data-section-id="Section-2"]').addClass("tab-section-hide"); $('[data-section-id="Section-3"]').addClass("tab-section-hide"); $('[data-section-id="Section-4"]').addClass("tab-section-hide"); tabOneClick(); }); Your help will be greatly appreciated... Thank you so much!!!!

Site URL: https://paddlefish-cube-wsst.squarespace.com/ Draft website - https://paddlefish-cube-wsst.squarespace.com/ Password - 1234 Page - Our Services __ Hi there! Your help is greatly appreciated! I am wanting to set two buttons side by side each with a different style. Below is what I see currently. Below is what I am after... Is there a way to custom code each button and reduce the spacing between them? This will be applied to two other sections on the same page (Commercial Design and Property Strategy). Thank you in advance.

Hi @ArminB Thank you so much for your response and tips, I love the examples you've shared and love how they all look! For my blog page - https://www.tailorinc.co.nz/news all the posts are set with categories via the Settings - Options - Categories option you've mentioned. The same keywords are used as Tags as well. I am unsure where I can find the SUMMARY filter you've mentioned? Secondly, my projects page - https://www.tailorinc.co.nz/our-projects is not set as a blog post. In order for me to set a category filter, would I need to redo this page with a blog template? Or is there another way I can do this whilst keeping the format I already have? Thank you so much.

You are amazing! It worked perfectly! Thank you so much 🙂

Site URL: https://www.tailorinc.co.nz/our-projects Hi there, I would like to investigate ways in adding category tabs on 2 pages of my website. - https://www.tailorinc.co.nz/our-projects - https://www.tailorinc.co.nz/news Is there a way that I can categorise each content with specific keywords and set a tab so that my viewers can see the specific contents that they are after? I would love to add something like the below (in yellow) where I can add category links for my "Our Projects" and "News" pages. If this is possible, please advise the steps for me to implement for my future updates. Thank you so much!

Thanks heaps @tuanphan Always appreciate your help. Your code worked perfectly! However, I would love to have the logo displayed in our brand colour, blue. I have attached the logo here, would this be something that you could embed and resent the code? Happy to follow your instructions. Thanks as always!

Site URL: https://www.tailorinc.co.nz/news Hi there, I am needing help in changing just the appearance of my logo on the blog page of my website https://www.tailorinc.co.nz/news The rest of the pages have the white logo showing which allows the blog post page to appear as if there is no logo present. I would like to have the logo on just this page as blue. Please let me know how I can code this! Thank you so much

Amazing! @paul2009 It worked perfectly! Thank you so much 🙂

Site URL: https://maroon-marlin-74y3.squarespace.com/ Draft website password: Astor1234 Hi there, my client wishes to use an email address that does not end with ".com" Is there a way to code a customized email address? I tried asking Squarespace and they said its not available at this stage. Please help!

Thanks @tuanphan for responding. I guess my issue would be that the iMac display does not look the same for the macbook display if that makes sense? I am more focused on the excess amount of black background that only appears on the iMac and how the separation of the words looking irregular on the iMac but it looks fine on the macbook pro. It's just small things that feel like its downgrading the completion of the design and I was just wondering if they could be matched up. Thank you for your help.

Site URL: https://www.astorfoundation.co.nz/ Hi there! I have just completed a design on my website and noticed the sizing/placement/alignment on the difference between my laptop screen to my imac desktop screen. I want everything to appear exactly as my laptop display for all viewing device. How it appears on my iMac desktop: How it appears on my laptop: I've placed a css coding to add the faint black background: #block-770d25534f07d1028f26 { background: rgba(0,0,0,0.3); padding-top: 2vw; padding-left: 2vw; padding-bottom: 1.5vw; } Thank you!

Worked perfectly! Thank you so so much!!