iamdavehart

There's a few things to unpack here I guess, but I suppose the first thing is that this particular part of the forum isn't really for feature requests. If you want to customise Squarespace then there are individuals who can help you here. they don't work for Squarespace though. OK, let's talk about NFTs. Nothing too polemical here, plenty of other places to argue about their value, their cost, the technology etc, but should say that I am very pro-blockchain/web3, and work and research within that sphere pretty much every day. So, we'll focus on NFTs and Squarespace (seeing as that's the forum we're in). In my opinion there are some fundamental concepts that one needs to consider here. Squarespace is essentially a web2 company, and act as a trusted third party. that means that they are taking control of a lot of things for you on the back end, and owning the data, building the product etc. When you upload product information to SQS you're putting it in a database they run, maintain and protect. That means that they run a lot of server side code. that's code that we as end users can't get to and modify. When we customise Squarespace we work only with browser rendered CSS or scripts, executed client side. That does give us good opportunities with web3 though... with web3 / nft stuff the data and the source code are on the public blockchain. when you go to OpenSea or Hic Et Nunc you're interacting with their smart contracts on the blockchain, not (for the most part) with server side code or their third party databases. because of that all/most the interactions you see are done with client-side code that calls the contracts. Same with *any* site that is integrating metamask. So, if you want to integrate metamask in squarespace, you can (with premium subscription) as you can add Javascript code blocks. In addition, the vast majority of NFTs aren't "on chain" and as such exist simply as URLs usually on IPFS or similar content-addressed networks. so you can easily add those things as simple img elements in a code block if you want. There's another reason that you probably want to sell things on dedicated NFT marketplaces though, is that the royalty payments are usually run on the marketplace contract, not your NFT contract. so you really need your customers to interact with that contract, not a middleman contract that Squarespace would have to write and run themselves (because the royalty payment might not be in there!) So there are routes you could go down to integrate metamask, NFT collections, smart contracts etc. That's not to say that Squarespace shouldn't go down that route, I'm sure they will at some time, probably first through adding crypto payment providers. (At the moment, there is no integration of crypto payments with Squarespace but I'm sure that could happen, Stripe stopped Bitcoin payments 3 years ago but recently have said that they would consider crypto payments again). FWIW, I think squarespace could do a good job on this sort of thing. Web 3 stuff needs Web 2 quality UIs to on-board new people, but it's not there yet. My guess is that if you're getting a lot of benefit from using squarespace through design and no-code experiences, and the NFT part is relatively small part then integrating a bit of javascript or an iframe embed for now is probably not a bad idea. If there's a particular example you want to see connecting metamask within a squarespace page I'd be happy to write and put up an example. It would be an interesting exercise and there are lots of possibilities. For example, you could go down the route that people often use when integrating shopify which is to add the products in squarespace and then replace the buy button in code. If you think we need a squarespace plug-in to do this sort of thing and it looks worth it, again, tell me what you're looking for and I'm sure I could write one. EDIT: forgive any kind of basic explanations here or any explanations that gloss over stuff, just trying to write something that might be useful to people finding NFT type stuff and no idea what peoples understanding of it is or technical capability is. My main point in this is that I'm not sure its the right thing to give over web3 stuff to a web2 company, or very productive to slate a web2 company for not doing web3 things, but I'm happy to help customise existing squarespace sites with web3 type interactions using javascript (as is the remit of this forum). WAGMI

your DNS records are incorrectly set. www.anywhere.com and anywhere.com are called CNAME records, which stands for canonical name records, ie names which are different versions of the same thing. Somewhere along the line your clients DNS records have not been correctly set up. it's perfectly possible in this scenario that www.somewhere.com and somewhere.com point to different places. You're also having problems with the SSL certificate that Squarespace provide which looks like an additional side effect. The answer to this will depend on where your domain names are registered. I would follow Squarespaces own guidelines to check your set up. they have different articles for many different domain name registrars and you can also transfer your name to Squarespace and get them to manage it all. start here: Connecting a domain to your Squarespace site – Squarespace Help One site is at https://erin-judd-t7vx.squarespace.com the other site isn't a squarespace one, looks like its hosted by a company called www.ipower.com basically, just sort your domain name records out and you'll be fine.

you're not actually passing anything to your date function. date1 and date2 are the named arguments but you need to pass the function calcdate some real things, e.g. today and past variables. // document.getElementById("howold").innerHTML = calcDate(date1,date2); document.getElementById("howold").innerHTML = calcDate(today,past);

There will be a few steps to do this. This particular js file isn't available on a CDN (content delivery network), so you'll need to download it and upload it yourself to your own site. as its a javascript file the best way to do this is to add a link somewhere on your page and upload the file from there. You'll then need to inject the script tag into your website using the javascript source files new location (something like "/s/vanilla-tilt.js"). the way that this library is written (both the jQuery and the vanilla js version) is that they recommend you insert it at the end, so use Settings > Advanced > Code Injection and inject it into the footer. NOTE: if you download the minified version that's vanilla-tit.min.js, you'll need to rename it as Squarespace doesn't like files with multiple dots in, so just go for vanilla-tiltmin.js. The library by default looks for things to tilt declaratively so you'll need to put the things you want to tilt inside code blocks so you can mark the div up with the "data-tilt" attribute(s). If you want to use existing elements to tilt then you'll need to find the relevant IDs and write some code to tilt those elements. example for doing it declaratively in a code block <div data-tilt style="text-align:center; background-color:red; color:white; padding:15px; width:300px;"> Tilt Me </div> example for doing it imperatively with code block (using vanilla tilt, I would recommend that over the jquery one) <div id="someid" style="text-align:center; background-color:red; color:white; padding:15px; width:300px;"> Tilt Me </div> <script> document.addEventListener("DOMContentLoaded", (e)=> { VanillaTilt.init(document.querySelector("#someid"), { max: 25, speed: 400 }); }) </script>

don't know if this is relevant posting this on an old thread (i'm relatively new to adding messages to forums so haven't seen a lot of the old ones), but saw this and thought that there's a css only way to do this that might be easier to maintain, and I think then wouldn't need premium, and the browser may render more quickly. essentially you can use a + selector which says "find me an element that is immediately preceded by this other element". We can use this to say "find me a code block that is immediately after a summary block", which means the selector won't fire if the block is removed. So all you need to do is add a code block after each summary block you want to do this for (they can be anywhere you want, just the code block has to come straight after it). put a div in there with a class of "no-summary" and add the message you want. <div class="no-summary">Nothing to see here</div> then add the following css to your custom css, or inject it into your page or however you want <style> .no-summary { display:block; } .sqs-block-summary-v2+.sqs-block-code .no-summary { display:none; } </style> hides any no-summary message that appears in a code block that immediately follows a summary block. This way you can add the css once and just add as many "no summary items" messages as you want. Just offering it as an alternative. (there may be better classes to use for the + selector, I just used the 7.1 ones I saw. could probably be a bit more specific)

Unfortunately, there's probably only a "sort of" explanation because of the way that clip-path's work... To apply it to all image blocks automatically, change the section id selector to a class selector that targets image blocks .sqs-block.image-block figure { // insert your drop shadow filters here } to do the border, you could try assigning two drop shadow filters, the first one having no offset and just a 1 px spread to draw your border and the second one drawing your drop shadow e.g. this will draw a red border and a drop shadow on figures in image blocks .sqs-block.image-block figure { filter: drop-shadow(0px 0px 1px rgba(255,0,0,1)) drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)) ; } Maybe that will work for you. Your options are a little limited here though as I said, which isn't really a squarespace feature/bug, just a side effect of CSS clip paths Hope that helps

the link you posted doesn't work (as @bangank36 has pointed out above). however, this question has been asked before and I've answered it before so this might help and looks like your logo is simple from the possible link he posted let us know if it works

The reason it's not working in a markdown block is because mindbody have used a custom element that includes a hyphen and squarespace doesn't like that when it preprocesses tags in a markdown block (that's why you see "healcode-widget" becoming "healcode data-preserve-html-node="true"-widget". you'd need to put your code into a code block rather than a markdown one and it will work just fine. I don't think it will work in the new Squarespace Accordion block without writing some extra code as the Accordion block just takes a basic text block in its description property. so I guess these are your options: put the links into a code block and don't use the accordion block put the links into a code block and use further code to move them into the accordion block put normal links into the accordion block and then use code to intercept the clicks and programmatically open the lightbox One other option would be to modify the relatively simple script that mindbody have provided to make it use a custom html element that doesn't have a hyphen in it, then edit the markdown should work just fine. you'd have to customise their script yourself to do that, but it wouldnt be that hard as the js they've provided itsn't minified and is easily readable.

image shapes use clip paths (imagine cutting a hole in a piece of paper and laying it over the top of your image), so the drop shadows that you apply won't be visible as they are outside of the clipped area. CSS box-shadow rules don't get applied after clip-path rendering so you wont' get the outline you want, but what you can do is use the "filter" rule as this happens later in the order of operations. you have to apply it to a parent element though as the image clip path will still try to clip the shadows. The best bet as far as I can see is to target the parent "figure" element to the image and use a drop-shadow filter, e.g. #block-yui_3_17_2_1_1635215334828_29269 figure { filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)); } this approach is noted here https://css-tricks.com/using-box-shadows-and-clip-path-together/

The general structure is that inside a gallery object, you get specific wrappers depending on the grid type (e.g. masonry, basic etc), that eventually finds a "figure" with a link (if you've got the lightbox enabled), and inside that the image. so you could use an nth-child selector (e.g. pick me the 5th picture in the gallery) but you'd have to remember that if the order of the pictures in the gallery changed then it would select a different picture. for example, this would put a border around the second child in every gallery. prefix it with the relevant data section if you just want it on one page (or inject it into that specific page) .gallery figure:nth-child(2) img { border:solid 1px red !important; } If you wanted to be more specific you could also use an attribute selector based on the itemId (which you can see in the URL if you use a lightbox, or you can find in the source), or some other image source attribute if you're not using a lightbox. // for a lightbox-enabled you can target the link // $= means ends with. you can find the itemId in the url when you open the image // in the lightbox .gallery a[href$='eh93bxzp9wth135k95a1y8qkpopbv7'] img { border:solid 1px red !important; } // non-lightbox version, you can find the image by searching // its attributes for the filename (you could do this for lightbox ones too // but the itemId is easier to find!). you can use data-src, or src or data-image .gallery img[data-src$='20140301_Trade-151_0124-copy.jpg'] { border:solid 1px red !important; } hope that helps

Hey, You'll probably need a business or premium subscription to do this as it has code. firstly you need to upload your file, so create a text box and insert a link. In the little link dialog click the cog and select File from the dialog and then upload your file. click close and this will give you a url to access your file. it will be something like "/s/key.wav". once you've uploaded it you can delete the link, the file is there now. Now you can add the code. Insert a code block and do something like this. This is just a demo, so you'll need to provide your actual site to get it exactly right, but you can try this to get your sound file working: <a href="#" id="linkToPlaySound">Click Me For Sound</a> <script> document.querySelector("#linkToPlaySound").onclick = function(e) { e.preventDefault(); const audio = new Audio("/s/key.wav"); audio.play(); } </script> this has two parts. the first part is the link. you won't need this in your final code because you've got some key pictures or something like that, but use this first to get the sound playing the second part is the script. this finds the link and sets its click event to find the audio element and play it. note that it has our key.wav file. if yours is named differently change that code. Once you've got that working we should edit it for your site. (but it's easier to debug the code block above first until you've got the sound playing). On your site we need to target the section with the keys and attach our code to each of the URLs, we also need to make sure that the links aren't followed immediately otherwise you wont hear the sound it will just navigate to the other page. using a code block on the page (the same one above if you want) <script> function playKeySound(e) { e.preventDefault(); const clicked = e.target; const audio = document.querySelector("audio"); audio.play(); // now remove the handler and click it again // after enough time has elapsed to play the audio clicked.onclick = null; setTimeout(function() { clicked.click(); }, 2000); } const keyImages = document.querySelectorAll("section[data-section-id='615c8149fd9a9c637af255f4'] a.sqs-block-image-link"); for (let i=0; i<keyImages.length; i++) { keyImages[i].onclick = keyHandler; } </script> this time round, we have a function that plays your key sound and then waits 2 seconds (2000 = milliseconds) and clicks the link a second time. After the function we go through every link in the relevant section on your website and assign that function to all of them so it doesn't matter which one you click. Hopefully this works out, although I should point out that I'm really not sure about sound on websites unless its absolutely necessary. Putting it here for educational purposes though and I appreciate its a stylistic choice.

you could try something like this: Go to the settings of your paintings page by clicking the cog icon to the right of it in the pages list Click on Advanced and then in the "Page Header Code Injection" paste the code as follows <script> document.addEventListener("DOMContentLoaded", function () { // configure the classes we're looking for const listClass = "div.gallery figure"; const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a"; const lightBoxCaption = "lightbox-caption"; const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']" // select all gallery elements, find their captions // if they exist then extract the slide id and add a new caption element // to the lightbox slide const n = document.querySelectorAll(listClass); for (var i = 0; i < n.length; i++) { const a = n[i].querySelector(linkClass); const c = n[i].querySelector("figcaption"); if (a && a.href && c) { const id = a.href.split("=")[1]; const lbSelector = lightboxSlideSelector.replace("{0}",id); const lb = document.querySelector(lbSelector); const cp = document.createElement("figcaption"); cp.className = lightBoxCaption; cp.innerHTML = c.innerHTML; lb.appendChild(cp); } } }); </script> <style> figcaption.gallery-caption { display:none; } figcaption.lightbox-caption { position:absolute; bottom:0; color:white; text-align:center; width:100%; } </style> The script bit at the top finds any captions that you've created and creates a copy that it appends to the relevant slide in the lightbox. When it creates that copy it assigns a class called "lightbox-caption" that you can use to style the captions. This code should work in the three grid modes of simple, masonry and strips. The style section beneath the script does two things: firstly it hides the caption in the masonry view (as you requested, but you can remove that if you want). You should leave Captions selected in the options though as they need to be there for the script to find them The second bit styles the lightbox caption. at the moment it centres them at the bottom of the photo, with white text overlaying the painting. you can tweak those settings depending on how you want the caption to look Try it out, see how you get on.

Without seeing your site I can't be exact on this, but it's an interesting question. The vast majority of layout rules will be governed by how many pixels are available to the browser's client width, so display scaling will affect that as it changes the device pixel ratio and therefore the number of pixels that "fit" on the size of the screen. Squarespace's underlying CSS (as far as I can tell on a 7.1 site) does have a very small amount of resolution/device-pixel-ratio media query work which changes properties based on screen resolution, but this only really applies to some images and video overlays (which makes sense I guess, as that's where dpi will be really obvious). Like most modern sites, SQS's stylesheets are done in relative units (rem) which mean that text sizes will change based on the base font-size that's available to them (set by SQS at 16px in the base html rule), but (again, as far as I can tell) these are only done based on pixel width of the site (and sometimes orientation for tablet stuff). my guess is that the reduced screen size, combined with a 1.25 device pixel ratio is causing a change in the text size. this is probably because you have a very large site width set. in the screenshot you'll see that I set a site up at 995px and the base font-sizes are changed based on that, so if you've set your site to be something like 1600px wide, then a rule will be written to change the font size based on that. at 1920px browser, scaling at 1.25 once you've removed some browser padding etc comes down to 1500px ish so that might change it. you could write some additional css to try to override a specific resolution (resolution - CSS: Cascading Style Sheets | MDN (mozilla.org)), but that doesn't seem right to me, too many variables for you to try to control, so I'd probably try to set an additional breakpoint in your custom CSS and fix the font size to 16px at the .site-wrapper class level. (unless you can bring in the max size of your site to smaller - but that's a design choice). something like this might work, but without seeing your site can't be sure. the idea is to find another breakpoint, and then override the font-size adjustment that sqs are making and fix it back to 1 rem, which will be whatever 16px effectively looks like. @media screen and (min-width:0) and (max-width:1200px) { .site-wrapper, .sqs-catalog { font-size: 1rem !important; } } If you want to post your site url could probably be more specific. Always going to be difficult on huge screens, but I think the issue here is number of pixels and I'm guessing a very wide site width set in the site styles. EDIT: noticed a question in your original post: you definitely shouldn't start trying to set zoom levels. you can't set the browser one for a start, but css zoom can be set, but you shouldn't do that here. best to try to work with the breakpoints and work in pixels for media queries and rem for everything else...

a:not(.sqs-block-button-element, .header-nav-list a) { color:red !important; } comma separate the selectors that you don't want to hit. I still think that this is not specific enough a rule, you'll probably find a lot of random links that squarespace use that you'll have to keep adding to your exceptions list, might use different classes on mobile etc. e.g. you'll notice that your main icon in the header is a link too so that has an odd behaviour on it, so you'd need to widen your exceptions to exclude the whole header. e.g. a:not(.sqs-block-button-element, .header-nav-list a, header a) { color:red !important; } just putting it here for information purposes. My advice would be to try to be specific/inclusive on your rules rather than broad/exclusive.

@Anele0610 the code I posted for liam was more of a general pointer, so I wouldn't recommend using it "as is" as it would be applied very broadly which would probably lead to some unpredictable outcomes (as you're probably finding out) the way that this sort of CSS code works is that rules have a specificity. so you need to work out which links in your site need the special treatment and then write css rules that hone in on that type of link or region of your site. the added issue is that squarespace do all their own formatting and you're fighting against that in some cases. You can see this from how your buttons are changing on hover (as squarespace use links for buttons). just having a quick look at your site, I would say try to work out which links you want to apply it to. you'll probably need to have a slightly different treatment for each one to modify the placement of the background image. here's an example. there are three rules here that override the colour of the link. each one gets more specific. if you apply these to your site you'll see that the header nav goes green, other links that aren't buttons go blue and buttons are red. /* every link red. not very specific so will be overridden by later rule */ a { color:red !important; } /* more specific (negative condidtion), color all links that are not buttons blue */ a:not(.sqs-block-button-element) { color:blue !important; } /* more specific (positive selection), take links that are in navigation */ .header-nav-list a { color:green !important; } so you could use something like this to hone in on the correct links to get your positioning right. I don't think that this is a great effect to be used widely, it upsets the flow of standard text and squarespace button layouts for example, but you could perhaps use something like the last rule to only apply it to the header which is a very consistant and predictable layout. so to do that, take the original code and just add .header-nav-list before the a. this means, find all "a elements" (links) that are children of the "header-nav-list". that might get you somewhere, but this kind of effect is tricky to get right in a catch all situation good luck!

in the javascript, the varible c2 finds the element that you want to insert the picture before, so change that from the "content" wrapper to the "top" wrapper. const c2 = document.querySelector('.blog-item-top-wrapper'); all the other code can stay the same, hope that helps

OK, so the way that MyFonts do this is they let you build a "kit", which is really a download of a zip file containing a CSS file and the web fonts files (*.woff or other web font extensions). the counter is actually inside the .css file and looks like this @import url("//hello.myfonts.net/count/xxxxxx"); so there would be a couple of ways to add this to Squarespace, but I think by the sound of it you've already added the custom font file by uploading it in the Custom CSS part of your site. if you've pasted in both the counter import above and the @font-face declaration that's also in your CSS then that should be enough. I did also notice that the myFonts web counter is currently down, so maybe that's why it's not updating if you already have the import url included

You shouldn't need to add anything: they track it themselves based on numbers of requests. it will only matter if you're using a pay as you go font, but if you are using one of those then you buy a certain number of page views (which may expire after a number of years depending on the individual font licence). MyFonts track the number of requests from your site and if you exceed the number (or your paid-for views expire) then your font will stop working and you'll need to go back and buy more. they should notify you, but apparently you can also check it here https://www.myfonts.com/my/orders/webfontusage.html

As with all "codepen doesn't work" posts on these forums, you really need to be careful as it isn't always pure HTML, CSS or JavaScript you're looking at: they allow pre-processors to be used (and also external dependencies but that's another story and not relevant here). In this case, it isn't real CSS you're looking at, it's actually being compiled using LESS, which is a well-known CSS pre-processor. to get it to work you need to use pure CSS. replace the style section you've included with this and you'll find it works just fine. <style> .todo-list { background: #FFF; font-size: 20px; max-width: 15em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; } .todo:last-child { border-bottom: none; } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: #135156; transition: all 0.4s linear 0.4s; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; transform-origin: 13.5px 12.5px; transform: scale(0.4) rotate(0deg); -webkit-animation: none 0.8s linear; animation: none 0.8s linear; } @-webkit-keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); } } @keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; transition-delay: 0.16s; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; transition-duration: 0.32s; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { -webkit-animation-delay: 0.56s; animation-delay: 0.56s; -webkit-animation-duration: 0.56s; animation-duration: 0.56s; } .todo__state:checked ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } .todo__state:checked ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; } .todo__state:checked ~ .todo__icon .todo__line { stroke-dashoffset: -8; } .todo__state:checked ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: 0.48s; } .todo__state:checked ~ .todo__icon .todo__circle { -webkit-animation-name: explode; animation-name: explode; } html { background: #ddd; } html { height: 100%; display: flex; } body { width: 100%; margin: auto; } </style> you might need to edit it a bit, I just lifted this straight from the _processed_ CSS output from the original codepen.

@anonymous1 Sorry, I had conflated the original poster with you and assumed you knew a bit more javascript. Essentially all you need to do is have an element that you can put the variables into. document.write will work, but you might want to do it in a more robust manner by finding the element you'd created (or elements if you want to use it in multiple places). so take out the console.log (which was just there for test purposes to show you the values) and replace it with some code that finds an element and updates its value. there's a million ways to do this, and how you implement it might depend on whether you're using a code block, or injecting the code in the page. Here's an example with a code block. You add some HTML in to define where to put the firstname (I've done this with a class so that you could have multiple replacements) and then add a script block after it using the method I posted before. (I've added some more defensively written code so that it's less likely to error). so the code block contents would look like this: <div> Hey <span class="customUsername">Friend</span>! It's a beautiful day to have a beautiful day! Goodbye <span class="customUsername"></span> </div> <script> if (document.cookie) { const cookieObject = document.cookie.split(';') .map(kv => kv.split('=')) .map(kv => [ kv[0].trim(), decodeURIComponent(kv[1]) ]) .reduce((o,kv) => { o[kv[0]] = kv[1]; return o; },{}) ; const info = cookieObject["SiteUserInfo"]; const userSiteInfo = info ? JSON.parse(info) : {}; const userFirstName = userSiteInfo["firstName"] || ""; const usernamePlaces = document.querySelectorAll(".customUsername"); usernamePlaces.forEach(function (u) { while(u.firstChild) { u.removeChild(u.firstChild); } u.appendChild(document.createTextNode(userFirstName)); }); } </script>

just posted a possible option for getting at this with javascript in another question on here. dropping it here in case it helps you

If you inject javascript code into the page then it executes within your domain / origin, which will mean that you can access the cookies within that origin. I haven't done much looking into this, but a quick inspection of the data in the developer tools make it look like you can get to some of this. This is demo code, you'd definitely want to do better than this but this might get you started. const cookieObject = document.cookie.split(';') .map(kv => kv.split('=')) .map(kv => [ kv[0].trim(), decodeURIComponent(kv[1]) ]) .reduce((o,kv) => { o[kv[0]] = kv[1]; return o; },{}) ; const userSiteInfo = JSON.parse(cookieObject["SiteUserInfo"]); const userEmailAddress = cookieObject["iterableEndUserId"]; const userFirstName = userSiteInfo["firstName"]; const userId = userSiteInfo["siteUserId"]; console.log(userId, userFirstName, userEmailAddress); I don't have member areas on my site to test it properly but ran this in the console on the align/flow yoga demo site Squarespace put up and seemed ok. Not sure what you'll do with the Id, but I guess you could call Squarespace's internal client libraries with it. let me know if this helps

python is a server-side language so you won't be able to execute it client-side (which is where squarespace custom code can be injected and executed). in the post you reference they are using javascript (with jquery too) which executes on the client. I think your best bet is to rewrite your algorithm in javascript and inject it into the page, then use a little bit more javascript to find the form button and intercept the click handler to edit where the page goes. You could do this with an existing form, or just design your own in a code block. If that doesn't suit you, you might find there is an external provider that would support something liek this e.g. google forms and maybe you could design your algorithm on there, and embed it. If you must use python, then you'll need to stand up your own webserver to process the form results and then redirect accordingly. probably not worth it unless your python algorithm is extremely complicated.

@libertine OK, you just need to find a way to target only the about page. One way to do this is to find the section id and use that in a CSS rule that you paste into your Custom CSS. The easiest way to find the section id is using the Squarespace ID Finder chrome extension. For your about section the id is "60e3ad8978955f711e766495", so all you need to do is take the code from above and prefix it with a rule to target only this id. it looks like this // justifies paragraphs in the "about" section section[data-section-id="60e3ad8978955f711e766495"] p { text-align:justify; } add this to your custom CSS (in the main design menu). because this is a more specific rule than Squarespace's global text align rule you don't need !important here as I posted in my answer above. As a footnote I would add that I don't think justifying text is a very "web" thing to do. it tends to be something you do to reinforce the idea/shape of columns of text. that said, I understand it's a client choice.

you can add something like this to your custom css. (go to your main design menu). nav a[href="/sous-catgorie"] { animation: blinkingText 0.5s infinite alternate-reverse; } @keyframes blinkingText { 0% { color: black; } 100% { color: red; } } the first rule targets the just the navigation link that points to /sous-catgorie, and tells it to use the animation we specify in the next rule. it runs it forwards then backwards, taking half a second to go from 0% to 100%. the second rule tells it what color the text should be at each stage. in this case start black and end red. you could add other similar lines at 50% if you want it to go through three colours. if you wanted it to blink in and out, you could animate the opacity instead of the colours by changing the second rule to this @keyframes blinkingText { 0% { opacity: 0; } 100% { opacity: 1; } }