holahannah

Hello,

I’m about to launch a site for a client and while doing some checks/tests I’ve realised the website doesn’t display well when Android users are viewing in dark/light mode.

Is there an Android/device testing tool I can use to check this as I don’t have an Android device?

And is there a way to block dark mode from being loaded? My site is quite light so I want it to appear this way. If necessary how can I customize a ‘dark mode’ or is this entirely determined by browser settings?

My website for reference:

pelisnoosa.com.au

password: pelisxnoosa

Any advice much appreciated. Thanks

Hello @tuanphan, 

This works perfectly! 
https://beseensocials.squarespace.com/
password: bandit

Thank you for all your help. This tutorial will be really useful in the future as well. 🙂

Hi @tuanphan, are you still able to help me with the above? 
Many thanks 🙂 

Hi @tuanphan, 

Awesome! Thank you. I've done done the following: 

1. Added each service as an individual text block
2. Changed all the links to '/services' since they all should link to the same page
3. Updated the #block ids to match the new individual text blocks

So it looks to be working, I guess we need to do something with the z-indexes to get that layering effect?

Here is my updated code for reference: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // UGC
  $('#block-23339ece2c22d6b92223 a[href="/services"]').hover(function(){
    $("#block-f6e68d478332e15aeb0f").addClass("show");
    }, function(){
    $('#block-f6e68d478332e15aeb0f').removeClass("show");
    }
  );
// Events
 $('#block-944cfafbc32dfe43303a a[href="/services"]').hover(function(){
    $("#block-a6479a8dc0ec609e973e").addClass("show");
    }, function(){
    $('#block-a6479a8dc0ec609e973e').removeClass("show");
    }
  );
  // Content Creation 
   $('#block-c85b10bab9dfb1aadd8e a[href="/services"]').hover(function(){
    $("#block-9c5ff1805beb149480ba").addClass("show");
    }, function(){
    $('#block-9c5ff1805beb149480ba').removeClass("show");
    }
  );
// Influencers
  $('#block-f1ccd03aeab72bf3601c a[href="/services"]').hover(function(){
    $("#block-1e2eeee6b68cb4f6fe41").addClass("show");
    }, function(){
    $('#block-1e2eeee6b68cb4f6fe41').removeClass("show");
    }
  );
 // Social Media
  $('#block-289c03331e84f635bdbe a[href="/services"]').hover(function(){
    $("#block-57a76816f07e19e72171").addClass("show");
    }, function(){
    $('#block-57a76816f07e19e72171').removeClass("show");
    }
  );
});
</script>
<style>
#block-f6e68d478332e15aeb0f, #block-a6479a8dc0ec609e973e, #block-9c5ff1805beb149480ba, #block-1e2eeee6b68cb4f6fe41, #block-57a76816f07e19e72171 {
  opacity: 0;
  transition: all 0.1s ease;
  }
.fe-block-23339ece2c22d6b92223 {
position: relative;
z-index: 99999 !important;
}
  .fe-block-23339ece2c22d6b92223 * {
  	border: none !important;
    text-decoration: none !important;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

Thank you! 

Hi @tuanphan, thanks for your reply. 
Ok - so I should change them to 5 separate text blocks?

The texts just need to click through to the "Services" page. Is this possible? 

Thank you 

Hi @tuanphan, thank you for this tutorial. 

I was looking for ages for a plugin or tutorial explaining how to achieve this effect, and this works so well. 
I've put it to action here, in the 'Service Offerings' section towards the bottom of the page:

https://beseensocials.squarespace.com/
password: bandit

I have a question regarding the layering of the images. Is it possible with your code to have the image only behind the text correlating with the image (and then the image overlaps the other non-active links)? Like the screenshot attached. So the Influencer image, is behind the 'Influencers' text, but overlays the 'Content Creation' and 'Social Media Management' texts. 

Or would I need to create a separate text block for each of these?

Great tutorial, for a cool effect, thank you! 

Great! Glad that worked for you 🙂 Yeah, it seems that if you don't specify a weight or 'normal' it defaults to the bolded version, distorting the fonts. I've run into this same problem a few times on various sites when I'm using custom fonts, and it always seems to do the trick. 

Thank you @Lesum - worked perfectly! 

Hello, 

I've created a testimonial slider using a summary block, however I want to move the image to the bottom of the text (rather than the top) - does anyone know the code or have a resource for that? Screenshot for reference. 

https://beseensocials.squarespace.com/
password: bandit
(scroll down to the testimonials section)

Thank you

Hello, 

I'm trying to achieve something similar - having a horizontal scrollbar visible on my summary carousel block. 
I've added the code above (overflow-x: scroll) which gets the scrollbar to appear, however the styling that @tuanphan posted above doesn't seem to work. 

Is there a way to: 
1. Style the scrollbar, so it's black and white, as per the screenshot attached
2. When you click the navigation arrows, can they scroll one item at a time. I don't want to hide the arrows, but when you click them, they don't scroll properly through the other tiles. 

My site is: 
https://beseensocials.squarespace.com/about
password: bandit

Many thanks

Hi @Lesum, thank you so much! I didn't think of trying the archive block, but I will also try that out and see what the best solution is. Thanks for your feedback, had given me something to think about. 

Hello, 

I'm trying to determine if the attached layout is something that could be possible to build in Squarespace. 

My thoughts are to use a summary block of posts, with the Universal Filter plugin (which I've used before) and then do I style each summary item, to follow the intended layout?

Ie, is it possible to style each summary item .sumary-item:nth-of-type(1) or something like that, to match the grid positioning of the design, but then when it filters, the summary items remain in the custom layout?

Might try playing around with it, but am just talking out loud to see if my thoughts on achieving this layout are logical, or if anyone has a better suggestion of how this could be achieved?

Thanks

Thank you! 

Thank you @tuanphan. That code seemed to work well for the first testimonial, but since I've got other testimonials of different lengths, the arrows don't line up to the testimonial names for the other slide items. Screenshot attached so you can see what I mean. Thanks

Hello, 

I am using gallery blocks on my website, using a portrait aspect ratio. I'm happy with how it looks on desktop, however on mobile, all of the images are getting cropped to a portrait aspect ratio - even though I have a mix of portrait and landscape images in the gallery. 

On mobile, is it possible to remove the selected aspect ratio in the gallery settings, and just have the image thumbnails appear uncropped, in their original apsect ratio? So a mix of portrait and landscape images just in a grid?

https://mcshane.squarespace.com/work/carstensz
password: bandit

Many thanks

I ended up using the overflow carousel plugin that @tuanphan mentioned above, which worked a treat! 

I'm trying to do something similar with another site, however on this particular summary block, I want to have custom navigation arrows, and hide the carousel overflow.

Here's my site: 
https://mcshane.squarespace.com/
password: bandit

I've set up two carousels for the projects: 

1. First carousel has the custom arrow navigation I want to use, however doesn't have the swiping/trackpad scrolling that I want. 
    
2. Second carousel has the correct swiping/trackpad scrolling - however I'm not sure how to get the custom arrows to appear, and so they overflow the carousel (as the first carousel example does). I am using the code from this plugin: https://www.will-myers.com/products/p/overflow-carousel-items
    

So guess my question is - how can i update the 2nd carousel to have the custom arrow icons? 
Any guidance would be great. Thank you!
 

Thanks @creedon - ahh didn't even look at when that code was written. I won't spend more time looking to change it then, I guess the default error messages will have to do. Thank you!

Further to the above, I've managed to now style the error messages how I want them to appear. 

However is there a way to change the actual wording?

I saw this as a solution in a few posts: 
https://www.silvabokis.com/squarespace-tips-archive/dynamic-translation-of-squarespace-form-error-messages

However when I add it to Code Injection --> Footer - nothing seems to update? Am i missing something obvious here?

Hello, 

Is it possible to customise the error message on a form? I would like to be able to change what the text actually says, and also the style, so it sits within my form fields. 

Attached is how the default error message looks, vs how I'd like it to look, if possible. 

My site: 
https://mcshane.squarespace.com/
password: bandit

Is it possible? Many thanks 🙂

Hello, 

I've got a testimonial slider on my website, and I've managed to use custom arrows for the previous / next control. 
Is there a way to ensure they are always aligned with the testimonial name (as per screenshot attached). The testimonials will vary in length, so I'm hoping there's a way for the arrows to always be aligned to the name. 

I tried doing it, but can't get the arrows to exactly align, and I think the method I've used won't work if the testimonial is longer / shorter. Towards the end of this page: https://mcshane.squarespace.com/ password: bandit

Any ideas? Thank you 

Worked perfectly! Thank you so much! 

Thank you @tuanphan, 

I added that code, which works great for the image height, but now i have a large gap after the 6th image, and the 7th image doesn't start until the next row (see screenshot attached). Any way to fix that so there are no gaps in the grid, and all the image sit next to each other?

Thanks

Ahh, you're right! Thank you for checking. I guess because the line is so thin you need to click only on the line. Thanks

Hi @tuanphan, do you know if it's possible for the image to change when you click on the lines/bullets?

Here's the final code I ended up using: 

/* Slideshow Gallery */
button.gallery-fullscreen-slideshow-bullet {
  height: 1px !important;
  width: 34px !important;
  border-radius: 0 !important;
  border: none!important;
  background-color: #ffffff!important;  }

button.gallery-fullscreen-slideshow-bullet.active {
  height: 2px !important;
}

Thank you

Hello, 

I'm trying to create a grid gallery, with portrait images, however each 5th image will be landscape, so I want it to take up 2 columns (see the design attached). 

I've tried to achieve the effect using the below code: 
 

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide:nth-child(5){
    width: 66.66666667%;
  
}
.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide:nth-child(6) {
  clear: left;
}

Which seems to half work. My issue is that the height on the 5th image is now too much (perhaps due to the aspect ratio of the gallery?

Is there a way to ensure the 5th image has the same height has the row, and then in the next row, the images appear again in 3 columns?

My site for reference:

https://mcshanetest.squarespace.com/work/lava-kingston
password: bandit

Many thanks