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

Site URL: https://maroon-marlin-74y3.squarespace.com/ Hello everyone, may I please ask for your assistance! https://maroon-marlin-74y3.squarespace.com/ Password: Astor1234 I am struggling to find ways in coding an image caption to just decrease the text size of a specific word. The below image is what I want. I only need to decrease the text size of "KNZM,OBE" but keep the layout exactly the same. The current image is set in the "Card" format. I have attempted the markdown block method but it ruins the layout by reducing the image size and adding a separation between the name + date. I hope this makes sense. Please please help!

Hi @theoneisalone I am facing the same issue, were you able to find a solution for this at all? Thanks!

Site URL: https://gar-bagpipe-6p38.squarespace.com/ 2079738510_logoresolutionchanging.mov Hi all, I am getting a weird issue with the image insert on the footer of my draft website. When the logo is uploaded, it appears in high resolution, however, when saved, the resolution breaks in quality and I am not sure why? The scale of the png file is higher than 1500px in height which should not be a problem. Can anyone help with this? Video is attached. Also, would anyone know how to reduce the size of the logo for the mobile? Draft website info: https://gar-bagpipe-6p38.squarespace.com/ Password: Astor1234 2079738510_logoresolutionchanging.mov

@tuanphan Yes! I just forum messaged you 🙂 Thank you so much!

Hello! I've managed to workout a way to left align my logo on the desk top without white spaces but it does not work on my mobile version. I've inspected the source and made changes and saved but when I refresh, it goes back to normal. Not sure what I am doing wrong? Please help!

Site URL: https://flower-mackerel-c277.squarespace.com/ Hi there, in desperate need of this help. Password for the website is: astor1234 Please refer to the image attached. I am needing the logo to be positioned to the far left of the page and add white border around the page buttons. I have been working on this for a week and still can't find a solution. Your help will be greatly appreciated!

Hi everyone, my issue will be more easily understood if you view the images attached. I am trying to achieve the "Design aim" on my section of my website. "Current status" is how far I've gotten... Can you please advise how I can provide spacings between each assets of this section? I tried sliding the columns and it only increases the size of one of them which is not what I am after. Thank you so much 😭😭😭