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

Leaderboard

Popular Content

Showing content with the highest reputation since 09/21/2021 in Posts

  1. My trick is: - hide the default cart of squarespace - adding the icon of bag instead Try adding some in Home > Desgin > custom Css. I hope it suit for you .icon--cart g { display: none !important; } .icon--cart { background: url('https://api.iconify.design/clarity/shopping-bag-line.svg?color=black') no-repeat center center / contain; } You can change the url in background with the right path to your icon file
    3 points
  2. HoaLT

    Summary Images Cut Off

    Mine is Google Chrome Version 93.0.4577.82 (Official Build) (64-bit)
    2 points
  3. You can get some reference in this post with your cover pages
    2 points
  4. 1st Point: You can try the Design > Custom CSS with the following setting @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right { text-align: center; } #block-yui_3_17_2_1_1632274074310_17542 a { padding: 1em 1.404em; } [data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper { padding-bottom: 0 !important; padding-top: 25vmax !important; } section[data-section-id="614a87c7f80dc06b128e4478"] { height: 36vh !important; } section[data-section-id="614a87c7f80dc06b128e4478"] .section-background { bottom: unset; } }
    2 points
  5. You need to modify your javascript: Replace with the following script $(document).ready(function() { try { var container = Y.one("#block-d3fe1f534bd0f0631332"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true, } }); container._node.addEventListener("mouseover", () => { gallery.setAttrs({ "autoplay": false }) }) container._node.addEventListener("mouseout", () => { gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, "randomize": true, } }) }) } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); Hope work well for you
    2 points
  6. The following ruleset is causing the div to expand and cover the links. Take it out. #book-me { bottom:0; top: 75%; padding-right: 0px; transform: 0; } Let us know how it goes.
    2 points
  7. Is it that you mean?
    2 points
  8. After reviewing again your code, you could try again the following steps: Step 1. Javascript: Adding the div class ="language" in the header-inner, you can achieve it by changing one bit of your script in the code injection... from /*setup language switcher with flags*/ $('body').prepend('<div class="language"> to /*setup language switcher with flags*/ $('.header-inner').append('<div class="language"> Step2. Adding Design > Custom Css @media only screen and (min-width: 1024px) { .language { position: absolute; top: 50%; transform: translateY(-50%); } .header-nav-wrapper { padding-right: 100px; } } @media only screen and (max-width: 1023px) { .language { position: absolute; top: 50%; transform: translateY(-50%); padding-right: 50px; } } Hope it works for you!
    2 points
  9. Add the following Custom CSS: .empty-message { visibility: hidden; } .empty-message:before { visibility: visible; content: "Your custom empty cart message"; } Note that you'll need to save the CSS and then refresh the page to see the changes. If this post has helped you, please click an icon below ⬇️
    2 points
  10. Try this in Custom CSS: h2.list-item-content__title { font-family: 'Allenoire' !important; }
    2 points
  11. This looks like an A/B test by Squarespace. Only some users are seeing it. If you try visiting the templates page several times with an incognito window (closing it each time) it may appear. The button doesn't have a URL. 😒
    2 points
  12. Add to Home > Design > Custom CSS .sqs-block-newsletter .newsletter-form-field-element { padding-top: 10px !important; padding-bottom: 10px !important; } button.newsletter-form-button.sqs-system-button { padding-top: 10px !important; padding-bottom: 10px !important; }
    2 points
  13. Site URL: http://www.glowing.org/playing4theplanet Hi I'm hoping to be able to share images/custom text (?) for our social media awareness campaign. I thought I could make a gallery of images and then have users be able to share them individually to Facebook/Twitter/Instagram along with copy that we were going to include. We use the Brine template and would prefer not to influence the parent site (glowing.org) We'd been using ShareThis but it's pretty terrible. Any ideas?
    1 point
  14. deaton72

    initState questioin

    Site URL: https://corn-apricot-zn88.squarespace.com/ I am using an initState filter in a script to give a blog block an initial view - using the universal filter. Does anyone know if I can do this for the blog itself and not through the filter.... I don't know anything about initstate. BUT, when I have it enabled for the blog summary, then whenever you back page from a filtered item it shows the init view again. Hoping there's a workaround!
    1 point
  15. Hi all - I'm not sure if this requires creating/editing CSS - would rather avoid that if possible - but 2 things I'm trying to figure out if possible: 1) I want more space on my homepage for the header logo, or, a way to make the logo wider. It seems to be limited to 1200px & 30% of the header width. 2) Is there a way to add & center a logo or image over a background image? BONUS QUESTION πŸ™‚ : Can I add a color/background to my site header or other sections without it being applied to other page sections? (This seems to be mentioned in the 7.1 guide, but I haven't found the exact method to do this. thanks!
    1 point
  16. Site URL: https://bbad-wwgc.squarespace.com I'm hoping to ask for some help/magic on a problem that I have on the Facebook page plugin. I have placed a codeblock and added the iFrame code however it is non responsive. When you scale the page the content inside the codeblock does not scale, is there a solution for this? Password: bbad-wwgc I hope to hear from you. Cheers, Dennis
    1 point
  17. Site URL: https://studiojunk.squarespace.com/ Hi, I wanted to add a Star Wars scrolling text to the 3rd section of my homepage. I tried implementing from other tutorials but I can't seem to turn it around right. I attached a picture of the section I need help with. Here are my references: https://css-tricks.com/snippets/css/star-wars-crawl-text/ https://codepen.io/scottbram/pen/KuHsl Site: https://studiojunk.squarespace.com/ Password:brineintopedro
    1 point
  18. Site URL: https://www.methodistpreschools.org Hey guys, On 7.1, is there a way to have CSS stick with a page when it's duplicated? The reason: in the future, my client is going to have to duplicate (multiple times) a page with lots of CSS applied to it. The way it is now, she is going to have to install the Chrome Block Identifier and insert section IDs into Custom CSS. So I'm wondering if there's an easier way?
    1 point
  19. Hi all, Having a little trouble adding a custom canvas background to the Julia template. Have tried amending the CSS as follows: But it just doesn't seem to work, and I'm unsure why. Any help appreciated! The page in question isn't active currently, so apologies if this will seem very abstract in practice. Cheers, Adam
    1 point
  20. Use this new code /* Footer layout */ div.Footer-middle { flex-direction: row-reverse; } div#footerBlocksMiddle>.row { display: flex; flex-direction: row-reverse; } @media screen and (max-width:767px) { div.Footer-middle { flex-direction: column-reverse !important; } div#footerBlocksMiddle>.row { display: block; } div#footerBlocksMiddle { flex: unset; } }
    1 point
  21. Hi, I see some problems #1. Tablet. #2. Page: Buy from Amazon - Device: Table
    1 point
  22. I am currently setting up a store with Squarespace and I am fairly new to it (more familiar with Shopify). I am using the theme "crosby" version 7.1. I have set up all the products with the collections being put into the "categories" tag. I have got all my collections displaying correctly however I would like to add a custom banner too each collection page and ideally a block of images at the bottom. At the moment I can only add one which appears across all pages and from searching it seems you can only custom code it to get around this is that correct? I have attached an example to show what I mean. Thanks!
    1 point
  23. Try the following configuration in Desin > Custom Css @media only screen and (max-width: 768px) { .homepage [data-slide-id="610c29e83f1f825f0dce7cfa"] img { height: 100vh; width: auto; position: relative; transform: translateX(-50%); left: 50%; } }
    1 point
  24. Here is the result after remove padding
    1 point
  25. Christy, my goodness. Thank you SO much. I can't tell you how long I've been going at it trying to make it work. That worked flawlessly and now my site looks perfect. THANK YOU!
    1 point
  26. #1. Add to Custom CSS a[data-folder-id] { position: relative; right: -10px; } #2. Add to Custom CSS [data-folder] .header-menu-nav-folder-content { justify-content: flex-start; } #3. Use this CSS a.header-nav-folder-title:after { content: "\e009"; font-family: 'squarespace-ui-font'; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; }
    1 point
  27. @wolfsilon - adding padding-top totally worked. thank you!
    1 point
  28. Thank! Now it works just as i need it too! Yeah, I know about that double jQuery, but for some reason the script stopped working when I tried to remove it. As long as it's not breaking anything I'll let it be.
    1 point
  29. PS: You got 2 jQuery instance on the site, consider to remove one of them and move it into top of header injection BTW, here is the result I got with the update position, both desktop and mobile:
    1 point
  30. You can duplicate the site & shared duplicated site url
    1 point
  31. Hey Ahmeid, It seems like you're looking to upload videos as thumbnail images. This is currently not possible. You can, however, upload a video as a background video, directly to your site. We have some further information on how to achieve this in our "Adding videos to your site" guide.
    1 point
  32. Creedon Thanks a lot. You are the best I only modified it a little so the Logo be just a division instead of a heading. Thanks again
    1 point
  33. Site URL: https://www.lachlanmcnabb.com/ Hi I am trying to control the spacing between sections and blocks. If you look at this homepage - there is a huge gap underneath "CHECK OUT THESE ACTION SHOTS BELOW" block and the gallery section underneath. I have reduced it as much as I can with the block controls. I would love any suggestions on how to fix this. The site is unfinished but this is driving me crazy Squarespace used to be so easy to use and always looked good because of the consistent spacing. This latest version is INFURIATING to use with everything "smartly" popping in and out - can I disable all that movement? Many thanks in advance WEBSITE: https://www.lachlanmcnabb.com/ PASSWORD: MTB123
    1 point
  34. You didn't provide a link to the site/page, but I imagine some CSS like this will work: .newsletter-block .newsletter-form-button-wrapper { width: 100%; }
    1 point
  35. Site URL: https://www.redarrowmedia.com/portfolio-copy Hi there, I'm having a hard time changing the background color of this container to gray. Can someone help me with the code? I don't understand what to put before the: { background-color: #c4c9d1!important; padding: 30px!important;} I've tried: div#row.sqs-row { background-color: #c4c9d1!important; padding: 30px!important; } but it doesn't work. I'm trying to get it to look something like the example: thank you so much for any help!
    1 point
  36. The only plugin I've found that is powerful enough to create a Filter feature is the Universal Filter plugin. However I haven't used it in this case, so I'm not sure it is possible. You can contact Plugin author to ask him. The plugin supports Event Page, Blog Page, Product Page, Summary Blocks,..
    1 point
  37. Genius! it worked perfectly thank you
    1 point
  38. You can do this on the checkout page using a custom checkout form. You cannot do this on the cart page.
    1 point
  39. This worked perfectly, thank you so so much!! πŸ™‚
    1 point
  40. @jaiabird +1 for Handbrake. I've used that app and it works well. Also if you can handle hard core command line Un*x tools then you can install ffmpeg on macOS. Don't know about that on Windows. Lots of examples on the web for various conversions with ffmpeg. I used MacPorts to install ffmpeg on my Mac. MacPorts is also fantastic by the way. I use ffmpeg to convert my QuickTime screen recording .mov files to .mp4. for a substantial reduction.
    1 point
  41. Thank you @rebeccagracedesigns!!! I'd never have found this. How bizarre that you can only do this via the mobile app - Squarespace really need to add this to desktop too 🀯 Here are the instructions for anyone following this post -
    1 point
  42. This is another example of Squarespace being US-centric. Unfortunately it cannot be changed. I'm hopeful that when Squarespace update their old YUI3 calendar block, they'll add some customisation options to make this possible.
    1 point
  43. Site URL: https://raeraeoflight.org/ Hi - We have a small, new non-profit and we are working on new fundraising event. I would like to be able to have additional functionality around the registration / donation process for the event and need more functionality than the donation block allows. We'd like to have team sponsors, individual sponsors, a live fundraising progress widget, etc. Does anyone know of fundraising software that integrates with squarespace that would allow this kind of functionality, and not cost a fortune? Thanks in advance.
    1 point
  44. Hi, Is there any way to bring in (product) details from the JSON via custom code blocks or code injections? For instance bringing in size dimensions on a product details page of a theme where it is currently not used? I tried to use {keywords}, but they get printed as-is. I know developer mode is an option, and would probably give me the flexibility. However I am weary of turning on developer mode on a site where I want my client to be semi-independent and not get to me with requests for changing margins and colours. Does anyone have/had similar concerns and experiences? Thanks heaps, Merel
    1 point
  45. Hi, Insert this code in your Footer Code Injection. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { // Animate the element's value from 0% to 110%: jQuery({someValue: 0}).animate({someValue: 110}, { duration: 1000, easing:'swing', // can be anything step: function() { // called on every step // Update the element's text with rounded-up value: $('#el').text(Math.ceil(this.someValue) + "%"); } }); }); </script> Add code block to the page and insert below code. <span id="el">0</span> Please use the like button if it helps you! Best, Leopold
    1 point
  46. Solved as below: @media screen and (max-width:640px) {h1 {font-size: 30px; } }
    1 point
  47. Hi bsull, I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions. Here's what worked for me: @media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!
    1 point
  48. Adding the following CSS should put you in a good spot: /* Mobile nav styles */ @media (max-width: 799px){ /* Make the sub menu and container that contains the icons spaced apart into a column */ .header--menu-open .header-menu .header-menu-nav-list { display: flex; flex-direction: column; justify-content: space-between; } /* Override default properties to bring the sub menu into view */ .header-menu-nav-folder { position: relative; transform: translateX(0); min-height: auto; } /* Reduce the font size and adjust the space between the lines */ .header-menu-nav-folder a { font-size: 2.1rem; line-height: 1; } /* Override the default `position` and `min-height` properties of the main menu container that also contains the icons and place it below the sub menu using the `order` property. */ .header-menu-nav-folder[data-folder="root"] { position: relative; min-height: auto; order: 2; } /* Hide the container of the main menu */ .header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content { display: none; } /* Hide the back button */ .header-menu-controls-control[data-action="back"] { display: none; } } See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
    1 point
  49. Dee12

    Full width image block

    Yes, your right! It makes the image full width but when you view the site on a mobile device, you can’t see the full image.
    1 point
  50. Ah ok, didn't realize you have to set the elements to 'bottom--'. Not very clear
    1 point
This leaderboard is set to New York/GMT-04:00
Γ—
Γ—
  • Create New...