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


  • Posts

  • Joined

  • Last visited

Everything posted by iamdavehart

  1. 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).
  2. 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.
  3. 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
  4. 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).
  5. 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.
  6. 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...
  7. just adding here that if you went down the tagging route, Squarespace adds the tag into the main article element on the product page, so you could add another rule that would do the fix on the main product page article.tag-portrait .ProductItem-gallery-slides::before { padding-bottom:150%; } so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.
  8. to disable the footer site-wide, go to Design, Custom CSS and add footer { display:none !important } to your css. that will do it.
  9. squarespace have an interesting way of laying out image thumbnails. It's to do with how they make the grids layout evenly and respect focus points on the image etc. for each grid item the image gets put in a zero height container which is then padded out by percentage to make sure that the image covers it. this percentage is really the ratio of the image. so in your (landscape) case that padding will be set to 66% (2/3). What you need to do is locate the pictures that you want and change that padding to 150% (3/2). How you select those is an interesting problem. It seems like you've laid them out in a particular way to try to get the vertical ones together, in which case you can use an nth-child selector to choose all the grid items after 27 (9 rows of 3 that are landscape). e.g. this uses the section id from your website by the way. you could just add this to your custom css to see it work straight away section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item:nth-child(1n + 28) .grid-image-wrapper { padding-bottom:150%; } however, this is probably not an ideal solution as you'd need to change the rule if you ever added any portrait pictures before etc. Unfortunately squarespace put the ratio of the image on the img element and it's very hard to then change the parent based on an attribute of the child using only css. squarespace does however add classnames when you tag products so one solution might be to add a tag "portrait" to your portrait orientation products, you could then alter your rule to target those tagged portrait like this section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item.tag-portrait .grid-image-wrapper { padding-bottom:150%; } you'd still have to remember to tag them as portrait though. I think this is a pretty good outcome If you really wanted it to "just work", then you'd have to add some javascript (premium feature) to go through the grid and workout whether they were portrait or not and apply the padding style (or a classname that referenced the padding style). e.g. if you were to add this to a code block on the page this would set up a class called portrait-fix that sorted out the padding, then loop through all the images and check their dimensions, applying the fix if it found a portrait one. <style> .portrait-fix { padding-bottom: 150% !important; } </style> <script> Array.from(document.querySelectorAll(".grid-item img")) .forEach(i => { const d=i.getAttribute("data-image-dimensions").split("x").map(d=>parseInt(d)); if (d[0]<d[1]) { i.parentElement.classList.add("portrait-fix"); } }); </script> you'd get a slightly odd look if you had one portrait one in a row with some landscape ones, but you haven't specified what you'd want to do there, so that might require a little more thought. I think the second option, of manually tagging them with their orientation is the best route personally. Hope it works! Guess I should have told you to hire me rather than just writing the answer out.... 🙂 Your pictures are lit, mate!
  10. 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.
  11. 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
  12. @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.
  13. 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('click',{ 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
  14. 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?)
  15. 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.
  16. 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
  17. 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)
  18. 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!
  19. 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.
  20. 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
  21. 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)
  22. 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. 🙂
  23. put your desired css inside a media query that only kicks in up to 768px (iPad width - this is the size squarespace kick their mobile styles in). e.g. something like this. @media screen and (max-width: 768px) { #introduction {.image-title p { font-size: 25px !important;} } } add this in addition to your existing rules of course.
  24. it's just an iframe so you can use an embed block and hit the </> to copy in the code. or you can use a code block. seemed to work for me. it's not a direct integration so squarespace aren't handling the transaction. opensea do all of that. worked best for me when I tried it using the widest content width you can. make sure you're using the the assets link for the collection. e.g. <iframe src="https://opensea.io/assets/boredapeyachtclub?embed=true" width="100%" height="500" frameborder="0" allowfullscreen /> feel free to send me a punk or an ape in return for my services iamdavehart.eth 😉
  25. Hi Faisal, if you add this to your custom css from the main design menu it should do what you want. .header-display-desktop nav.header-nav-list { flex-direction: row-reverse; } .header-display-desktop nav.header-nav-list div:first-child { margin-left:1.3vw } first rule changes reverses the order of the navigation list second rule puts back in the left hand margin which squarespace removes for the first child when ordered LTR to make the spacing correct
  • Create New...