ThisJustin

Site URL: https://www.ktrestaurants.com/

Hello,

I create most of my sites with Brine and rely heavily on the feature of setting certain Index pages to the full viewport height (100vh) especially the first page hero. I also like to use the scroll-indicator feature which sits at the bottom of the page.

With Safari 15 on iOS there is now a bottom tab/location bar that covers a portion of this "full-height" section. When you scroll down the tab bar goes away, but on initial page load it is blocking the scroll indicator as well as part of the background image. Basically this breaks setting height to 100vh.

Has anyone determined a way to ensure that this content is reliably placed above this bar and not obscured? Does anyone know if Squarespace is working on any kind of fix for this feature on iOS? I've haven't had any luck so far.

It seems like there's just a sliver of another background colour coming through on that section. You can try this:

section[data-section-id="618be5a6834cb76419127e86"]{
	/* Other Styles */
	background-color: #17242c!important;
}

But you shouldn't have to add a border to use border-radius. If you were getting some weird behaviour you could read a bit more about it here.

Hi! You can add this to your custom css:

.acuity-embed-button:hover{
    background-color:red!important;
}

Just replace red with whatever color you'd like.

Great! Glad to hear it. 🙂

You can make a trial site password protected and share the url and password here.

The best way to do this would be in developer mode so that you can actually edit the template.

Here is a hacky way to do it with jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('.entry').each(function(){
       date = $(this).find(".date-wrapper").html();
       category = $(this).find(".blog-categories").html(); 
       $(this).find(".date-highlight").html(category);
       $(this).find(".blog-categories").html(date);
    });
});
</script>

You would also need to update the CSS to make it look right.

It should be possible with custom css. Can you provide a URL to the site in question?

Hi Shannon,

Which page do you want to hide the navigation on? You'll need to open up developer tools and find the collection id for that page. (It's in the list of body classes and looks like: collection-5d978ee6590a832f3c3fe6d4)

Then you could do something like:

#collection-id #topNav{
	display:none;
}

If you want to remove the whole sidebar it would be:

#collection-id {
	#headerWrapper{
		display:none;
	}
	.header-position-fixed-left #pageWrapper{
		 margin-left:0px;
		 max-width: unset;
	}
}

This would all go into your Custom CSS.

Hi can you provide a URL to the site in question?

Hello! Can you provide a URL?

Hi Lindsay,

Unfortunately, this won't work as the aspect ratio of the two screen sizes are different.

One way to solve this problem would be to upload a photo without any text and then build that text box in Squarespace. This would also be much better for accessibility and SEO.

You might still need to adjust the image so that your face isn't cut off though.

I forgot to say I am talking about the Menu blocks in 7.0 and am currently working on Brine.

Ok here's what I figured out using JavaScript and jQuery. This won't work if you have multiple Menu blocks on the same page.

I decided to use the anchor link URL syntax rather than variables for tidiness. This should take a URL in the format: https://example.com/menu-page#menu-name

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- SMART URLs FOR MENU BLOCK -->
<script>
$(document).ready(function(){
 var anchor = getUrlAnchor();
 if (anchor) {
   $(".menu-select-labels").each(function(){
      var name = $(this).text();
      var slug = slugify(name);
      if (anchor == slug){
      	$(this).attr("tabindex", "0");
        $(this).attr("aria-selected", "true");
        $(this).addClass("menu-select-labels--active");
      } else {
      	$(this).attr("tabindex", "-1");
        $(this).attr("aria-selected", "false");
        $(this).removeClass("menu-select-labels--active");
      }
   });
   $(".menus--has-multiple .menu").each(function(){
      var name = $(this).attr("aria-label");
      var slug = slugify(name);
      if (anchor == slug){
      	$(this).css("display", "block");
      } else {
      	$(this).css("display", "none");
      }
   });
 } else {
   var name = $(".menu-select-labels--active").text();
   var slug = slugify(name);
   updateUrl(slug);
 }
 $(".menu-select-labels").click(function(){
   var name = $(this).text();
   var slug = slugify(name);
   updateUrl(slug); 
 }); 
});
</script>

Here's a function to retrieve the anchor link from the URL (the part after the #):

<script>
var getUrlAnchor = function getUrlAnchor() {
    var url = window.location.href;
  	if (url.indexOf('#') > 0){
      return url.substring(url.indexOf('#') + 1);
    }
    return false;
};
</script>

And another one to update the URL with the current menu:

<script>
var updateUrl = function updateUrl(slug) {
  const state = { 'menu_id': slug };
  const title = document.title;
  const url = window.location.href;
  const baseUrl = url.substring(0, url.indexOf('&'));
  const newUrl = baseUrl + "#" + slug;
  history.pushState(state, title, newUrl);
  return newUrl;
}
</script>

And finally a helper function to slugify the menu names since Squarepsace doesn't do this anywhere (this one I borrowed from the internet):

<script>
// Slugify a string
var slugify = function slugify(str) {
    str = str.replace(/^\s+|\s+$/g, '');

    // Make the string lowercase
    str = str.toLowerCase();

    // Remove accents, swap ñ for n, etc
    var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
    var to   = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    // Remove invalid chars
    str = str.replace(/[^a-z0-9 -]/g, '') 
    // Collapse whitespace and replace by -
    .replace(/\s+/g, '-') 
    // Collapse dashes
    .replace(/-+/g, '-'); 

    return str;
}
</script>

Site URL: https://www.savourycity.com/events/plated

Hello,

I have a page that uses the built-in Menu block feature with multiple menus. I'm wondering if there is a way to navigate to this page but indicate which menu to display?

Is there anything that can be added to the URL to make this happen? Or perhaps adding a variable that some javascript could handle?

I'm just not really sure how the Menu block is implemented, but it's frustrating that Squarespace hasn't exposed some easy way to do this.

Thanks in advance!

Hello,

I'm wondering if anyone has had success installing the local development server on a Apple M1 (ARM64) device? I keep running into an error, and I'm not sure what the issue is. Error log is below.

Thanks in advance!

justineverett@MacBook-Air template % sudo npm install @squarespace/server
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path /Users/justineverett/Alimentaria/template/node_modules/@squarespace/server
npm ERR! command failed
npm ERR! command sh -c node scripts/execif.js --exists=build npm run bundle && npm run cleanupscript
npm ERR! Executing: npm run bundle
npm ERR! 
npm ERR! > @squarespace/server@1.8.2 bundle
npm ERR! > node scripts/bundlejre.js --accept --clear -tz -j 8u131 -o build/distributions/runtimes/jre
npm ERR! 
npm ERR! Bundling compatible JRE (This may take a while)
npm ERR! /Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:36
npm ERR!   var sortedVersions = versions.sort().reverse();
npm ERR!                                 ^
npm ERR! 
npm ERR! TypeError: Cannot read property 'sort' of undefined
npm ERR!     at getVersion (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:36:33)
npm ERR!     at module.exports (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:51:13)
npm ERR!     at main (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/bundlejre.js:53:13)
npm ERR!     at Object.<anonymous> (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/bundlejre.js:79:1)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1109:14)
npm ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:989:32)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:829:14)
npm ERR!     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
npm ERR!     at node:internal/main/run_main_module:17:47
npm ERR! Command failed: npm run bundle

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/justineverett/.npm/_logs/2021-06-29T19_05_01_492Z-debug.log

Hi, I think I found a better solution:

.ProductItem-gallery-slides-item-image {
    object-fit:contain!important; 	
}

It's insane to me that Squarespace doesn't just have an "Original Aspect Ratio" option for product details pages. Kind of a dealbreaker for photographers.