PEARLERwork

April 13

@paul2009 classic! haha. thanks so much either way.

April 13

We're also having that issue @paul2009. Our domain providers are a bit unhelpful. Which of these A records needs to be updated to Squarespace? I think this is what's holding us back. Thanks in advance.

March 17

This block just shows as a gap on mobile. When I switch it to the grid gallery, it shows up fine. Any ideas?

February 29

On mobile (Safari, Chrome) my gallery block won't appear. I've removed all CSS code from the site, tested, then placed it back to see if something is interfering, but it seems to not be the source of the issue (I could be wrong).

This is the very first block on the first section of the homepage. Thanks.

November 24, 2023

@tuanphan Ah yes! https://authentic-audience.squarespace.com/

November 24, 2023

@tuanphan 🙏

November 22, 2023

Website: https://authentic-audience.squarespace.com/

I'm trying to apply borders and border radius to image blocks on fluid engine. They're appearing cut off. Any ideas? Here is my code. Thank you!

#block-d541d7995278485358cf img {
  border: @borderWeight solid !important;
  border-radius: @corners !important;
}

#block-f60d5a2650bbc4319b18 img {
  border-top-right-radius: 1000px !important;
    border-top-left-radius: 1000px !important;
  border: @borderWeight solid !important;
}

November 21, 2023

Website: https://bit.ly/3SSlZLf
Password: pearler

The below code is added to the Footer Code Injection, However it's causing a gap to appear at the bottom of all pages. Thanks!

<!-- ☯︎ START SPARKLE CURSOR ☯︎ -->
<script>
var colour="#d9408c"; // "random" can be replaced with any valid colour ie: "red"...
var sparkles=100;// increase of decrease for number of sparkles falling
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

colours=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','ff00ff')

n = 10;
y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';

if (ns){
	for (i = 0; i < n; i++)
		document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+' bgcolor=#ff0000></layer>');
}

if (ie)
	document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

if (ie||n6){
	for (i = 0; i < n; i++)
		document.write('<div id="dots'+i+'" style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');
}

if (ie)
	document.write('</div></div>');
(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

	y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
	x = (ns||n6)?evnt.pageX+1:event.x+1;
}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function animate(){

	o=(ns||n6)?window.pageYOffset:0;

	if (ie)con.style.top=document.body.scrollTop + 'px';

	for (i = 0; i < n; i++){

		var temp1 = eval(d+a+"dots"+i+n6r+s);

		randcolours = colours[Math.floor(Math.random()*colours.length)];

		(ns)?temp1.bgColor = randcolours:temp1.background = randcolours; 

		if (i < n-1){

			var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
			temp1.top = parseInt(temp2.top) + 'px';
			temp1.left = parseInt(temp2.left) + 'px';

		} 
		else{

			temp1.top = y+o + 'px';
			temp1.left = x + 'px';
		}
	}

	setTimeout("animate()",10);
}

animate();

window.onload=function() { if (document.getElementById) {
	var i, rats, rlef, rdow;
	for (var i=0; i<sparkles; i++) {
		var rats=createDiv(3, 3);
		rats.style.visibility="hidden";
		rats.style.zIndex="999";
		document.body.appendChild(tiny[i]=rats);
		starv[i]=0;
		tinyv[i]=0;
		var rats=createDiv(5, 5);
		rats.style.backgroundColor="transparent";
		rats.style.visibility="hidden";
		rats.style.zIndex="999";
		var rlef=createDiv(1, 5);
		var rdow=createDiv(5, 1);
		rats.appendChild(rlef);
		rats.appendChild(rdow);
		rlef.style.top="2px";
		rlef.style.left="0px";
		rdow.style.top="0px";
		rdow.style.left="2px";
		document.body.appendChild(star[i]=rats);
	}
	set_width();
	sparkle();
}}

function sparkle() {
	var c;
	if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
		ox=x;
		oy=y;
		for (c=0; c<sparkles; c++) if (!starv[c]) {
			star[c].style.left=(starx[c]=x)+"px";
			star[c].style.top=(stary[c]=y+1)+"px";
			star[c].style.clip="rect(0px, 5px, 5px, 0px)";
			star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
			star[c].style.visibility="visible";
			starv[c]=50;
			break;
		}
	}
	for (c=0; c<sparkles; c++) {
		if (starv[c]) update_star(c);
		if (tinyv[c]) update_tiny(c);
	}
	setTimeout("sparkle()", 40);
}

function update_star(i) {
	if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
	if (starv[i]) {
		stary[i]+=1+Math.random()*3;
		starx[i]+=(i%5-2)/5;
		if (stary[i]<shigh+sdown) {
			star[i].style.top=stary[i]+"px";
			star[i].style.left=starx[i]+"px";
		}
		else {
			star[i].style.visibility="hidden";
			starv[i]=0;
			return;
		}
	}
	else {
		tinyv[i]=50;
		tiny[i].style.top=(tinyy[i]=stary[i])+"px";
		tiny[i].style.left=(tinyx[i]=starx[i])+"px";
		tiny[i].style.width="2px";
		tiny[i].style.height="2px";
		tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
		star[i].style.visibility="hidden";
		tiny[i].style.visibility="visible"
	}
}

function update_tiny(i) {
	if (--tinyv[i]==25) {
		tiny[i].style.width="1px";
		tiny[i].style.height="1px";
	}
	if (tinyv[i]) {
		tinyy[i]+=1+Math.random()*3;
		tinyx[i]+=(i%5-2)/5;
		if (tinyy[i]<shigh+sdown) {
			tiny[i].style.top=tinyy[i]+"px";
			tiny[i].style.left=tinyx[i]+"px";
		}
		else {
			tiny[i].style.visibility="hidden";
			tinyv[i]=0;
			return;
		}
	}
	else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
	if (e) {
		y=e.pageY;
		x=e.pageX;
	}
	else {
		set_scroll();
		y=event.y+sdown;
		x=event.x+sleft;
	}
}

window.onscroll=set_scroll;
function set_scroll() {
	if (typeof(self.pageYOffset)=='number') {
		sdown=self.pageYOffset;
		sleft=self.pageXOffset;
	}
	else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
		sdown=document.body.scrollTop;
		sleft=document.body.scrollLeft;
	}
	else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
		sleft=document.documentElement.scrollLeft;
		sdown=document.documentElement.scrollTop;
	}
	else {
		sdown=0;
		sleft=0;
	}
}

window.onresize=set_width;
function set_width() {
	var sw_min=999999;
	var sh_min=999999;
	if (document.documentElement && document.documentElement.clientWidth) {
		if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
		if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
	}
	if (typeof(self.innerWidth)=='number' && self.innerWidth) {
		if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
		if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
	}
	if (document.body.clientWidth) {
		if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
		if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
	}
	if (sw_min==999999 || sh_min==999999) {
		sw_min=800;
		sh_min=600;
	}
	swide=sw_min;
	shigh=sh_min;
}

function createDiv(height, width) {
	var div=document.createElement("div");
	div.style.position="absolute";
	div.style.height=height+"px";
	div.style.width=width+"px";
	div.style.overflow="hidden";
	return (div);
}

function newColour() {
	var c=new Array();
	c[0]=255;
	c[1]=Math.floor(Math.random()*256);
	c[2]=Math.floor(Math.random()*(256-c[1]/2));
	c.sort(function(){return (0.5 - Math.random());});
	return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
}
// ]]>

</script>
<!-- ☯︎ END SPARKLE CURSOR ☯︎ -->

November 15, 2023

Website: https://cosmo-fluid.squarespace.com/blog/how-to-creative-flow
Password: pearler

I've customised the layout of this blog post fairly heavily but I'm wondering why there's still a gap at the bottom here? It seems to be related to the comments area. I also can't seem to get the comment box to reveal itself.

Thank you!

November 15, 2023

https://cosmo-fluid.squarespace.com/?password=pearler

I've positioned my cart and social links to be fixed to the right side of the page. However, I'm noticing the position of the cart doesn't stay the same like the social links do. Here is my code:

@media screen and (min-width: 749px) {
  
  .header-layout-branding-center-nav-center .header-actions--left {
    right: 4vw !important;
  	left: unset !important;
	  margin-right: 3vw !important;
    flex: 0 1 25% !important;
  }

  .header .header-actions-action--cart .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .header-actions-action--social {
    position: fixed;
    top: 50%;
    flex-direction: column;
    right: 1vw;
  }
  
  .header-actions-action--social .icon {
    margin-left: -40px !important; //change as necessary
    margin-bottom: 20px;
  }

  .header-actions-action--cart {
    position: fixed;
    right: 30px;
    top: 45%;
  }

  .header-actions--right {
    justify-content: center;
  }
}

Any ideas? Thanks!

September 26, 2023

Thank you @tuanphan - nothing is cut off now, however it's showing like this:

September 25, 2023

@tuanphan apologies - try this link:
https://cosmo-fluid.squarespace.com/ password = pearler

September 25, 2023

@tuanphan would love your help with this, thank you 🙂

September 22, 2023

@tuanphan Thank you, it's worked! That only issue now is the cart has doubled?

September 22, 2023

On mobile, I'm having issues with:

1. Applying the same styling that appears on image posts for video posts (border, box-shadow, border-radius)
2. Video posts appearing cut off
3. Generally stacking poorly with no spacing

Website: https://coral-seabass-fgw5.squarespace.com/
Location: Instagram Gallery Block in Footer
Device: Mobile (all browsers)
Screenshot attached
My code:

.instagram-block .slide a img,
.instagram-block .slide .sqs-video-overlay img {
	border: 2px solid #000 !important;
    border-radius: 15px !important;
    box-shadow: 10px 10px #E1CBEE !important;
}


@media screen and (min-width: 749px) {
.instagram-block .slide,
.instagram-block .sqs-video-overlay,
.instagram-block .sqs-gallery-block-grid,
.instagram-block .content-wrapper {
  overflow: visible !important;
}
}

Big thanks!

August 28, 2023

@tuanphan We love the header button being fixed in the corner on desktop. However we'd like it to do the same on mobile, but of course it's hidden inside the mobile menu! 🙂

August 23, 2023

@tuanphan I've attempted the code above but unfortunately, it doesn't seem to work? I believe these codes used to work but maybe something has changed with Squarespace.

https://www.emilywylde.co.uk/ (mobile footer button)

January 26, 2023

I've added the below code, however on this page, it seems to be stick on 500 weight font?

h1 strong,
h2 strong,
h3 strong,
h4 strong,
.list-section-title strong {
    font-family: @heading !important;
    font-weight: 400 !important;
}

// LESS BOLD, BOLD FONTS ➷ ☯ ☯ ☯ ☯ //
strong {
    font-weight: 400 !important;
}

Ziggy · November 29, 2022

Awesome @Ziggy I appreciate it

November 29, 2022

Thanks @tuanphan - this works. I'm glad we can do this now.

November 29, 2022

Even though the padding on all of my buttons are set to the same values, I'm noticing the sections that I've converted to fluid aren't reflecting my settings. Any ideas?

October 28, 2022

https://emu-frog-srar.squarespace.com/

A client is using my template, but for some reason on a summary block on the homepage, the borders and border radius is only applying to the 1st and 3rd product image. When I deleted the block and added a new one, the borders applied to the 1st, 2nd, and not the 3rd. Very strange! Any help appreciated.

October 19, 2022

On 1/16/2021 at 2:52 PM, rebeccasmith said:

Hey all!

I used the code provided by humxahafeex above, pasted into my header injection and works!

However, I am experiencing one problem -- when i scroll down my website, it seems to scroll on forever and doesn't end at the footer as it should. The cursor code seems to be causing this because when i remove it, the problem is fixed.

Anyone have any solutions to keeping this cursor but getting rid of the endless scroll?

My website is smithrebecca.com for reference.

Thanks!

@rebeccasmith Did you get an answer to this in the end?

October 17, 2022

@tuanphan This is how I added it:

[data-current-styles*='"customSectionHeight": 41'] {

#page>article>section:first-child:before {
    content: "";
    position:absolute;
    background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg);
    background-size:contain;
    background-repeat:no-repeat;
    width: 85%;
    height: 85%;
    top: 7%;
    right: -50vw;
    z-index:2;
}

}

October 10, 2022

Thanks @tuanphan! This code works great, except when I wrap it in the other code you gave:

[data-current-styles*='"customSectionHeight": 41'] {

}

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by PEARLERwork

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources