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

colin.irwin

Circle Member
  • Content Count

    3,459
  • Joined

  • Last visited

  • Days Won

    90

Everything posted by colin.irwin

  1. Could you share a link to the page you're working on?
  2. You can drag blocks around to make multiple columns.
  3. ALL CAPS TEXT is more difficult for people to understand. Avoid using it in body copy.
  4. Your copy uses passive voice a lot. It tends to bury the meaning of sentences. There are also lots of long sentences that you should consider splitting up for easier screen reading. For instance Could be better with active voice.
  5. I would lose the graphic text on your banner - it crops off screen on many screen sizes.
  6. You should insert the code into the Footer injection point Go to Settings > Advanced > Code Injection and insert in FOOTER area Please note that Code Injection is not supported on personal plans. You will need a Business or Commerce Squarespace subscription
  7. You're fine on the personal plan. Custom css works on all plans. It is code blocks and injection points for JavaScript that require business version.
  8. Try logging out of your Instagram account and then trying again. This sometimes helps.
  9. Add this to your custom css area after any other code that may be there #block-yui_3_17_2_1_1571913993663_5072 .summary-item a { pointer-events: none; } The code kills the pointer event on the summary items in that specific block. You can easily get the block ids using this Chrome extension - https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  10. Please share a link to your page. if it's not public you can add a password.
  11. Squarespace blocks are laid out in a grid system. If you have 2 columns (one block next to another) you can drag the divider between then to make one column a different size to the other, which resizes the content in each column. You can also add spacers to the left and/or right. For inline images (where text wraps around the image) you can drag the image divider to resize.
  12. Have you tried adding a custom thumbnail within Squarespace?
  13. Add the following code to the custom css area, after any other code that may already be there. .Blog-excerpt a { font-size: 11px; text-transform: uppercase !important; border: 2px solid #fff !important; padding: 8px 25px 10px 25px; line-height: 4em !important; font-weight: 700 !important; letter-spacing: .1em !important; &:hover { background-color: #fff; color: #000; } } This styles links in the blog post excerpt to look like buttons. Then add a link to each blog post excerpt
  14. You can’t. It makes the feature useless for anything other than brand new sites.
  15. Ok. I think I have a solution. NB. This code counts partial days, so the numbers will rise during the day. Use this as your html. Note that the start date is in MM/DD/YYYY format. <div id="counter" data-startdate="10/13/2019"> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="1" data-desc="less bottles polluting our planet">0</div> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="10" data-desc="litres of iXi Water sold">0</div> </div> I've set a recent start date and small numbers for data-count and data-dailyincrement to make testing easier. Then insert this into your custom css area, after any other code that may already be there. .counter-value { font-size: 50px; line-height:1.4em; text-align:center; padding:18px 0; } .counter-value:after { content: attr(data-desc); display:block; text-transform:uppercase; font-size: 20px; line-height:1.3em; } Insert this into your header injection point <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> And finally, insert this into your footer injection point window.Squarespace.onInitialize(Y, function(){ var a = 0; var dateNow = new Date(); var startDate = new Date($('#counter').attr('data-startdate')); var daysSince = (dateNow.getTime() - startDate.getTime())/ (1000 * 3600 * 24); $('.counter-value').each(function() { var thisIncrement = $(this).attr('data-dailyincrement'); var newTotal = (thisIncrement * daysSince) + $(this).attr('data-count'); $(this).attr('data-count', Math.floor(newTotal)); // console.log(newTotal); }); $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); }); a = 1; } }); });
  16. The first step would be to get all of the information you need into the html part. <div id="counter" data-startdate="31/12/2010"> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="100" data-count="700000" data-desc="less bottles polluting our planet">0</div> <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="500" data-count="3567052" data-desc="litres of iXi Water sold">0</div> </div> In the example above we have An overall start date in the wrapping #counter div. A new dailyincrement variable where you store the amount the total should rise in each elapsed day The data-count variable is still there. It could start from zero or you could give a starting value (what the value was on start date) Is this the sort of behaviour you would want?
  17. The script isn't really suitable for what you want. It just counts up to whatever the data count is over a short period of time. It would be possible to add a routine to look at a global start date and a daily increment value for each entry ( none are supported in your code example) and then adjust the dataq-count variable prior to running the original script.
  18. You will need some sort of script that can calculate the number of elapsed days since whatever your start date is and then calculate each variable. It looks to me like that is already structured for an existing script. Where did you get it from?
  19. Excellent. Can you please hit Like on my answer and also vote it up as an accepted answer?
  20. Add this to your custom css area, after any other code that may already be there #canvas { border-radius: 20px; } Then play with the radius value
  21. Try adding the following to the custom css area, after any other code that may be there. #navigator .siteTitle { float: none; padding: 0; padding-top: 20px; max-width: 100%; text-align: center; } #navigator header#topBar ul#nav { float: none; padding: 0; margin: 0 auto; max-width: 100%; width: 60%; text-align: center; }
  22. It seems to me that the best approach would not be to attempt to glue two or more plugins together. Instead you should set up the products with all of the variant information but hide the dropdowns using css. ) Then you should be able to parse the variant data using javascript and use it to construct a front end similar to the one in the example you have. The variant data is already on the product page (as JSON, from memory). Interacting with your custom front end would set the values on the hidden dropdowns. Then, once the user has completed their selections they can click add to basket and the hidden dropdowns will already be set to the correct values to do the job. Essentially, you're abstracting the complexity.
  23. Those flip things can be embedded but with varying degrees of difficulty. On one system I've embedded all I needed to do was force the aspect ratio of the iframe holding the pages so that it worked correctly on desktop on mobile. That was a hosted service. This is pretty easy stuff. There are other solutions where the scripts need to be installed on the Squarespace site. That is more challenging because they usually have a folder structure that (without going into developer mode) would need to be rewritten to cope with Squarespace's single level /s/ directory structure. This is can be painful (and sometimes impossible) to implement without racking up time and money. If you're going to do it I suggest you post a few possible solutions up here to get guidance from myself and others as to which would be easiest to implement.
  24. I think this might be it. Squarespace was giving away 3 month plans as a perk about 18 months ago. https://usepastel.com/
×
×
  • Create New...