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


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. brandon's post in Custom Code Injection No Longer Working With New Template was marked as the answer   
    This has to do with AJAX loading. Your previous template probably didn't have it, but Margot does. Disable it, or encapsulate your code in a manner that accounts for it.
  2. brandon's post in How can I hide the ecommerce cart when it is empty? was marked as the answer   
    Something simple like this should work:
    .Cart[aria-label^='0'], .Cart:not([aria-label]) { display: none; } Let me know how that works for you. It's not something I heavily tested. If it does work, it could be modified using opacity and transitions instead.
    https://forum.squarespace.com/topic/2639-hide-cart-until-items-in-the-cart/?tab=comments#comment-15354 https://forum.squarespace.com/topic/4550-hide-cart-icon-unless-product-in-cart/?tab=comments#comment-26867 Also, is it just me or is there no way to get to the checkout on mobile using the Foster template? Using the demo site, there was no link to the checkout at any point in my mock-shopping.
  3. brandon's post in Keep Title & Navigation at Top when scrolling was marked as the answer   
    Hi @AWC914
    It's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect:
    .Header { position: fixed !important; background-color: #DDDDDD; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change.
    So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned.
  4. brandon's post in Adding author name and bio to the end of a post - Bedford template was marked as the answer   
    Well, it's possible with JavaScript to query the collection item's JSON data, parse it and write your own HTML to the DOM at the bottom of the item. I'd expect that'd take a developer less than a few hours, depending on how experienced they were with that sort of thing and the complexity of the layout you wanted.
    One alternative is to just move the author name down to the bottom and add some text before and after it, based on the author class. Make sure you have your style settings set to show the author at the top of the body of the post (not in the header), then add something like this:
    .blog-item article { display: flex; flex-direction: column; } .blog-item article .entry-header { order: 1; margin-top: 1.5em; } .blog-item article .entry-author:before { content: "Written by "; display: inline; } .blog-item article.author-george-zhang .entry-author:after { content: "George Zhang is donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit."; display: block; font-style: italic; font-size: 0.9em; margin-top: 0.2em; padding-left: 120px; background-image: url("/s/your-file-name.jpg"); background-size: 100px; background-repeat: no-repeat; } In the above code, you'd use a "slugified" (lower-case-hyphenated) version of the author's name in place of "george-zhang". You can also find that class within the code by using your Browser's Dev. Tools/Inspector. In the Bedford Demo, that ends up looking like this:

    You'd have to repeat some of that CSS for each author, so it could get a bit tedious. But, it is possible to do with just CSS. One thing to note: you can't have links in the description using this method.
    You can add an author image. However, this requires uploading the image to your storage, taking note of the file page, and then setting it as the background image in the code above.
    As I mentioned, doing a proper job using JavaScript is an option, but may require the assistance of a coder/developer.
  5. brandon's post in Change the "All" text link in Jasper Index Navigation to "Home". was marked as the answer   
    Yo. Here's the non-LESS-CSS version of how you can do that. All those @media statements can be condensed into your LESS mixin, if that's how they're generated originally. You could alternatively target it via :first-child if you wanted.
    .index-navigation a[href="/"] { font-size: 0; } .index-navigation a[href="/"]:after { content: "None"; } @media screen and (min-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vw; } } @media screen and (min-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href="/"]:after { font-size: 18px; } } @media screen and (min-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vh; } } @media screen and (max-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href="/"]:after { font-size: 18px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } }  
  6. brandon's post in Accordion/toggle style only on page refresh was marked as the answer   
    Hi there. The issue has to do with AJAX loading. You can disable it, or you can edit your code to take AJAX loading into account.
    I hope this helps.
  7. brandon's post in Brine - Products:Gallery - Moving Alternative Images/Thumbnails to the right of the Main Image was marked as the answer   
    Hi @nycmonkey. Yes, moving the thumbnails is doable. Give this a shot, inserted via the CSS Editor:
    .ProductItem-gallery { display: flex; } .ProductItem-gallery-slides { order: 1; width: 100%; height: 100%; margin-left: 4%; } .ProductItem-gallery-thumbnails { margin-left: 0; width: 20%; max-width: 90px; } .ProductItem-gallery-thumbnails-item { margin-left: 0; width: 100%; } As for next/previous indicators, that'll take some custom development work. Nothing a dev. couldn't do for you short of a couple hours. Alternatively you can make Squarespace galleries swipeable. It wouldn't have indicators or be clickable on desktop, but if most of your users are on mobile, that might not be a big deal.
    Note that white space will be created below the main image with the thumbnail strip height exceeds it. With a bit more work, it'd be possible to match the height of the thumbnail strip to that of the main image, and make the strip scrollable, thereby removing the gap when there are a lot of thumbnails
    Hope that helps.
  8. brandon's post in global blocks? Have them and don't want them was marked as the answer   
    Hi @Geekless.
    This occurs because the "id" attribute, as you have it, is static, and isn't unique to each page. It's that 'id' attribute to which a block field's layout is connected.
    To remedy this, add some JSON-T value that is appropriately unique. For collections/pages, that's the collection ID. But for posts/items within a collection, it's the item ID (because the collection is the same for all items within it). For example:
    <squarespace:block-field id="residential-{collection.id}" columns="12"/> Note: One thing you should watch for is what "scope" you are in when adding the block field within the .list code. In the example above, I've used {collection.id}. But, if in the context of your .list file, you are already within the {.section collection}...{.end} scope, you would only use {id} instead of {collection.id} in the example above.
    Including said values in the block-field id gives the block-field its "uniqueness" on a per-page/post level.
    What's the difference between collection id and item id?
    The collection id is unique to each collection. The item id is unique to each item within a collection (each blog post, or image, etc.). It's a matter of context as to which you want to use. In your case, because you're editing a .list file and you want to create multiple galleries where each list page has a set of block-fields unique to it, you'll use the collection id. Collections don't have an item id, so item id wouldn't work. If you wanted to have a block-field that was unique to each item in a gallery, you'd edit the .item file and use the item ID (because every item in a single collection would share the same collection id).
    Do let me know how that works for you.
  9. brandon's post in innerHTML.replace was marked as the answer   
    Hi @equites.
    When you set document.body.innerHTML to be equal to something else (even something only slightly different) , you're effectively replacing the entire contents of the body element, not just the text you're seeking to replace via the .replace() method. In other words, it's a destructive action, destroying the entire document and replacing it with a (slightly modified, in your case) copy of it.
    Problem: the elements you're replacing (every single element within the body) may have had event listeners and other functionality "attached" to them. The replacement "copies" are indeed copies, but are also entirely different entities from the original ones. They don't have those actions "attached" like the original elements did.
    Therefore, any element that has had functionality added to it before your code runs will quit working, because the element is replaced with a copy that does not have that functionality.
    For elements that have their functionality added after your code runs, they will work initially, but will then fail to work if your code runs again (if repeating the translation to yet another language.) The Add to Cart button is an example. I'd be surprised if there aren't many others. This can be referred to as a "race condition" and such conditions often cause a lot of confusing behavior.
    Solution: You'll need to take a different approach: identify and target the elements on the page that should have their text replaced. When targeting, ensure you're targeting the inner-most element that contains the text node. While not always necessary, that will ensure you don't destroy existing functionality within the DOM. For each element, replace its innerHTML/text-node, each on an individual basis. This will keep the elements intact, affecting only the text within.
  10. brandon's post in Code to display date/time a page within an Index was last modified? was marked as the answer   
    Hey @alicroft.
    This can be done. It requires a short bit of JavaScript to look for the "updated-at" div, query the page's JSON data, find the latest updated collection for the page (or series of pages in the index page), format the date to your liking, and then write the HTML to the "updated-at" div accordingly.
    I'd guess it'd take a good dev. and hour or two to write and test an efficient and resilient script to do that (the first half hour to get the "gist" done, then maybe another hour to mess with time formatting, which takes a bit of time without using 3rd-party libs).
    So yes, it's possible. Having taken a quick look, I think it could be done without you having to refactor your code at all. You could leave it as you have it on the pages you want it to appear, and the code could be set to run on those pages. If you want more info or help, say the word.
  11. brandon's post in How to adjust and reduce banner padding on a single page only? was marked as the answer   
    The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have:
    section#video .Index-page-content { padding-top: 20px; padding-bottom: 20px; } Insert that via the CSS Editor and adjust to your liking.
    Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap.
    In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector.
    Do let me know how this works for you.
  12. brandon's post in Getting Rid of Extra Padding in Brine was marked as the answer   
    Ok - that makes sense. In that case, we don't need to target each block, we'll just target the home page by using the ".homepage" class. That way, image blocks on your other pages won't be affected.
    .homepage .sqs-block.image-block { margin-right: -18px; margin-left: -18px !important; margin-bottom: -17px !important; } @media screen and (max-width: 640px) { .homepage .sqs-block.image-block:last-child { padding-top: 0 !important; } } Do let me know how that works for you.
  13. brandon's post in How to find Block Id for specific css changes. was marked as the answer   
    Hi @Therzo . IDs starting with
    yui will be dynamically generated on each page load and (as you observed) change accordingly.
    However, IDs starting with
    block-.... do not change. So as long as you don't delete the block and replace it with another, CSS targeted by block should continue to work.
    Here are a couple loosely related threads that may have additional helpful information:
    https://answers.squarespace.com/questions/140670/background-image-bedford-how-to-code.html https://answers.squarespace.com/questions/47192/feature-request-ability-to-assign-custom-css-classes-and-ids-when-authoring-content.html So, use the
    block-.... IDs instead.
    Do let me know if this works for you.

    If this or any other answer solves the problem, please give credit where credit is due: Accept the answer. Code is provided without any warranty, expressed or implied.

  14. brandon's post in Can someone help me change coding to get rid of decimal places in my pricing? was marked as the answer   
    Hi. The following Javascript, inserted via footer code injection should do the trick:
    <script> (function() { var prices = document.getElementsByClassName('sqs-money-native'); var thisPrice; var i, I; for (i=0, I=prices.length; i<I; i++) { thisPrice = prices[i]; thisPrice.innerHTML = thisPrice.innerHTML.replace(/(\.[0-9]*?)0+$/, "$1").replace(/\.$/, ""); //http://stackoverflow.com/questions/1015402/1015434#1015434 } })(); </script>
    I didn't test this throughout your site...just checked a couple pages. Do let me know if this works for you.

    If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  15. brandon's post in Trying to hide an image when displayed on a mobile was marked as the answer   
    Hello. Add the following CSS via the CSS Editor:
    @media only screen and (max-width: 768px) { #block-8fc91e9563250a77172c { display: none; } }
    Do let me know if this works for you.

    If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  16. brandon's post in Loading GIFs for individual images was marked as the answer   
    Hi there.
    One option is to add the gif as a background image on the image's containing element. When the image loads, it will cover up the gif (although the gif is still there, just not visible).
    Something like this, added via the CSS Editor, substituting your own gif file:
    .summary-thumbnail { background-image: url("https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif"); background-position: center; }
    Or, here's another option using just CSS:
    .sqs-block-summary-v2 * { position: relative; z-index: 1; } .summary-thumbnail:after { content: " "; height: 60px; width: 60px; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; display: block; position: absolute; margin-left: auto; margin-right: auto; top: 40%; left: 45%; border-top: 0.2em solid rgba(200, 200, 200, 0.5); border-right: 0.2em solid rgba(200, 200, 200, 0.5); border-bottom: 0.2em solid rgba(200, 200, 200, 0.5); border-left: 0.2em solid #ffffff; border-radius: 50%; } @-moz-keyframes spin {100%{-moz-transform: rotate(360deg);}} @-webkit-keyframes spin{100%{-webkit-transform: rotate(360deg);}} @keyframes spin {100%{-webkit-transform: rotate(360deg); transform:rotate(360deg);}}
    Do let me know if this works for you.

    If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  17. brandon's post in How to reorder the category list from my shop page was marked as the answer   
    Hi there.
    Give this a try. Insert the following CSS using the CSS Editor.
    /*Reorder category list items on Montauk*/ /*http://caniuse.com/flexbox*/ /*http://shouldiprefix.com/#flexbox*/ #collection-5719735837013bf7bb9fc122 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/ /*"All"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) { order: 1; } /*"General"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) { order: 6; } /*"Hair"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) { order: 2; } /*"Hair Care"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) { order: 4; } /*"Nail"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) { order: 5; } /*"Wig"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) { order: 3; } @media only screen and (max-width:640px) { #collection-5719735837013bf7bb9fc122 .category-nav-links { -webkit-flex-flow: column; flex-flow: column; } }
    Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly.
    Do let me know if this works for you.

    If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  18. brandon's post in swap block order in mobile view was marked as the answer   
    Hi there. Give this a try.
    @media only screen and (max-width: 640px) { #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) { display: table; } #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child { display: table-footer-group; } }
    Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table.
    Let me know how it works for ya.
  19. brandon's post in Prevent the navigation bar from disappearing was marked as the answer   
    UPDATE DEC. 23, 2018:
    Hi everyone. The original answer (included below) is old and out of date. Don't use it. It's easy to get a fixed header with CSS, but hard to ensure it looks right on all devices and contexts. If you need more than the basic CSS, use Fixit, a 'plugin' I created that is much more reliable and up-to-date.
    A LOT of people have asked for help with this over the years. There are a lot of different things to consider when fixing nav/headers, and this answer didn't address every possible variation. So the answer needed continued modification.
    So I finally spent a few weeks to create and test a 'plugin' that everyone can use to reliably get fixed headers/navigation in the Brine/Wright family of templates (see list at link).
    It takes all the various aspects into account, and gives you options for "fixing" specific elements in the header. Once the code is added, it handles all the addition of CSS and Javascript for you.
    Take a look at Fixit, and feel free to get in touch if you have any questions on it.

    Hi there.
    This has been asked before (as you have no doubt seen), but I don't think that answer takes everything into account that it ought to. Here's a better answer.
    This is tricky because once you fix the header to the top, the main content gets covered by the header. This is due to the way that "position:fixed" removed the element from the calculated height of the parent. You can compensate by adding padding/margin to the body content, but then other problems can arise (or go unnoticed).
    It's further complicated by the fact that you may or may not be using the announcement bar feature (now or in the future). On top of that, the announcement bar can be closed, which means we need to keep that in mind as well.
    Finally, we must also take into account both full-width and mobile navigations AND the fact that the header isn't always the same height...as screen width or device orientation changes, navigation may wrap and the height change.
    In order to take all of these factors into account, you're going to need to pair some simple CSS with some not-as-simple Javascript.
    Insert the following CSS in the CSS Editor:
    /*Set the full-width nav to fixed position.*/ .Header { position: fixed !important; width: 100%; z-index: 890; /*One more than SS galleries (889), at time of writing.*/ } /*Set the mobile nav to fixed position. Note that clicking hamburger/navicon will jump user to top of page.*/ .Mobile { position: fixed !important; width: 100%; z-index: 890; }
    Now, insert the following Javascript in the Footer area of "Code Injection":
    <script> //On Brine, move the announcement bar inside the .Header element, for use with fixed header. Adjust padding-top on main content according to height of header (initially, on window resize, and on announcement bar close). Y.on('domready', function () { var aBar = document.getElementsByClassName("sqs-announcement-bar-custom-location")[0]; var aBarCloser = document.getElementsByClassName("sqs-announcement-bar-close")[0]; var header = document.getElementsByClassName("Header")[0]; var headerInner = document.getElementsByClassName("Header-inner")[0]; var mobileHeader = document.getElementsByClassName("Mobile")[0]; var siteInner = document.getElementsByClassName("Site-inner")[0]; //Move annoucement bar into header. Otherwise applying "fixed" to both header and aBar will cause overlap. if (aBar) { aBar.parentNode.removeChild(aBar); header.insertBefore(aBar, header.firstChild); } //Call function on initial load. padBody(); //Call function if/when annoucement bar is closed. if (aBarCloser) { aBarCloser.addEventListener('click', function() { setTimeout(padBody, 500); }, false); } //Call function if/when window is resized. window.addEventListener('resize', padBody, false); }); //A function to calculate header height, then pad main content accordingly. function padBody() { var headerHeight; headerHeight = header.offsetHeight; //On mobile, headerHeight will be 0, So recalculate from mobileHeader. if (!headerHeight) { headerHeight = mobileHeader.offsetHeight; } siteInner.style.paddingTop = headerHeight + "px"; resizeImages(); } //A function to resize images after padBody. function resizeImages() { var images = document.querySelectorAll('img[data-src]'); for (var i = 0; i < images.length; i++) { ImageLoader.load(images[i]); } } </script>
    Do let me know if this works for you.

    If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  20. brandon's post in Why does the spacer have a minimum size? was marked as the answer   
    Update 10/24/2019:
    Add this via the CSS Editor, save and refresh:
    /* Add this first bit to get more flexibility in height. */ .sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content { min-height: 0px !important; } .sqs-block-spacer .sqs-block-content { height: 0; } /* Add this second bit too if you want to be able to go to zero. */ .sqs-block-spacer { padding-top: 0 !important; padding-bottom: 0 !important; } If a response helped you out, show some love by 'Like'  (bottom-right) and/or 'Upvote'  (top-left).
    Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing.
    Original Answer:
    Hi @joshuar87.
    I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances.
    The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine.
    It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page.
    /*Remove minimum spacer-block height*/ .spacer-block { padding-top: 0; padding-bottom: 0 !important; } .spacer-block .sqs-block-content { line-height: 0.0em; } .sqs-layout.sqs-editing .spacer-block { min-height: 0; } /*End remove spacer-block height*/   Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time.
    Let me know how this works for you.
  21. brandon's post in How can I stop the logo from scrolling along with the site on the Tudor template? was marked as the answer   
    Yes, here is a suggestion.
    First, check your style editor and be sure that there is not simply an option there to disable the 'fixed' header.
    If you don't see an option in your style editor, you can use the following CSS inserted into the CSS Editor:
      .header-announcement-wrapper { position: static; } #page { margin-top: 0 !important; }   Remember, the CSS Editor and the Style Editor are different editors. The style editor is where you have simple options to change the template. The CSS editor allows you to insert code.
  • Create New...