Jump to content

melaniejaane

Circle Member
  • Posts

    80
  • Joined

  • Last visited

Everything posted by melaniejaane

  1. @Beyondspace thanks for looking into this! 😊 www.beehyve.health/our-team password:abc
  2. Hi @JButler I tried adding this script to footer and page code injection but doesn't seem to work. Did you add the script somewhere else or change any settings in lazy summaries to make this work? Thanks 🙂
  3. Thanks for your insight @Beyondspace Is it relatively easy to set up JS code like this? I'm familiar with CSS and html but novice with JS. Do you know of any similar snippets I could use as a base? Thanks so much 🙂
  4. Hey @creedon is there a way to apply this code so the customised slugs are used when clicking on the actual tabs? It works perfectly for navigation links but when I click on the tab blocks themselves, the slugs revert back to #section:nth-child(2) etc. https://beehyve.squarespace.com/adhd-support-2 Thanks so much! 😊
  5. Hey @iamdavehart this looks like magic code thanks so much for creating it! By any chance is there a clever way to rename the links so instead of #section-link-139408129035 it could be #about, #contact, etc? Thanks again 😊
  6. <script> if (window.location.hostname == 'unityweek.squarespace.com') { clearTimeout(function(){ window.location.href = '/resources-list'; /*existing page - blog*/ })(); } else { setTimeout(function(){ window.location.href = '/resources'; /*redirect - new page */ }, 000); } </script> UPDATE: @tuanphan I've written the above snippet which half solves the problem. Maybe you can improve it? It turns off the redirect function when using the Squarespace hostname, unfortunately I couldn't find a way to specify the config mode though. Would you know how to do this? Thanks again! 😊 Squarespace url: unityweek.squarespace.com/resources-list Public url: unityweek.co.nz/resources-list
  7. Thanks @tuanphan is there a way to do this automatically in the script, like adding an exemption if the source comes from the squarespace url as opposed to the public domain? Just discovered the lazy summaries plugin won't work unless the source page is enabled and password free. 😞 Unfortunately need to go back through multiple websites, unlock the blog pages then set up redirects. Hoping to limit opt-in/out actions as much as possible for other site contributors. 🤞
  8. Hey @tuanphan is there a way to edit this script so it doesn't redirect when we're in config mode? Thanks 🙂
  9. @tuanphan @melmotz were you able to figure out a way to display tags on the blog landing page?
  10. <!------DROPDOWN SUMMARY CONTENT------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $(document).on("click", ".summary-item", function () { $(this).toggleClass('tp-list-des-open'); }) }) </script> <style> .summary-content:hover /*, p.sqsrte-large strong*/{ cursor: pointer; } p:empty, .summary-excerpt p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{ height: 0!important; overflow: hidden!important; /* transition: all 0.1s ease!;*/ transition: none!important; display:none!important; } .tp-list-des-open .summary-excerpt p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{ height: 100%!important; /* transition: all 0.1s ease!;*/ transition: none!important; display:block!important; } .summary-title, .summary-metadata-container{pointer-events: none;} </style> <!------END DROPDOWN SUMMARY CONTENT------> Wanted to post the solution for others looking in the future. Thank you to Michael the The Lazy Summaries plugin creator for fixing the first couple lines of code and making this snippet work! 😄
  11. Is there a way to customize this so it works on all auto list sections without having to target them individually?
  12. @juliaprather I think I can actually help with this one! I had similar messaging originally so had to redo a bunch of headings / paragraphs. Basically people who are visually impaired or use screen readers, can't see the distinctions in design, so rely on text hierarchy. So any text styled with H1, H2, ...etc will be given a "title tag" and anything marked as P will be given a "text tag". Using your example, while I can obviously see that "Loan Types" is a heading, and below are the grouped links, a screenreader will just see it as another "text tag" because you're using P1. This makes it unclear that the links below are actually related. Equally if you style pulled out text in H4, the screen reader will mark it as a "title tag", which adds confusion when the text following it is either another heading or paragraph text that isn't actually related. Does that all make sense? There are code snippets you can use to change the text / title hierarchy on specific blocks if just a couple of one offs, but because I had consistently used H4 for pull outs, I had to change them all to P1 and then restyle both to match. A bit of a bother at the beginning but much easier for consistency in the long run!
  13. My client is working towards WCAG compliance, they had their site assessed and received the below feedback. Can anyone please help? How do you add role="alert" or live regions to errors in a form? How do you add aria-described attributes to relate the invalid field to it's error message? ^ they reference the html codes required but I don't know how to add them into the form - assume I need Javascript? Can you add direct links to the error messages / invalid fields? Or give screen readers the option to skip valid fields and labels when looking for error? Website: http://brackenridge.squarespace.com/ password: GSPass Below is screenshot of full feedback if helpful reference. Thanks so much!
  14. @tuanphan yes thank you! Luckily I found a new tutorial showing how to do it. I've popped the code below for anyone who may be looking for this in the future. 😊 @media screen and (min-width: 768px) and (max-width: 1500px) { .user-items-list-simple[data-num-columns="4"] { grid-template-columns: repeat(~"4,1fr"); grid-gap:0 3vw!important; } } @media screen and (min-width: 300px) and (max-width: 767px) { .user-items-list-simple[data-num-columns="4"] { grid-template-columns: repeat(~"2,1fr"); grid-gap:7vw 4.5vw!important; } }
  15. Hey @tuanphan I'm trying to achieve the same thing on my site but the code doesn't seem to be working. I've tried with my section id and without but nothing changes. Would you have any ideas? Thanks! https://brackenridge.squarespace.com/how-we-can-help-you password: GSPass
  16. https://beehyve.squarespace.com/payment-policy I want to add a sticky sidebar (made of various blocks) and apply it to multiple pages. In 7.1 classic editor, I could make the sidebar blocks collectively sticky by targeting the column within the section, using the code below. Super quick and easy. Is there a way to do this in fluid engine? Feels a lot cleaner than having to target each block for different top heights, especially as I want to add it to a few pages. section[data-section-id="...."] .sqs-layout > .sqs-row > .sqs-col-3 { position: sticky!important; position: -webkit-sticky!important; top: 140px; z-index: 99999; } Thanks all!
  17. Hey @Ziggy I've attached screenshots of before and after targeting the blanks spaces to hopefully show what I'm trying to achieve. When I reduced the text margins, I needed a double hard return to make a visible paragraph break. However instead of the original 1rem margin break, the paragraph breaks became full text-line-height + reduced margins stacked on both sides. So I'm trying to globally target the empty spaces, to make standard looking paragraph breaks while also keeping reduced margins between different text styles. I'm just struggling to find a code that targets all empty spaces between text without also impacting other elements. Would you have any ideas? Thanks again! 🙂
  18. Hi @Ziggy This is the page I've been testing code / paragraph format on: https://beehyve.squarespace.com/test-page password: abc I figured out how to adjust the margins to decrease the space between headers and paragraphs. Unfortunately the reduced margin made proper paragraph breaks too small, but a double hard return was still too big. I've been trying to find a way to target just the empty spaces between text but keep coming up against issues. The below code is what I've come up with so far but I've already noticed it's not working with summary blocks. Would you have any ideas on how to improve this or a different solution that may work better? Thanks so much! h1, h2, h3{ margin-bottom: .7rem!important; margin-top: 0!important;} h4, .sqsrte-large , p, .sqsrte-small, ul, li, ol{ margin-bottom: 0.3rem; margin-top: 0.0rem; } .list-item-content :empty, .sqs-block-html .sqs-block-content *:empty{ margin: 0!important; height:1rem!important; }
  19. Is there any way to reduce the spacing of a hard return after a heading? Is there also a way to reduce the size of empty space between paragraphs when you use a double hard return? Squarespace has implemented some super frustrating code that creates a massive space after every hard return / paragraph break. Is there anyway to turn this off, or alter the code to only apply after a double hard return, like standard word editors? It's seriously impacting readability in text heavy areas like Blogs or Policy pages, that need paragraph headers to outline ideas or visually break up the content.
  20. @tuanphan hi just wondering if it's possible to change your JQuery so it also applies to summary items after the 'load more' button? https://www.beehyve.health/adhd-support Current code: <!------DROPDOWN SUMMARY CONTENT------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.summary-item').each(function(i, e) { $(this).click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .summary-content:hover /*, p.sqsrte-large strong*/{ cursor: pointer; } p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{ height: 0; overflow: hidden; /* transition: all 0.1s ease!;*/ transition: none!important; display:none; } .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{ height: 100%; /* transition: all 0.1s ease!;*/ transition: none!important; display:block; } .summary-title, .summary-metadata-container{pointer-events: none;} </style> <!------END DROPDOWN SUMMARY CONTENT------>
  21. Hey @tuanphan have you had any luck amending this code to work with items below load more button? Thanks so much! Site: https://www.beehyve.health/adhd-support
  22. So I'm trying to change the order of content in my summary block to: 1. Title 2. Primary Metadata (Categories) 3. Blog Excerpt 4. Secondary Metadata (Tags) The css I've created below successfully does this on all blocks except the Metadata, because they are in a lower class. Is there a way to take Primary and Secondary Metadata out of their shared class, so they can be treated as independent elements like the summary title and excerpt? .summary-content.sqs-gallery-meta-container , .summary-content.sqs-gallery-meta-container .summary-metadata-container.summary-metadata-container--below-title { display: flex; flex-wrap: wrap;} .summary-title{ order:1!important;} .summary-metadata.summary-metadata--primary{ order:2!important;} .summary-excerpt{order:3!important;} .summary-metadata.summary-metadata--secondary{order:4!important;} Website: https://www.beehyve.health/resourcesPassword: abc
  23. Hi @tuanphan I'm also interested in this code to change the order of summary block content if you made it? I'm hoping to have primary metadata above the excerpt and secondary metadata below the excerpt. Website: https://www.beehyve.health/resources Password: abc
  24. @tuanphan Sorry link was at the beginning, it's Site: https://www.beehyve.health/adhd-support Thanks so much!
  25. Site: https://www.beehyve.health/adhd-support Hey @tuanphan I received this response on the plugin support forum: Seems to be issue with the JQuery you helped with on other question (below) not targeting posts below load more button. Would you please be able to help me hook this in? This is the final code snippet I used for the dropdown / accordion feature. <!------DROPDOWN SUMMARY CONTENT------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.summary-item').each(function(i, e) { $(this).click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .summary-content:hover /*, p.sqsrte-large strong*/{ cursor: pointer; } p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{ height: 0; overflow: hidden; /* transition: all 0.1s ease!;*/ transition: none!important; display:none; } .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{ height: 100%; /* transition: all 0.1s ease!;*/ transition: none!important; display:block; } .summary-title, .summary-metadata-container{pointer-events: none;} </style> <!------END DROPDOWN SUMMARY CONTENT------> Thanks so much again! 🙂
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.