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


Posts posted by AlexSantos

  1. <!-- invert your logo, paste this in, page settings, advanced section on a per page basis -->
    .header-title img {
        -webkit-filter: invert(100%);
        filter: invert(100%);



    Christy, thank you for the inspiration, works great in v7.1 (on any 7.1 template of course)



  2. On 6/24/2020 at 10:26 PM, khupp said:


    @AlexSantos While the mobile anchor links work great, the desktop is taking me to a random spot on the page.....you still have to scroll back up to get to the correct section?


    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. On 5/30/2020 at 3:02 PM, paul2009 said:

    Weglot does translate the checkout from English into other languages. As you haven't provided a link to your site, it's difficult for me to be specific about why it isn't working for you, but I recommend you check that:

    • you are on a Commerce plan (not a Business plan). You can check this in Settings > Billing & Account > Billing.

    If both are correct, I suggest you reach out to Weglot for support.

    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. On 1/23/2020 at 6:14 AM, Robino said:

    That doesn't work in 7.1 yet.

    What will happen with this code / solution is when you click the link it will load the section but it won't scroll down to it.

    This is not true. I have it working as expected with 7.1. Maybe there was a small mistake on your part?


  5. On 12/9/2019 at 9:08 PM, ulf.kollross said:

    Another way to set anchor links:

    1. Set a code block above the point on the site you want to jump at (e.g. above a Headline, …).
    2. Fill the code block with an empty div: <div id="your-anchor-name"></div>
    3. Then set the link to jump to the anchor like this: /pagename/#your-anchor-link

    Hope that helps

    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

    —Alex Santos 



  6. 20 hours ago, LauraJD said:

    Sorry any idea if I wanted to remove it just from heading links on blog page?


    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.

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



  8. 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 -->
    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);
    <!-- Localize "search page" placeholder text, credit to Jason Barone-->
      var placeHolderText = "Szukaj";
      setTimeout( function () {
        if(Y.one(".sqs-search-page input")){
        document.querySelector( ".sqs-search-page input").placeholder = placeHolderText;
      }, 200);
    <!-- End of "search page" placeholder text localization-->

    This is in the header:

    <!-- Localize "search" in the page header -->
      var placeHolderText = "Szukaj";
      setTimeout( function () {
        document.querySelector( ".Header-search-form-input").placeholder = placeHolderText;
      }, 200);
     <!-- End "search" localization -->
    <!-- How to change "search" text to something custom -->
       $(document).ready(function() {
       var text = $('.sqs-search-page-input .title').text();
       text = text.replace('Search', 'Szukaj');
       $('.sqs-search-ui-button .title').text(text);
    <!-- Translate the See More button after a search -->
    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);

    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;  


  9. 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.


  10. 3 hours ago, CassieMagpie said:

    I'm looking to add a range of custom brushstrokes to highlight different sections of text. Is there a way I can add these into a text block and move it to where I'd like it using css?

    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.

  11. On 2/2/2020 at 5:11 PM, kerstinmartin said:

    I will be building new sites in 7.1 from now on and I am also in the process of redesigning my own on 7.1. It's still not perfect but quite a few improvements have been made (color management is definitely better now) and the more I get to know it the more I love it!

    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.

  12. 1 hour ago, WeAcceptCrypto said:

    Wow, thank you so much for this insightful reply. I just bookmarked that color picker resource. I used your code suggestion along with the HTML to bold the text and achieved the desired effect. Looks awesome!! I didn't even know you could add code blocks like that inside of other blocks (new to SquareSpace).

    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.

  13. Hello

    Squarespace offers a lot as is but sometimes you need to add some HTML or CSS markup or at times you might need to go beyond markup and actually get programmatic and use javascript.

    I have no affiliation with Traversy Media other than being a patron of his via Patreon but I do learn a lot from his online courses and thought you might too. He has plenty offered for free on Youtube and aside from a good starting point course on Modern HTML & CSS From The Beginning (Including Sass) he has more on Udemy. Follow those links if you want to expand your knowledge on coding.

    Although these are not Squarespace specific they provide a solid foundation on what can be applied to your site.


  14. 13 hours ago, WeAcceptCrypto said:

    hsl(167, 89%, 38%)

    You can use W3schools color picker to convert an HSL value to hexadecimal.



    You can try the following inside a code block. I used an h1 in my example.

    So what I have chosen to do is create a code block and insert the code.

    I created a div and inside it I added a class="word" attribute. Later on I used the class by calling my class that I chose to arbitrarily call .word. This will help me add some CSS styling against it, in this case I asked for my class called word to assume the color: white. A little later down I called the .word class and used the after selector to apply color and content, your color and the "." (dot) content.

    <div class="word">Testimonial</div>
    .word {
     color: white;       
    .word:after {
     color: #0bb792;
     content: ".";

    In my case, it looks like this:


    I am not that great with code but I believe this is very nice solution because it is all inside one code block, both the HTML and CSS which styles it and the text is easy enough to edit, just double click the code block and you can define any text and change colors. You won't need to move around the Squarespace interface by going to Design>Custom CSS, it will all live in a little code block and will always work as expected. You only need to worry about the h1, h2, h3 or which ever font size you chose.

    I hope this not only helps you with your goal but that the links encourage you to use w3schools which is an excellent reference. Think of it like a wikipedia of code. Along the top bar of w3 are sections for HTML, CSS, (both are markup languages), and then javascript, python etc which are actual programming languages.

    If this doesn't work out tuanphan was also generous enough to give a helping hand.


  15. Dear forum members

    The last time I was here, v7.1 was fairly new and there was some 'push back' relative to some features. I don't quite remember the details but I have two questions.

    1. Is v7.1 a good option for a new site now, do any kinks remain?
    2. Which v7.1 template is recommended?
    3. Should I just use Brine?
    4. Is Brine v7.1 ready?
    5. Which Squarespace page do I visit to view only the v7.1 templates in isolation?

    I apologize for these basic but I haven't visited in a while now and the changes that the forum has gone through has made it difficult for me to easily find info. Thanks for your patience and I look forward to your reply. I realize I have some forum documentation to read through, with that thank you for your patience.


  • Create New...