Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


AlexSantos last won the day on September 17 2019

AlexSantos had the most liked content!

1 Follower

About AlexSantos

  • Rank
    Circle Leader

Personal Information

  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I know I used typed with BetterCandy.pl If you want the code I can share it.
  2. It's a curious thing, if you go to https://factfiber.squarespace.com, (password is factfiber) and then click on the glossary term "Dependent Variable" to reveal the definition and within click on "outcomes" it will scroll past where it should. I can't for the life of me figure this one anchor link out. Everything else works. If you want the code for what I have done it's yours, just let me know. Perhaps there is a bug related to Squarespace Mercury I don't know. Every browser, Firefox, Chrome, Safari all behave precisely the same. Only this one link is affected. Everything else works. If you have an answer let me know.
  3. As per https://weglot.com/documentation/setup-guides/squarespace/ it appears that a business plan is enough to work with weglot. I am waiting for weglot to reply because I am almost ready to go with weglot but your answer (see the bullet point above) appears to imply that weglot will not translate checkout if the site is setup against a Squarespace business plan. I can't find any weglot support article to substantiate your claim. Is it an error on your part or am I misunderstanding something?
  4. This is not true. I have it working as expected with 7.1. Maybe there was a small mistake on your part?
  5. Yup, this was spot on. It made sense when I read it, tried it and it works perfectly. I will out line this because some people are in need here. @khupp I hope you read my instructions, it will help you. If my steps are not clear let me know and I will confirm if you followed the steps correctly. I used the steps below on my 7.1 site and it works. This couldn't be easier. 1) Select the text that you want to act as an anchor link. 2) Give it a name and prefix it with the # symbol. In my case the link name is #analytics 3) Add a code block directly above the location where you would like the link to scroll to when clicked on 4) In the code block replace the sample code and enter <div id="analytics"></div> In summary: I used #analytics and "analytics" respectively but that was for my case. When you apply this to your page, name it according to your own preferences. NOTE: You may need to test in an incognito window to see it work but it works. Optional: Code to ensure smooth scrolling I did add the following as code injection to the header <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script> <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script> and the following to Custom CSS html { --scroll-behavior: smooth; scroll-behavior: smooth; } I took a very brief look and the library is located here: https://github.com/iamdustan/smoothscroll, and the methods and examples that can be enjoyed are behind an insecure http address (http://iamdustan.com/smoothscroll/ - your browser will very likely complain). I just want to add that this library may not be necessary at all for a smooth scroll to occur but there are some nice options like scroll to top or bottom of a page. I remember using anchor links on a 7.0 site as per steps in a Squarespace support page (search for anchorlinks) and I did not use this library at all. Scrolling remained smooth nonetheless. I recommend trying without the 2 smoothscroll-polyfill scripts and accompanying CSS. I don't believe you will need them. The solution I outlined here is very generic and should work in 7.0 and 7.1 across multiple devices. Please test it to be sure it works on the devices and browsers you expect visitors will use. As an FYI, squarespace support has an article that appears to cover this but it goes about it differently. https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links Cheers —Alex Santos
  6. Hey Alex. I'm currently building on the Hayden template and this template has a feature where the header navigation disappears on scroll and then reappears on the second page.

    That's a feature I actually like, but on the mobile version, the header never comes back after scroll. I would like to know if there's  CSS to replicate the desktop effect of the header to the mobile version. Please anything will help

  7. You can isolate code to a single page's header by clicking on the cog wheel next to the page. This will trigger a window to open where you should click advanced and finally you can add code to just that page. Step 1 Step 2 (Enter your code into the page header injection) Hope this helps.
  8. Hi @LauraJD @tuanphan has been very generous with his time and expertise but unfortunately you will need the Business plan to inject code anywhere in your site. If you are on the personal plan you want have that freedom. If you are going through your site and find that you wish you could customize beyond what Squarespace offers in the Styles panel then moving to Business plan is something you should consider as it offers complete CSS and Javascript customization. Here is how you can change your billing plan.
  9. Hi I don't know if this will answer your question directly but I am happy to offer what I have in my Brine (v7.0) template site. If none of this is helpful let me know and I will report my own post for deletion. No point in adding unnecessary replies that might not help you or anyone else. The code only affects the search and results to the same. Your site is setup with a password: This is in my footer: <!-- Translate the See More button after a search --> <script> function searchPageTranslate() { //See More button Y.on('io:success', seeMoreUpdate, Y, true); Y.on('io:end', seeMoreUpdate, Y, true); function seeMoreUpdate() { setTimeout(function () { if (Y.one(".sqs-search-page-more span")) { Y.one(".sqs-search-page-more span").setHTML("Zobaczyć Więcej"); } }, 1000); }; } </script> <!-- Localize "search page" placeholder text, credit to Jason Barone--> <script> var placeHolderText = "Szukaj"; setTimeout( function () { if(Y.one(".sqs-search-page input")){ document.querySelector( ".sqs-search-page input").placeholder = placeHolderText; } }, 200); </script> <!-- End of "search page" placeholder text localization--> This is in the header: <!-- Localize "search" in the page header --> <script> var placeHolderText = "Szukaj"; setTimeout( function () { document.querySelector( ".Header-search-form-input").placeholder = placeHolderText; }, 200); </script> <!-- End "search" localization --> <!-- How to change "search" text to something custom --> <script> $(document).ready(function() { var text = $('.sqs-search-page-input .title').text(); text = text.replace('Search', 'Szukaj'); $('.sqs-search-ui-button .title').text(text); }); </script> <!-- Translate the See More button after a search --> <script> function searchPageTranslate() { //See More Button Y.on('io:success', seeMoreUpdate, Y, true); Y.on('io:end', seeMoreUpdate, Y, true); function seeMoreUpdate () { setTimeout(function() { if (Y.one(".sqs-search-page-more span")) { Y.one(".sqs-search-page-more span").setHTML("Zobaczyć Więcej") }; }, 1000); } } </script> This is in my site wide Custom CSS but it is for localizing (customizing really) the text. // If a search result is null then localize, courtesy of Banana, All-Star Circle Leader .sqs-search-page-notice { visibility: hidden; position: relative; &:after { content: "Twoje wyszukiwanie nie zostało odnalezione."; position: absolute; top: 0; left: 0; visibility: visible; } }
  10. I found this ewebdesign article, it is not Squarespace specific but it outlines the process. If you have some coding knowledge this might be the ticket.
  11. Here is a code pen that use the <strong> tag as a trigger to place an stroked underline that looks like a brush stroke. So instead of a class it affects the text where the <strong> tag lives in the html. The only thing I don't like is that the SVG gets masked (cut off). A solution to stretch it might be more desirable if it doesn't stretch it too far. For long underlines or strokes you may want to rely on a secondary image. This is why I prefer creating a class but it's yet one more method.
  12. Hi Cassie, what a brilliant idea. I love the graphics, colors and text, your mockup looks wonderful. Rather than provide a long answer, I skimmed through this article on A List Apart and it looks promising indeed. It involves using some stying, perhaps, underlines, italic and bold to target words in a paragraph, stripping that style from being displayed and then respond to the areas of the text that are styled (but not visibly so) with your graphics. Here is another resource on Andy Hooke's page. After reading part of this thirty-eight visuals article I imagine that you could take some of Andy's approach and create three or four classes, one for each PNG and add 4 of these, one per stroke type to the global CSS. First you need to upload the images, PNG or otherwise to your site, find their respective URLs and then … In a code block you might add something like <h1><span class="purple_underline">kids</span>express their emotions.</h1> and for the classes to trigger the image load you could add this CSS to the same code block or insert the CSS in Design>Custom CSS if you intend to use it in several places across the site. .blue_underline { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } .circle { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } .purple_underline { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } I think this will get you going. I've never done this before nor have I tested it but I believe that conceptually I am not far off. If you are truly stuck I can test it out.
  13. Hello Kerstin, I am as delighted as you are. So far I haven't seen anything that I don't like. It's easier to use with a very simple yet interesting user interface and this version is really built for ease of use. I think clients will be able to cope easier with 7.1. Squarespace made the bold and wise decision to pin all their templates to a single code base, a brilliant strategy. Metaphorically, it's like one single operating system with each template behaving like an app. This can help development focus on stamping out bugs, adding features and integrations at a much faster pace, thereby expanding the scope of the platform. It may even give them an opportunity to contemplate specific technology packages — layered parallax scrolling, animations and other considerations such as how to deliver a proper SVG import mechanism and maybe even a proper method to create recurring calendar events. I look forward to this new version with a keen eye. v7.0 templates are still available at the end of the templates page you mentioned. Thanks for providing your perspective.
  14. You're welcome. I am glad that I could help you. w3schools is a very good resource. The site doesn't look great but it is rich with content. For the code I offered, you can refer to w3schools to paste little bits of it to learn what it does and how to use it. Happy to help. —Alex
  • Create New...