iamdavehart

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; } }

In the latest version 7.1, Squarespace only lets you inject code into the front-end and it gets executed there, so the kind of thing you're talking about isn't really possible as it's a server-side action. As far as I know, it's also not possible by developing your own template as they really work by processing JSON-T templates and don't give you low level access to any server side processing. you can check the documentation at developers.squarespace.com but I had a quick scan and couldn't see any way to access secrets. Because of that, in my opinion, it's not possible to store variables on the client side securely and therefore I would say JWTs are out of the question because they rely on being signed by a server. Don't know your level of expertise so forgive me if any of this is stating the obvious... I think the short answer is squarespace lets you directly inject code, but only ever to be executed on the client side. therefore no server side (at least no useful server side code execution environment). My question would be: Why do you want to create a JWT? the point about a JWT is that you can validate the server it came from (or a set of servers who share the signing secret), so clients usually receive it from a server and send it back with their requests. so if your end goal is to send it to some non-squarespace server then you really need to receive your JWT from that server. If you're not going to ask the user for credentials to exchange for the JWT then I'm not sure what you're trying to achieve. If you just want a unique user but dont' care whether they're authenticated (something similar to the way that google analytics do) then just issue one based on origin/ip etc from another server. either directly through javascript or through a clear pixel. One thing to consider is that - again depending on expertise - any injected client-side code you execute does so in squarespace's trusted origin which means you can use javascript to read their cookies / session storage. they have squarespace analytics ids, session ids, and a few other things that you might be able to read as a proxy for whatever you're looking for. not sure whether that helps you?

OK, add !important to it, which tells it to override any other rule that's been set at the same or a more specific scope. like this: .header-nav-item a { text-decoration: underline !important; }

remove :hover from your rule. .header-nav-item a { text-decoration: underline; }

The css property you're using is correct. the issue will be how you target the paragraphs you want to justify. if squarespace already has a text-align code put in for that piece of content (from a more specific rule) your css code won't apply without !important being added. I'd question whether you want this effect for the whole site, many of the section blocks in summaries etc are way too small for this effect to be a good decision. Anyway, if you want to do it for the whole site something like this added to your custom css will do it p { text-align: justify !important } I'd probably suggest that you try to target certain items more specifically.

Here's a CSS only way. you need some way to target them, so what I'd do is add your three things in a little bulleted list in your excerpt. then you can use css to target each one, using nth-child(1) to select the first (bedrooms), nth-child(2) to select the second (bathrooms) and nth-child(3) to select the parking spaces. the bulleted list option will come up in the formatting bar as you edit the excerpt you could then add the following rules to your custom css section in the design menu. This would mean that this was applied to all blog excerpt lists though so you might want to inject it into the specific page if it's only for one place. .blog-excerpt ul { padding:0; margin:1em 0; display:flex; justify-content:center; } .blog-excerpt ul li p:before { content:'' !important; } .blog-excerpt ul li { display:flex; padding-left:10px; } .blog-excerpt ul li:before { content:''; display:inline-block; width:20px; height:20px; margin-right:5px; background-size:cover; } .blog-excerpt ul li:nth-child(1):before { background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png); } .blog-excerpt ul li:nth-child(2):before { background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png); } .blog-excerpt ul li:nth-child(3):before { background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png); } the width and height of the image is set in the 4th rule (currently 20 x 20). you must set this to the correct aspect ratio and size of your icons. change the image urls of the last three rules accordingly. You'll need to upload the icon files to your site. you can do that in the custom css section at the bottom (see here for help on that https://support.squarespace.com/hc/en-us/articles/206545567).

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. this effect is actually what's causing the odd behaviour in your "non-working" example: jquery contains the draggable div to the "#about" section buy you have moved the image say 300px to the right of the draggable div so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css If you reposition the draggable div using css, rather than the image, you'd get more consistent result. ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

you're specifying "#about" for your containment option, which means "find me the element with the id 'about' in the document". this element doesn't exist in the page that you think is working, but does in the page that you say does not work. This means that in the "working" page, because it can't find the about element, it defaults to having no containment set. In the non-working one, you're containing it to the about id, which is the section of the index page. there's an issue here though with the way that squarespace or the template positions that element, which means that the draggable code doesn't work as you might expect. to fix it, I would just remove the containment option. that way you'll get consistent behaviour between both. that behaviour will actually be limited to the code block though because I think squarespace will hide the overflowing space. https://api.jqueryui.com/draggable/#option-containment

if you're doing this in a 7.1 site, then find the portfolio list page that has the grid view on the front. in your case it will be the one with the url /work. add a section after the portfolio grid. you can just use a blank one, set its height to small if you dont' want it to take up too much space. insert a code block and copy the code in there. when the page loads it will find the item pointing ot work/uiux-mockups and repoint it to uiux-mockups (which will be another page you've created somewhere).

I would probably look at building the calculator or form on an external service (like google forms/sheets) and then embed it on your site using an embed block or code block. usually the external service will give a way of embedding it. If you don't want to try google forms/sheets, then there are dedicated services for this, a quick search on google shows one like https://calquo.com/ which has a free plan and squarespace instructions. Not endorsing that one, never used it, just showing that they do exist. (I know how to code so I would probably just write my own!). There's loads of others, free and paid. calculo.com convertcalculator.co etc. have a look at some of those. I've seen some one in the forum use https://grid.is/ too. I'm sure there's tonnes of options. if you don't know how to code, then this is the best way.

I think in the case of the mapbox stuff, I'd avoid the code, and just go straight for the iframe embed. you can just copy the iframe code straight into a code block or an embed block (using the </> option). Details from the link below. I just copied it in and it worked fine (if you're logged into mapbox the demo page will automatically include your api access key, if not you'll need to provide it here). https://docs.mapbox.com/help/glossary/iframe/ If that doesn't work please post the code that you're using, or the site that you're embedding on and someone will be able to help. you haven't really provided enough information about how it's going wrong to suggest a tailored solution...

to disable the footer site-wide, go to Design, Custom CSS and add footer { display:none !important } to your css. that will do it.

You're probably looking for a css rule that does something like this: <style> header { display:none !important } footer { display:none !important } </style> There are a few places that code can be added, so check all these: Settings > Advanced > Code Injection Design > Custom CSS Pages > For each page, click the Settings (Cog) Icon next to its name > Advanced (if it's happening for every page, it's probably not in one of these) It could also be in a code block, which - if it was to hide the footer and you put it in the footer - might be hiding itself. To make it possible to find that, then you need to open your configuration in "safe" mode which will stop scripts running in the designer. in the address bar of your browser, add "safe" to the config url, and hit enter e.g. https://xxxx-yyyyy-zzzz.squarespace.com/config/safe you should see a bar at the bottom that said Scripts have been disabled. hopefully your header will appear again and you can look for a code block either in the header or the footer. If you delete the code block the rule will be deleted Let us know how you get on.

There's multiple places you can add this sort of code, but they do slightly different things: if you're adding it to advanced CSS (i.e. Design Menu > Custom CSS) you don't put the <style> tags in. but if you do choose this option it will happen on every page. in my post I suggested that this was worth putting in page settings. So you open the settings for that specific page by clicking the cog icon to the right of the page and then click Advanced and add the code I posted inside there (complete with the <style> tags). You could also just put a code block on the page and copy the code I posted into that (with the <style> tags). I have tried it and it does what you asked for, so perhaps you could check that you've used the right option from above? e.g. this is the code injected via the page header settings

@bloop @CherryStCo I know that this is an old thread, but I just posted an example on someone elses question that may help you if you're still trying to do this.

You add the linked in pixel. Best place to do this is probably in the page footer code injection part. (you'd need business/premium for this as it's javascript). For your form conversion you need to add a conversion event in LinkedIn campaign manager. this gives you some javascript to execute, which you'll have to hook up with a code block. installing the pixel Probably best to do this in the code injection part. Get your pixel code from the LinkedIN Campaign Manager: Account Assets > Insight Tag. Go to the Install Tag section and expand "I will install this myself". Copy that code in its entirety. In Squarespace go to Settings > Advanced > Code Injection, and paste the code into the Footer section, click Save installing a conversion Set up your conversion in the LinkedIn Campaign Manager. Account Assets > Conversions. See here: Set Up LinkedIn Conversion Tracking | Marketing Solutions Help In step 3, make sure you select Insight Tag, and then Event from the Track dropdown Copy the code at the bottom of that page. it will look like this: window.lintrk('track', { conversion_id: xxx }) Now go to the page where your form is and add a code block after the form we need to attach the li tracking code to the button, so add the below code to that code block (but insert your own conversion_id from step above. <script> const btn = document.querySelector("form input[type=submit]"); if (btn && btn.addEventListener) { btn.addEventListener("click",function() { window.lintrk('track',{ conversion_id: xxxxxxx }); }); } </script> this assumes you've only got one form on your page. if you've got more than one you'll need to find the block ID of your form (use the Squarespace Block ID chrome extension) and add that before the form in the query selector There are other alternatives for link tracking if you're not using the LI pixel. you can use Squarespace's marketing section to build urls for LinkedIn Ads, and then look at tracking sources etc. you can also add hidden inputs to your form during the form design process and set the variable names to ss_source and ss_campaign_name and then the form will have the campaign submitted with it. Creating trackable links – Squarespace Help

Not sure what your other css is doing, but I think if you just need a carousel style slide show to be top then you just alter the top padding of the first section. see this other post I answered. (am assuming you're 7.1?)

can't see your site because it's not published but broadly speaking add the two images you want in different sections on your page. find the two section IDs and then add css to turn them on or off depending on whether or not its viewed in mobile. similar to the css in this post section[data-section-id="6108bec0e3a3c73804194bf7"] { display:block; } section[data-section-id="61258a40711e8b5459fb0271"] { display:none; } @media screen and (max-width: 768px) { section[data-section-id="6108bec0e3a3c73804194bf7"] { display:none; } section[data-section-id="61258a40711e8b5459fb0271"] { display:block; } } to find your section ids, use the squarespace id finder chrome section or inspect the source of your website.

could do something like this: @media screen and (max-width: 767px) { section[data-section-id="613300f85ee71865228d8aed"] .sqs-layout .sqs-row:nth-child(2) [class*=sqs-col] { float: left !important; width: 50% !important; } kicks in up to 767px (same as squarespace mobile styles) finds the second row in that section (the one that contains the items) sets its float back to left (it gets set to none by the default squarespace mobile layout) sets its width to 50% rather than auto to get 2 columns not sure if there might be more than four items in this view at some point, if so you might need to tweak that nth-child selector to get the rows you want

Looking at your site and the gif involved there's a couple of issues here. I don't think dropbox let you link directly to files any more and use them as a proxy web server. You'd be much better off loading the image up to squarespace and then using that image as @ghostplugins says. However, I think looking at the gif you're using, this won't get you what you want anyway. I think you mean for the asterisk itself to cycle through the colours. the code that you're trying to put in will fill the background. so you'll get a square gif flashing away but no asterisk (the asterisk gets made transparent by the css you've used). 🙂 EDIT! I didn't see the background-clip in the CSS, so if you just do what @ghostplugins said (which is my first point about dropbox not hosting files) it would work. however, the css animations below would work too because your GIF is just block colours. my bad! However, support for text background-clip can be a bit patchy (background-clip - CSS: Cascading Style Sheets | MDN (mozilla.org)), so leaving this here as a css animation alternative. 🙂 to get this effect you've got a number of options (use javascript, create a flashing asterisk gif etc), but I think the best is to use a css animation. doesn't require premium. Just replace the css you've been using with something like this @keyframes flashy-asterisk { 0% { color:red; } 32% { color:red; } 33% { color: blue; } 66% { color: blue; } 67% { color: green; } 100% { color: green; } } h1 strong { animation: flashy-asterisk 2s linear infinite; } the colours have been laid out like this to get it flashing like the gif, but if you removed the extra repeated stops (32% and 66%) then it would ease between the colours. the animation commands cycles between them infinitely over 2s. It starts and 0% and goes to 100% and then starts again at 0% looks like this Here's the css animations reference if you want to try different effects CSS Animations (w3schools.com)

I would add that codepens aren't written to be simply embedded into any old site, there's all sorts of things that could trip you up, especially if they've used classnames or document Ids that trip over squarespace's own ID system (mostly Yahoo's naming system actually, but that's another story). A full implementation may require editing of the code, not just for IDs, but for execution order too, as squarespace may not have loaded the full page by the time the code executes. For simple examples, what I've written will probably suffice, but some codepens get very long, and they're not always written in the most robust way. Still, hopefully what I've written will help, but codepen is a demo site, not always production code and certainly not written to play on any site other than codepen. For example, in your horizontal text holder, the author of the code pen changes the style of the p (paragraph) element. this has a very good chance of affecting the style of all paragraphs on the page that the code block is hosted, so you would need to change that. One way to do that is to find the block id from squarespace and add that before EVERY rule in their CSS. so "p { ... }" becomes "#block-yui_3_17_2_1_1629035493144_2260 p { ... }" Good luck!

Your code block should look like this then: <!-- insert any HTML code from the pen below this line --> <!-- insert any CSS Code between these style tags --> <style> </style> <!-- insert any JS dependencies here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src=""></script> <!-- insert any JS Code from teh code pen inside these script tags --> <script> </script> As the pen contains CSS dependencies, you need to add those to the page header. you *could* put these at the top of the code block too if you want, but it's not best practice for link tags. If you're just trying it, then no harm doing that, but better way is to put it in the header. same is probably true for the JS dependencies tbh, but it depends how they've been written. Open the squarspace page's settings, click advanced and add the link tags into the code injection <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" /> <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css" /> if the codepen had any HTML head code (your example doesn't) then you would add that here too.

GSAP is an animation library. and yes. It is a dependency. It needs to be added as a dependency as I mentioned above. CDN is just a way of saying URL in this case so add the url from the links in your screenshot into the src property of the script tags. Will post an example shortly

hi @jenniferboddam @DonnaMartinek you add a code block Put the HTML section from the code pen directly in the block. After the html code add the css part inside <style> </style> blocks add the JS bit after that inside <script> </script> tags All three sections go in the same code block. That should do it for most codepens. If it doesn’t then it’s possible that codepen has some additional dependencies that you need to add. Extra dependencies can be checked by clicking the cog icon in the code pen to look at its settings. You’ll see a section JS. If any files are listed there you’ll need to add those. Eg. in the Original post the codepen referenced jquery and selevtivizr. each dependency gets added in its own script tag like this <script src=“dependencyurlhere”></script> If there are css dependencies then they will affect how the codepen looks. These dependencies (often fonts) would need to be added int he page header. Using a link tag go to the advanced section of your page and add this to the page header <link rel=“stylesheet” href=“cssdependencyurl” /> (editing on my mobile so can’t add code blocks here but I’ll try to update later with a better example)

I think the short answer to your final question is: No. This is going to be very challenging due to web security / cross-domain scripting security issues etc. The issue is that the iFrame is in one document and its content is in another. these documents cannot script against each other which you would need to do in order for the child document to wait until its content had loaded. As you don't have control over the child document (recman.no) you won't be able to do this. The only way is to have a cross-frame messaging which you would have to code in both the parent AND the child. It's going to be impossible in this case as you don't have control over the child document. Sorry. But if it's any consolation, the fact that you can't do this has probably saved pretty much everyone on the Internet from having their online lives hacked/ruined etc. 🙂