Style the slideshow gallery block arrows in Squarespace

You got yourself some gorgeous pictures to showcase your photography services and you want to display them using one of Squarespace's gallery block.

Buuuut...

The arrows.

Those lame-looking brand-breaking arrows are just messing with the whole look you have going on, yet you need them to make it easier for people to browse through your images so you would prefer to keep them.

Ok, no problem, keep them... but tweak them!

 

With this nifty CSS trick you'll be able to make the arrows match your site's style in less than 10 minutes. Heck, less than 5 if you already know your brand colors' hex codes!

 

So, if you want to switch up the arrows of your gallery block slideshow to make them stand out from your images, and make them look on-brand, here's a quick snippet you can use to target them:

/*Gallery slideshow arrows*/
.sqs-gallery-block-slideshow .sqs-gallery-controls .next,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; //removes the original background behind the arrows
}

.sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background: white;
  color: black;
  font-size: 1.1em; //this changes the size of the arrows
  padding: 13px;
  border-radius: 50%; //remove this is you don't want the background rounded
}
Custom arrows for the slideshow gallery block in Squarespace

You can keep the circular background and/or make any other style changes you like!

 

By adding this under your Custom CSS window (Design > Custom CSS), you'll keep things consistent and make the change on all your gallery slideshows.

 

If you want to add it to just ONE page or section of your site, keep the snippet under the Custom CSS window but you'll need to add the URL slug of that specific index section or the page ID of your regular page to the beginning of each selector.

 

Here's what that would look like if targeting a section of your index:

/*Gallery slideshow arrows*/
#your-section-slug .sqs-gallery-block-slideshow .sqs-gallery-controls .next,
#your-section-slug .sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; //removes the original background behind the arrows
}

#your-section-slug .sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
#your-section-slug.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background: white;
  color: black;
  font-size: 1.1em; //this changes the size of the arrows
  padding: 13px;
  border-radius: 50%; //remove this is you don't want the background rounded
}

 

And here's what the snippet would look like if targeting an individual regular page:

/*Gallery slideshow arrows*/
#collection-your-page-number-here .sqs-gallery-block-slideshow .sqs-gallery-controls .next,
#collection-your-page-number-here .sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; //removes the original background behind the arrows
}

#collection-your-page-number-here .sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
#collection-your-page-number-here.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background: white;
  color: black;
  font-size: 1.1em; //this changes the size of the arrows
  padding: 13px;
  border-radius: 50%; //remove this is you don't want the background rounded
}

 

That's it!

 

Until next time,

B.

 

Save now to save time later!


FOLLOW ME FOR MORE!